模板字符串

模板字符串允许嵌入表达式，并且支持多行字符串和字符串插补特性。

语法

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

描述

模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以在通过该函数对模板字符串来进行操作处理。

多行字符串

在新行中插入的任何字符都是模板字符串中的一部分，使用普通字符串，你可以通过以下的方式获得多行字符串：

console.log("string text line 1\n\
string text line 2");
// "string text line 1
// string text line 2"

要获得同样效果的多行字符串，只需使用如下代码：

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

表达式插补

在普通字符串中嵌入表达式，必须使用如下语法：

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

现在通过模板字符串，我们可以使用一种更优雅的方式来表示：

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

带标签的模板字符串

模板字符串的一种更高级的形式称为带标签的模板字符串。它允许您通过标签函数修改模板字符串的输出。标签函数的第一个参数是一个包含了字符串字面值的数组（在本例中分别为“Hello”和“world”）；第二个参数，在第一个参数后的每一个参数，都是已经被处理好的替换表达式（在这里分别为“15”和“50”）。 最后，标签函数返回处理好的字符串。在后面的示例中，标签函数的名称可以为任意的合法标示符。

var a = 5;
var b = 10;

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

  return "Bazinga!";
}

tag`Hello ${ a + b } world ${ a * b}`;
// "Bazinga!"

原始字符串

在标签函数的第一个参数中，存在一个特殊的属性raw ，我们可以通过它来访问模板字符串的原始字符串。

function tag(strings, ...values) {
  console.log(strings.raw[0]); 
  // "string text line 1 \\n string text line 2"
}

tag`string text line 1 \n string text line 2`;

另外，使用String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。

String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"

安全性

由于模板字符串能够访问变量和函数，因此不能由不受信任的用户来构造。

`${console.warn("this is",this)}`; // "this is" Window

let a = 10;
console.warn(`${a+=20}`); // "30"
console.warn(a); // 30

规范

浏览器兼容

See also

• String
• String.raw()
• Lexical grammar
• Template-like strings in ES3 compatible syntax
• "ES6 in Depth: Template strings" on hacks.mozilla.org