模板字面量的最简单语法，是使用反引号（ `）（Tab上面那个键）来包裹普通字符串，而不是用双引号或单引号。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="template">

  </div>

</body>

<script>

  //变量

  let name = "Nicholas";

  //方法

  function makeUpperCase(word) {

    return word.toUpperCase();

  }

  let element = `

              <div>

                  Hello, ${name}

              </div>

              <ul>

                  <li>1.${makeUpperCase('tell me!')}</li>

                  <li>2.call me!~</li>

              </ul>

              `.trim();

  document.getElementById("template").innerHTML = element;

</script>

</html>

ES6 - 字符串的扩展（模版字符串）的更多相关文章

  1. ES6箭头函数及模版字符串

    var f = v => v; 等同于: var f = function(v) { return v; }; 箭头函数可以与变量解构结合使用: const full = ({ first, l ...

  2. ES6之模版字符串

    ES6之模版字符串 最近在项目中使用了ES6的模版字符串,在这里加以总结. 1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的: $("#result"). ...

  3. ES6 模版字符串及常用的es6扩展方法

    1.ES6 模版字符串es6 模版字符串主要用于简化字符串的拼接 <script type="text/javascript"> let obj={name:'rdb' ...

  4. es6 字符串的扩展和数值的扩展

    es6字符串的扩展 1. es6新增的一些方法 1.1 includes 判断是否包括在内,返回一个 true or false 1.2 statsWith 判断是否以什么开头,返回一个 true o ...

  5. ES6的新特性（4）——字符串的扩展

    字符串的扩展 ES6 加强了对 Unicode 的支持,并且扩展了字符串对象. 字符的 Unicode 表示法 JavaScript 允许采用\uxxxx形式表示一个字在\u0000~\uFFFF之间 ...

  6. es6中的模版字符串

    目录 字符串拼接 includes() startsWith() endsWith() padStart() es6中的模版字符串替代了原有的字符串拼接功能. 字符串拼接 es5方式 传统的字符串拼接 ...

  7. ES6学习笔记(3)----字符串的扩展

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 字符串的扩展ES6之前只能识别\u0000 - \uFFFF 之间的字符,超过此范围,识别会出错 ...

  8. ES6学习历程(字符串的扩展)

    字符串的扩展 在看这一节的时候前半部分写的都是关于unicode的内容,我个人感觉这部分在实际的开发中用的很少,所以不打算在做记录,等届时用到再有针对性的看,所以就将在ES6里面关于字符串操作的一些新 ...

  9. ES6学习笔记（三）字符串的扩展

    ES6 加强了对 Unicode 的支持,并且扩展了字符串对象. 1.字符的Unicode表示法 JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码 ...

  10. 字符串的扩展(ES6)

    文章目录 字符串的扩展 1. 字符的Unicode表示法 2. codePointAt() 3. String.fromCodePoint() 4. 字符串的遍历器接口 5. at()(提案) 6. ...

随机推荐

  1. 分析一个UBOOT的方法

    1. 编译完成后可以看到在主目录下生成了uboot.bin文件,为了方便分析,使用如下命令将其反汇编:arm-linux-objdump -D -m arm u-boot > u-boot.as ...

  2. centos 启动 oracle

    source .bash_profile su - oracle //切换到自己的oracle账户   lsnrctl start //启动oracle监听   sqlplus /nolog //登录 ...

  3. Git for Windows安装教程

    1.国内直接从官网(http://git-scm.com/download/win)下载比较困难,速度极慢,需要翻墙. 这里提供一个国内的下载站,方便网友下载(https://npm.taobao.o ...

  4. V-rep（1）

    第一次课堂作业,需要导入网格三维模型,对齐坐标系,然后在各个关节添加jiont,实现外观模型和运动仿真模型的分离. 1.首先导入模型.导入模型可能是一个整体模型(装配好的),也可能是单个(mesh)网 ...

  5. php迭代器模式(iterator pattern)

    ... <?php /* The iterator pattern is used to traverse a container and access its elements. In oth ...

  6. 前端知识--mulline框架，返回到前一个页面，并且刷新前一个页面

    最近在写项目的时候,遇到了这样一个问题,在第二页面修改完了数据之后,点击返回按钮的时候,第一个页面要返显出第一个页面的数据,这想想其实也不是很难,但是,难就难在,这两个页面是同时打开的.关闭了一个页面 ...

  7. 基于Docker搭建GitLab代码管理

    关于Git.SVN的优缺点就不再重复了,本篇主要以实际搭建为主. 1.下载镜像文件 在命令行窗口执行如下指令,预计下载完成4分钟. docker pull beginor/gitlab-ce:11.0 ...

  8. 例程使用（1-4）共享内存 存图片+vector容器教程

    1传输的数据 1-1数据格式说明 1 两路视频图像Mat 图像 图像数据(Mat)+图像头信息(ImgInf) //图像的宽.高.类型信息 typedef struct { int width; // ...

  9. C程序运行原理

    计算机不能直接识别和执行高级语言写的命令,必须用编译程序(也称编译器)把C源程序翻译成二进制形式的目标程序,然后再将该目标程序与系统的函数库以及其他目标程序连接起来,形成可执行的目标程序 C语言的编译 ...

  10. Xamarin.Forms之XAML

    官网参考 XAML基础知识 XAML(eXtensible Application Markup Language)可扩展应用程序标记语言,允许开发者在Xamarin.Forms应用中采用标记而不是代 ...