4、模板字面量
最后更新于：2022-04-02 06:06:59
模板字面量（Template Literal）是一种能够嵌入表达式的格式化字符串，有别于普通字符串，它使用反引号（`）包裹字符序列，而不是双引号或单引号。模板字面量包含特定形式的占位符（${expression}），由美元符号、大括号以及合法的表达式组成，合法的表达式（expression）可以是变量、算术或函数调用，甚至还可以是模板字面量。在ES6引入模板字面量后，就能避免用若干个加号来实现字符串拼接，而改用更为优雅的语法来替代，下面用新旧两种方式分别来组合字符串。
~~~
var name = "strick",
age = 29, str;
str = "My name is \"" + name + "\". M y age is " + age + "."; //传统拼接方式
str = `My name is "${name}". My age is ${age}.`; //模板字面量方式
~~~
对比上面两条赋值语句可以得出，无论是代码可读性还是简洁性，新方式都要略胜一筹。因为旧方式中的普通字符串是用双引号包裹的，所以字符序列中的双引号要用反斜线（\\）转义。而模板字面量则无需为双引号或单引号转义，但如果出现反引号，那么就得将其转义。
## 一、占位符
**1）表达式**
在占位符内，表达式的计算结果会按照一定的规则转换成字符串，如果计算结果是数字、布尔值、对象或数组等，那么就调它们内置的toString()方法；而如果是null或undefined，那么就用String()函数实现类型转换，具体如下所示。
~~~
`${"abc"}`; //"abc"
`${123}`; //"123"
`${true}`; //"true"
`${null}`; //"null"
`${undefined}`; //"undefined"
`${{ id: 1 }}`; //"[object Object]"
`${[1, 2, 3]}`; //"1,2,3"
~~~
有一点要引起注意，那就是占位符中的变量必须先声明（可以不初始化），否则将抛出未定义的引用错误。下面的school变量就没有预先声明，而直接在模板字面量中使用。
~~~
`I am studying at ${school}.`; //抛出未定义的引用错误
~~~
前面曾提到过占位符中的表达式可以是模板字面量，这让占位符变得非常灵活，可以适应更多的场景，处理更为复杂的问题。例如有这么一个需求，为Chrome浏览器中的CSS属性添加浏览器前缀-webkit-，可以像下面这样编写。
~~~
let attr = "border-radius";
function isChrome() {
return true; //为了简化演示，省略了浏览器嗅探逻辑
}
attr = `${isChrome() ? `-webkit-${attr}` : attr}`;
console.log(attr); //"-webkit-border-radius"
~~~
**2）作用域**
在占位符中的变量，它的作用域和定义模板字面量时所处的位置有关，而不是调用时的位置。以下面代码为例，有3个同名的scope变量，分别定义在全局作用域、outer1()函数和inner()函数中，模板字面量作为一个实参传递给inner()函数，最后在inner()函数中把模板字面量输出到控制台。
~~~
var scope = "global"; //全局变量
function outer1() {
var scope = "outer";
function inner(str) {
var scope = "inner";
console.log(str);
}
inner(`current ${scope}`);
}
outer1(); //"current outer"
~~~
根据前面的作用域规则可知，得到的结果是“current outer”。如果模板字面量所处的作用域中没有该变量，那么就会沿着作用域链向上搜索，直到全局作用域为止。在下面的代码中，注释了outer2()函数中的scope变量，得到的结果为“current global”。
~~~
var scope = "global"; //全局变量
function outer2() {
//var scope = "outer";
function inner(str) {
var scope = "inner";
console.log(str);
}
inner(`current ${scope}`);
}
outer2(); //"current global"
~~~
## 二、多行字符串
在ES6之前，如果要创建多行字符串，那么得像下面这样间接实现。
~~~
let multi1 = "first line \n" +
"second line \n" +
"third line";
let multi2 = "first line \n\
second line \n\
third line";
~~~
第一种是将多段字符串用加号拼接，第二种是在换行之前使用反斜线（\\）。虽然是两种实现方法，但两者都需要添加换行符（\\n）。而在ES6引入了模板字面量后，就能原生支持多行字符串，不需要再用上述权宜之计了。具体如下所示，既不需要加号和反斜线，也不需要换行符，代码言简意赅。
~~~
let multi3 = `first line
second line
third line`;
~~~
注意，模板字面量能识别空白符，像上面代码中的多行字符串，其第二行和第三行的开头都包含了空白符，因此在输出时都会有缩进。
## 三、标签模板
模板字面量虽然强大，但也有它的局限性，例如下面两点：
（1）有可能会遭受XSS（跨站脚本攻击）攻击，因为无法转义HTML中的特殊字符（例如“\<”、“\>”等）。
（2）不能替代模板引擎（例如Mustache、Handlebars等），因为无法在占位符中使用if、while等语句。
**1）调用**
为了解决上述问题，ES6引入了标签模板（Tagged Template）。标签模板并不是模板，而是一种特殊方式的函数调用，如下所示。
~~~
func`
';
${name}
${age}
`; ~~~ 调用func()函数的时候省略了圆括号，函数名后面直接跟模板字面量，这就是标签模板的调用方式。它一般会包含两个参数，第一个是由没有被替换的部分组成的数组，第二个是剩余参数，包含了所有占位符中的计算结果。下面是一个完整的标签模板的示例。 ~~~ function func(literals, ...substitutions) { console.log(literals); //["", "
", "
", raw] console.log(substitutions); //["strick", 29] } var name = "strick", age = 29; func`${name}
${age}
`; ~~~ 注意观察两个参数的输出结果。literals数组包含三个元素和一个特殊的raw属性。三个元素分别是第一个占位符之前的部分，两个占位符之间的部分和第二个占位符后面的部分。剩余参数substitutions由两个占位符中所引用的变量name和age的值组成。 **2）raw属性** 这里重点提一下raw属性，它也是一个数组，包含了literals数组中的三个元素所对应的原始信息，相当于为每个元素调用了一次String对象的raw()方法。注意，String.raw()是一个内置的标签模板，在调用时要用特殊的形式。 下面用一个例子来演示String.raw()的功能，先定义一个包含水平制表符（\\t）的字符串，然后在第一次输出的时候，“\”和“\<\p>”之间会有空格隔开，接着调用String.raw()，再次输出时就能把“\\t”也一并显示。其实要在控制台显示第二条注释需要在“\\t”前加一条反斜线（即“\\\\t”）做转义，这样才能把“\\t”分成两个独立的字符：“\\”和“t”，不再有水平制表符的效果。但此处为了便于理解，省略了反斜线。 ~~~ let html = `
\t
`; console.log(html); //"" html = String.raw`
\t
`; console.log(html); //"\t
" ~~~ ***** > 原文出处： [博客园-ES6躬行记](https://www.cnblogs.com/strick/category/1372951.html) [知乎专栏-ES6躬行记](https://zhuanlan.zhihu.com/pwes6) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。 