随笔- 194  文章- 79  评论- 716 

  模板字面量(Template Literal)是一种能够嵌入表达式的格式化字符串,有别于普通字符串,它使用反引号(`)包裹字符序列,而不是双引号或单引号。模板字面量包含特定形式的占位符(${expression}),由美元符号、大括号以及合法的表达式组成,合法的表达式(expression)可以是变量、算术或函数调用,甚至还可以是模板字面量。在ES6引入模板字面量后,就能避免用若干个加号来实现字符串拼接,而改用更为优雅的语法来替代,下面用新旧两种方式分别来组合字符串。

var name = "strick",
  age = 29, str;
str = "My name is \"" + name + "\". My 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`<p>${name}</p><p>${age}</p>`;

  调用func()函数的时候省略了圆括号,函数名后面直接跟模板字面量,这就是标签模板的调用方式。它一般会包含两个参数,第一个是由没有被替换的部分组成的数组,第二个是剩余参数,包含了所有占位符中的计算结果。下面是一个完整的标签模板的示例。

function func(literals, ...substitutions) {
  console.log(literals);          //["<p>", "</p><p>", "</p>", raw]
  console.log(substitutions);     //["strick", 29]
}
var name = "strick",
  age = 29;
func`<p>${name}</p><p>${age}</p>`;

  注意观察两个参数的输出结果。literals数组包含三个元素和一个特殊的raw属性。三个元素分别是第一个占位符之前的部分,两个占位符之间的部分和第二个占位符后面的部分。剩余参数substitutions由两个占位符中所引用的变量name和age的值组成。

2)raw属性

  这里重点提一下raw属性,它也是一个数组,包含了literals数组中的三个元素所对应的原始信息,相当于为每个元素调用了一次String对象的raw()方法。注意,String.raw()是一个内置的标签模板,在调用时要用特殊的形式。

  下面用一个例子来演示String.raw()的功能,先定义一个包含水平制表符(\t)的字符串,然后在第一次输出的时候,“<p>”和“</p>”之间会有空格隔开,接着调用String.raw(),再次输出时就能把“\t”也一并显示。其实要在控制台显示第二条注释需要在“\t”前加一条反斜线(即“<p>\\t</p>”)做转义,这样才能把“\t”分成两个独立的字符:“\”和“t”,不再有水平制表符的效果。但此处为了便于理解,省略了反斜线。

let html = `<p>\t</p>`;
console.log(html);        //"<p>     </p>"
html = String.raw`<p>\t</p>`;
console.log(html);        //"<p>\t</p>"

 

 posted on 2019-01-14 09:44 咖啡机(K.F.J) 阅读(...) 评论(...) 编辑 收藏