模板字面量的最简单语法，是使用反引号（ `）（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. linux服务器问题排查：w命令卡住

    基本情况 系统: ubuntu16.04 症状: who命令可以用,w命令用不了 sudo iotop命令会卡住,黑屏 nvidia-smi命令和nvl命令都用不了,卡住 排查步骤 strace ps ...

  2. 《linux就该这么学》课堂笔记05 管道符、通配符、转义、vim编辑器

    vim编辑器 三种模式的操作区别以及模式之间的切换方法 命令模式:控制光标移动,可对文本进行复制.粘贴.删除和查找等工作. 输入模式:正常的文本录入. 末行模式:保存或退出文档,以及设置编辑环境. 表 ...

  3. 后台根据html邮件模板发送邮件

    HTML邮件模板: xxxxxxx 在线模板的方式: String fileName = "http://localhost:8080/xxxxxxx.html"; URL url ...

  4. virsh console 登录CentOS7系统

    一.在kvm虚拟机中执行如下命令 systemctl start serial-getty@ttyS0.service systemctl enable serial-getty@ttyS0.serv ...

  5. Solidity合约中的整数溢出漏洞事件

    事件 2018年4月23日 BEC 一夜被偷64亿 2018年4月25日 SMT 再爆类似漏洞,火币Pro和OKEx相继暂停了SMT交易 2018年4月25日 BEC.SMT现重大漏洞,这8个智能合约 ...

  6. position 的absolute会使display变成inline-block

    position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外), 只要设置了position:absolute. float中任意 ...

  7. BLE——低功耗蓝牙（Bluetooth Low Energy）

    1.简介 以下蓝牙协议特指低功耗蓝牙协议. 蓝牙协议是由SIG制定并维护的通信协议,蓝牙协议栈是蓝牙协议的具体实现. 各厂商都根据蓝牙协议实现了自己的一套函数库——蓝牙协议栈,所以不同厂商的蓝牙协议栈 ...

  8. 行业——5G

    1.  概述 1.1  定义 5G:5th Generation Mobile Networks / 5th Generation Wireless Systems,第5代移动通信技术 1.2  商标 ...

  9. 2019牛客暑期多校训练营（第八场）E：Explorer（LCT裸题 也可用线段树模拟并查集维护连通性）

    题意:给定N,M,然后给出M组信息(u,v,l,r),表示u到v有[l,r]范围的通行证有效.问有多少种通行证可以使得1和N连通. 思路:和bzoj魔法森林有点像,LCT维护最小生成树.  开始和队友 ...

  10. php的快速排序

    <?php     function quicksort($str){         if(count($str)<=1) return $str;//如果个数不大于一,直接返回     ...