在 ECMAScript 2019 中，Tagged Template Literals 被引入作为一种新的语法特性。这种语法不仅可以使代码的可读性更好，还可以帮助我们构建更加严谨的字符串插值。
什么是 Tagged Template Literals?
标准的字符串插值方式可能会造成一些问题。例如，当我们需要插入一些有特殊意义的字符（例如反斜杠）时，我们需要使用转义符。而 Tagged Template Literals 提供了另一种方式。
Tagged Template Literals 主要由两部分组成：
- 模板字面量（template literals），这是一个字符串数组，可以包含插值表达式。
- 标签（tag），一个函数，用于处理模板字面量。
标签函数是一个可选项，如果定义了标签函数，则该函数将被调用来处理模板字面量。如果未定义标签函数，则模板字面量将被解释为普通字符串。
下面是一个简单的例子：
-- -------------------- ---- ------- -------- ------------------- ---------- - --------------------- -- ------- -- ---- -------------------- -- -------- -------- ---------- ------ ---------- - --------- - ----------- - ----- ------- - ---------------- --------- -------- ------------- --------------------- -- ------ ------ -------- ----------
在上面的例子中，processTag 函数就是一个标签函数。它将模板字面量字符串数组和插值表达式数组作为参数传递，并返回一个字符串。在这个例子中，它只是简单地将两个数组连接起来，形成一个新的字符串。
如何使用 Tagged Template Literals?
使用 Tagged Template Literals 时，我们首先需要定义标签函数。标签函数接受两个参数：模板字面量的字符串数组和插值表达式的值数组。
下面是另一个例子：
-- -------------------- ---- -------
-------- ------------------ ---------- -
--- ------ - ---
------------------------ -- -- -
------ -- -------
-- ----------- -
------ -- -------- - --------- - ----------
-
---
------ -------
-
----- ---- - -------
----- --- - ---
----- ------- - --------------- -------- --- --- ------ ----- ------
--------------------- -- ------ ------------------ --- --- --------------- ----- -----在上面的例子中，highlight 函数将模板字面量的字符串数组和插值表达式的值数组作为参数传递，并将它们组合在一起。如果值数组中包含一个值，则会将其包装在 <mark> 标签中。最终，该函数返回一个新的字符串。
结论
Tagged Template Literals 已经成为 ECMAScript 2019 的一部分，它们提供了一种新的字符串插值方式。使用 Tagged Template Literals 可以帮助我们编写更具可读性和可维护性的代码。在编写标签函数时，我们可以根据自己的需求来定制处理模板字面量字符串数组和插值表达式值数组的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67060836d91dce0dc85725a5