模板字面量（Template Literals）

ECMAScript 6引入了模板字面量，对字符串的操作进行了增强方式：

• 多行字符串

真正的多行字符串。

• 字符串占位符

可以将变量或JavaScript表达式嵌入到占位符中并将其作为字符串的一部分输出到结果中。

多行字符串

模板字面量的基础语法就是用反引号（`）来替换字符串的单、双引号，例如：

let message = `Hello World`;

这句代码使用模板字面量语法创建了一个字符串，并赋值给message变量，这时变量的值与一个普通的字符串并无差异。

如果想要在字符串中使用反引号，那么用反斜杠（\）将它转义即可，如下所示：

let message = `Hello\` World`;

在模本字面量中，不需要转义单、双引号。

在ECMAScript 5中，如果一个字符串字面量要分为多行书写，那么可以采用两种方式来实现：在一行结尾的时候添加斜杠（\）表示承接下一行的代码，或者使用加号（+）来拼接字符串，如下所示：

let message = "Hello \

World";

let greeting = "Welcome"

+ " you";

console.log(message);

console.log(greeting);

这两种实现方式，前者是利用JavaScript的语法bug来实现，后者是利用字符串的拼接操作来实现。当把字符串message和greeting打印到控制台时，这两个字符串均未进行显示，前者使用反斜杠（\）只是代表行的延续，并未真正插入新的一行。如果要输出新的一行，需要手动加入换行符，如下所示：

let message = "Hello \n\

World";

let greeting = "Welcome"

+ "\n"

+ " you";

console.log(message);

console.log(greeting);

在ECMAScript 6中，使用模板字面量语法，可以很方便地实现多行字符串的创建。如果需要在字符串中添加新的一行，只需要在代码中直接换行即可，如下所示：

let message = `Hello

World`;

console.log(message);

输出结果如下：

Hello

World

要注意：在反引号中的所有空白字符（包括但不限于空格、换行、制表符）都属于字符串的一部分。

字符串占位符

在一个模板字面量中，可以将JavaScript变量或者任何合法的JavaScript表达式嵌入到占位符中并将其作为字符串的一部分输出到结果中。

占位符由一个左侧的 ${ 和右侧的 } 符号组成，中间可以包含变量或JavaScript表达，例如：

let name = "zhangsan";

let message =`Hello, ${name}`;

console.log(message);

let amount = 5;

let price = 86.5;

let total = `The total price is ${price * amount}`;

console.log(total);

模板字面量本身也是JavaScript表达式，因此也可以在一个模板字面量中嵌入另一个模板字面量，如下所示：

let name = "lisi";

let message = `Hello, ${

`my name is ${name}`

}.`;

console.log(message); //输出：Hello, my name is lisi.