概念：模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。
基本用法：ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。
1、模板字符串是对常规JavaScript字符串的重大改进，不同于在普通字符串中使用单引号或者双引号，模板字符串的声明需要使用反撇号。
因为使用的是反撇号，故可以在模板字符串中随意使用单双引号了，使用时不再需要考虑转义。
2、模板字符串默认支持多行：
在新行中插入的任何字符都是模板字符串中的一部分，使用普通字符串，可以通过以下的方式获得多行字符串：
同样的效果使用模板字符串后：
3、在${}中插入js表达式。当解析到表达式时，表达式会被执行，该处将渲染表达式的值：
a、 如插入日期、数学运算等，测试如下
b、由于模板字符串本身也是JavaScript表达式，我们在模板字符串中还可以嵌套模板字符串
4、模板字符串简洁高效的返回基于html和数据生成的字符串：测试如下
空格得以保留，多个li也按我们的预期被合适的渲染：
5、标记模板
更高级的形式的模板字符串是带标签的模板字符串。标签使可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后，标签函数可以返回处理好的的字符串（或者它可以返回完全不同的东西 , 如下个例子所述）。用于该标签的函数的名称可以被命名为任何名字。
测试如下：
测试中 标记函数的第一个参数是包含字符串值的数组，这里的数组是['that','is a'] ，数组的值是经模板字符串中的${}分隔的‘that’和‘is a’。后续参数分别和模板字符串中的${}相对应。
拓展：默认情况下，JavaScript会把\解析为转义符号，对浏览器来说，以\开头的字符一般具有特殊的含义。比如说\n意味着新行，\u00f1表示ñ等等。如果你不想浏览器执行这种特殊解析，可以使用String.raw来标记模板。
在标记函数的第一个参数中，存在一个特殊的属性raw ，我们可以通过它来访问模板字符串的原始字符串，而不经过特殊字符的替换。
另外，使用String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。
测试如下：
这里添加string.raw后，浏览器没有把 "\n"当成换行字符。
缺点：
1、模板字符串不会自动转义特殊字符，（但是我们可以通过标签模板来解决这个问题）所以为了防止跨脚本攻击，我们还是要小心处理一些敏感数据；
测试如下：
js部分含有\n 特殊符号 换行
浏览器渲染后 发现并没有将\n转义成换行
2、 它不是用来取代其他js模板的，部分原因在于模板字符串不支持循环和条件语句，而这些是其他js模板擅长的。
网友评论