ES6模板字面量

ES6模板字面量是 ES6 引入的一项新特性，它允许程序员使用反引号 ` （backtick）表示字符串，还可以在字符串中内嵌变量，表达式等。

语法

ES6模板字面量的语法格式为：

```javascript `string text \``

可以看到，它只是在普通字符串的外面使用了反引号 ` 将字符串包裹起来。

内嵌变量和表达式

ES6模板字面量最大的特色在于可以内嵌变量和表达式，这样就可以更方便地构建动态字符串。

例如：

```javascript const name = 'John'; const age = 30; const sentence = `My name is ${name} and I'm ${age} years old.; console.log(sentence); // 输出：My name is John and I'm 30 years old. \``

在上面的例子中，我们使用了字符串模板，通过 ${name} 和 ${age} 的方式内嵌了变量 name 和 age，组成了一个包含动态文本的字符串。

同时，ES6模板字面量还支持在模板中使用表达式，例如：

```javascript const a = 10; const b = 20; const result = `The result of ${a} + ${b} is ${a + b}.; console.log(result); // 输出：The result of 10 + 20 is 30. \``

在上面的例子中，我们内嵌了表达式 ${a + b}，计算出了 a 和 b 的和并输出。

多行字符串

在传统的 JavaScript 中，如果要定义多行字符串，我们需要使用两个反斜杠 \ 来表示一行文本的结束，例如：

```javascript const multiLineText = "This is a long text
that spans multiple lines
but it is still a single string."; console.log(multiLineText); // 输出：This is a long text that spans multiple lines but it is still a single string. ```

在 ES6 中，我们可以使用字符串模板来实现多行字符串，例如：

```javascript const multiLineText = `This is a long text that spans multiple lines and it is still a single string.`; console.log(multiLineText); // 输出：This is a long text // that spans multiple lines // and it is still a single string. ```

可以看到，在 ES6 中，我们可以直接在字符串模板中使用多行文本，非常方便。

标签模板

ES6 模板字面量还支持标签模板，即指定一个函数来处理模板字面量，例如：

```javascript function highlight(strings, ...values) { let result = ''; strings.forEach((string, i) => { result += string; if (values[i]) { result += `${values[i]}`; } }); return result; }

const name = 'John'; const age = 30;

const sentence = highlight `My name is ${name} and I'm ${age} years old.`;

console.log(sentence); // 输出：My name is John and I'm 30 years old. ```

在上面的例子中，我们定义了一个 highlight 函数，它的作用是将字符串中的变量用 <mark></mark> 标签包裹起来，从而实现高亮效果。

然后我们使用 highlight 函数处理字符串模板，输出修改后的结果。

总结

ES6 模板字面量是一项非常方便的新特性，它可以让程序员更便捷地构建动态字符串，同时还支持多行字符串和标签模板，非常好用。