在 JavaScript 中，模板字符串的出现让字符串的拼接更加方便和直观。但是如果对模板字符串进行更加复杂的操作时，我们就需要使用 ES8 中提供的模板标签函数 Tagged Templates。
什么是模板标签函数 Tagged Templates
在 JavaScript 中，有一种奇特的语法函数名 + 模板字符串，其中的函数被称为模板标签函数(Tag Function)。这种语法是用于实现 Tagged Templates，其作用是将模板字符串与 JavaScript 表达式一起使用。
使用模板标签函数的方式示例：
function tagFunc(strings, ...values) {
console.log(strings); // ['hello', ', my name is ', '']
console.log(values); // ['world', 'JavaScript']
}
let name = 'world';
let lang = 'JavaScript';
tagFunc`hello, my name is ${name} and I'm learning ${lang}`;在上面的例子中，tagFunc 是模板标签函数，后面的模板字符串中包含两个表达式（${name} 和 ${lang}），其中 ${name} 和 ${lang} 就是模板字符串中的 JavaScript 表达式。当模板标签函数被调用时，它会以字符串数组和表达式参数的方式接收组合后的模板字符串，我们将其分别保存在参数 strings 和 values 中。
实际应用场景
模板标签函数经常用于涉及到模板字符串的高级业务逻辑中，比如拼接多个模板字符串、处理与模板字符串相关的语言、实现模板字符串的缓存等等。
实现模板字符串的高亮
我们可以使用模板标签函数来实现模板字符串的高亮，示例代码如下：
-- -------------------- ---- -------
-------- ------------------ ---------- -
--- --- - ---
------------------------ -- -- -
--- -- ------ - ---------- -- ----
---
------ ------------------------------------------------ -------------------
-
--- ---- - --------- ----------- ---- -
------ ------- --------- --- --- ------- ----- -------
---
----------------------------------------- - -------------------在上面的示例代码中，我们使用 highlight 函数将代码中的占位字符 ${} 包裹起来，实现了代码的高亮效果。本例中的正则表达式是专门针对 ${} 的语法而编写的。
快速缓存计算结果
采用 Tagged Templates 模式可以实现缓存计算结果的功能，示例代码如下：
-- -------------------- ---- -------
-------- ------------- -
--- ----- - --- ------
--- -------- - -------- --------- ---------- -
--- --- - ------- - -----------------------
-- ---------------- -
------------------ ------
------ ---------------
- ---- -
------------------ -------
--- ------ - ------------- -----------
-------------- --------
------ -------
-
--
-------------- - ------
------ ---------
-
--- --- - ---------------- --------- ---------- -
--- --- - --
------------------ -- ---- -- ------------
------ ----------------------
---
------------------- ----- -- --- - - - ----- -- ----- ----- --- ----- -- -
------------------- ----- -- --- - - - ----- -- ----- ---- --- ----- -- -
----------------------- -- --- - ---- ----- -- ------------ -- ---- ----- -- -- -在上面的示例中，我们定义了一个 memoize 函数，它接收一个函数作为参数，返回一个新的函数，在这个函数内部实现了对结果的缓存，从而实现了缓存计算结果的功能。
模板标签函数的参数
模板标签函数 tagFunc 接收到的参数包括两种类型：strings 和 values。
strings
strings 是一个字符串数组，它包含了模板字符串的字面值部分，也就是字符串中没有被表达式替换的部分。在 strings 数组中，相邻的两个字符串被表达式分隔开。第一个字符串放在数组中的第一个位置，最后一个字符串放在数组中的最后一个位置。
values
values 数组中包含了所有表达式的值，与 strings 中的字符串一一对应。每个表达式变量都会转换成一个 values 中的参数，然后通过 ${} 的位置占位符与 strings 中对应的字符串组合成最终的字符串。
总结
Tagged Templates 可以让我们在 JavaScript 中更方便地处理模板字符串，达到更加底层的定制和控制效果。模板标签函数是 JavaScript 中比较高级的函数用法，可以应用于许多实际业务场景。在实际项目中，我们需要对模板标签函数有更加深入的了解和应用，以便更加高效地完成开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65928c05eb4cecbf2d74fc65