ES6 模板字符串

2017-11-09

一、认识反引号

在传统的JavaScript输出模板通常是这样写的。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

以上写法繁琐不方便，ES6引入了模板字符串来解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串是增强版的字符串。用反引号（`）来标识。

二、用法

它可以当做普通字符串使用，也可以用来定义多行字符串，

// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`  // Hello Bob, how are you today?

注意:
1、在模板字符串两端都使用了反引号，而如果在模板字符串中间需要使用反引号，则需要在其前面使用反斜杠转义。

1	var greeting = `\`Yo\` World!`; // `Yo` World!

3、在模板字符串中嵌入变量，需要将变量名写在 ${}中。{} 内可以放入任意的JavaScript·表达式，可以进行运算，已经引用对象属性，模板字符串中还能调用函数。

var x = 1, y = 2;
`${x} + ${y} = ${x + y}`;
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`;
// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
//调用函数
function fn() {
    return 'Hello';
}
`${fn()} World`;
// "Hello World"

4、如果使用模板字符串标识多行字符串，所用的空格缩进都会被保留在输出中。

$("#warning").html(`  
  <h1>Watch out!</h1>  
  <p>Unauthorized hockeying can result in penalties  
  of up to ${maxPenalty} minutes.</p>  
`);

5、如果{}中的值不是字符串，将按照一定规则转成字符串。比如大括号中的是个对象，将默认调用对象的toString方法。

三、标签模板

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签” 指的就是函数，紧跟在后面的模板字符从就是它的参数。

1
2
3

var a = 5;
var b = 10;
tag `hello ${a+b} world ${a*b}`;

上面代码中，模板字符串前面的标识“tag”，它就是个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。

//等同于
function tag（value1, value2）{
	...
}

四、String.raw() 方法

String.raw方法用来充当模板字符串的处理函数，返回一个除表达式和变量会被替换，其它都保持原样的字符串。
String.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。