模板字符串(Template String)

语法

模板字符串(Template String)是增强版的字符串，用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

用法

// 普通字符串
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?

上面代码中，模板字符串都是用反引号表示，如果在模板字符串中需要使用反引号，则前面需要用反斜杠转义。

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

如果使用模板字符串表示多行字符串，则所有的空格、缩进和换行都会被保留在输出中。

$('#list').html( <ul> <li>first</li> <li>second</li> </ul> );

上面代码中，所有模板字符串的空格和换行都是被保留的，比如

标签前面会有一个换行。如果想把行首和行尾的换行、空格等去掉，则使用trim方法即可。

$('#list').html( <ul> <li>first</li> <li>second</li> </ul> .trim());

模板字符串中嵌入变量，要将变量名写在${}之中。大括号内可以放入任意的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 func() {
return 'Hello';
}

${func()} World;
// "Hello World"

如果大括号中的值不是字符串，则将按照一般的规则转换为字符串。如，若大括号中是一个对象，则将默认调用对象的toString方法，把对象转换为字符串。

如果模板字符串中的变量没有声明，则会报错。

// 变量place没有声明
var msg = Hello, ${place};
// ReferenceError: place is not defined

模板字符串之间还可以进行嵌套。

var tmpl = addrs => <table> ${addrs.map(addr =>
${addr.first}
${addr.last}
).join('')} </table> ;

tmpl([{first:'a', last: 'b'}]);

// output:
/*"





a

b


"*/

如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。

// 写法一
var str = 'return ' + 'Hello ${name}!';
var func = new Function('name', str);
func('Amy'); // "Hello Amy!"

// 写法二
var str = '(name) => Hello ${name}!';
var func = eval.call(null, str);
func('Amy'); // "Hello Amy!"

标签模板

模板字符串的功能，不仅是上面那些，它还可以紧跟在一个函数后面，该函数将被调用来处理这个模板字符串，这种称为“标签模板”功能(Tagged template)。

标签模板函数第一个参数是字符串模板的常量数组，后面的每一个参数为表达式的计算结果，函数名称可以任意指定。下面是一个例子：

var a = 5, b = 10;

function tag(strings, ...values) {
console.log(strings[0]); // "Hello "
console.log(strings[1]); // " world"
console.log(strings[2]); // ""
console.log(values[0]); // 15
console.log(values[1]); // 50

return "Anything";
}

tagHello ${a + b} world ${a * b};
// Anything
alert123
// 等同于
alert(123)

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

var a = 1,
b = 2;

tagHelo ${a + b} world ${a * b};

上面代码中，模板字符串前面有一个标识名tag，它是一个函数。