在 ES6 中，我们已经学习了模板字面量（Template Literals），它允许我们使用反引号（`）来创建字符串，并且可以在字符串中插入变量。而在 ES12 中，模板字面量得到了进一步的增强和优化，本文将为大家介绍 ES12 中的模板字面量。
新增功能
1. 标签模板字面量
在 ES6 中，我们可以使用模板字面量来创建字符串，如下所示：
const name = 'Tom'; const str = `My name is ${name}.`; console.log(str); // My name is Tom.
在 ES12 中，我们可以使用标签模板字面量（Tagged Template Literals）来对模板字面量进行更加细致的控制。标签模板字面量是指，在模板字面量前面加上一个标签（函数），如下所示：
-- -------------------- ---- ------- -------- ------------ ---------- - --------------------- -- - --- ---- -- -- --- - -------------------- -- - ----- - ------ ------- --------------- - ----- ---- - ------ ----- --- - ------ ---- -- ---------- ----------------- -- ------ ----展开代码
在上面的例子中，我们定义了一个函数 tag 作为模板字面量的标签，函数的第一个参数 strings 是一个数组，它包含了模板字面量中所有的字符串，而后面的参数 values 则是一个数组，它包含了模板字面量中所有插入的变量。在函数中，我们可以对这些参数进行任意的处理，并返回一个新的字符串。
2. 原始模板字面量
在 ES6 中，我们可以使用模板字面量来创建多行字符串，如下所示：
const str = `This is a multiline string.`; console.log(str); // This is // a multiline // string.
在 ES12 中，我们可以使用原始模板字面量（Raw Template Literals）来获取模板字面量中的原始字符串，如下所示：
const str = String.raw`This is\na multiline\nstring.`; console.log(str); // This is\na multiline\nstring.
在上面的例子中，我们使用 String.raw 方法来获取模板字面量中的原始字符串，这样就可以输出转义字符了。
3. 标签模板字面量的返回值
在 ES12 中，标签模板字面量可以返回任意类型的值，而不仅仅是字符串。这意味着我们可以使用标签模板字面量来实现更加复杂的功能，例如自定义模板引擎。
示例代码
下面是一个使用标签模板字面量实现自定义模板引擎的例子：
-- -------------------- ---- ------- -------- --------------- ---------- - --- ---- - --- --- ---- - - -- - - --------------- ---- - ---- -- ----------- -- -- - -------------- - ---- -- ---------- - - ------ ----- - ----- ---- - ------ ----- --- - --- ----- --- - ------------ -------- ----------- ------- ---------- -------- ----------------- -- ----- -- -------- ------- -- ------- ------ -- ------展开代码
在上面的例子中，我们定义了一个 render 函数作为标签模板字面量的标签，函数的作用是将模板字面量中的字符串和变量拼接成 HTML 字符串。在函数中，我们使用了一个循环来遍历字符串和变量，并拼接成一个 HTML 字符串，最后返回这个字符串。
总结
ES12 中的模板字面量增强了我们在字符串处理方面的能力，特别是标签模板字面量可以让我们更加灵活地控制模板字面量的输出，而原始模板字面量则可以让我们更加方便地处理多行字符串。在实际开发中，我们可以根据具体的需求来选择使用不同的模板字面量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663a019dd3423812e4829011
