在 ES6 中，我们已经熟悉了模板文本 (template literal)。它允许我们使用反引号（ ）来定义字符串字面量，并可以在其中插入表达式使用${}语法来进行引用。在 ES11 中，还引入了一项新功能：模板标记函数 (template tag function)。它可以让我们更加灵活的处理模板文本。
模板标记函数的定义
模板标记函数是一种特殊类型的函数，可以让我们自定义对模板文本的解析和处理方式。当用 ${} 拼接与变量、表达式时，在 ${} 中的内容会被计算并转换成字符串，这样就可以在模板字符串中插入一些变量和表达式的值了。
当使用模板标记函数时，模板字符串就会被当作参数传递给这个函数，我们可以在函数内部自定义解析方式，将模板字符串解析成我们想要的结果，并返回处理过后的值。所以，模板标记函数最后一定要返回一个字符串。
模板标记函数的定义形式如下：
function tagFunction(strings, ...values) {
// 自定义解析模板字符串的处理逻辑
// 返回处理过后的结果
return result;
}其中的 strings 是一个字符串数组，表示模板字符串被分隔成的小块；values 则是插入到模板字符串中的变量和表达式的值组成的数组。
如何使用模板标记函数
我们在使用模板标记函数时，只需要在模板字符串前面加上标记函数即可。标记函数会在模板字符串被解析前执行一遍，然后将解析好的结果返回。以一个简单例子来说明：
-- -------------------- ---- -------
-------- -------------------- ---------- -
--- ------ - ---
--- ---- - - -- - - --------------- ---- -
------ -- -----------
-- -- - -------------- -
------ -- ------------------------
-
-
------ -------
-
----- ---- - -------
----- --- - ---
--------------------------- -------- --- ------ ----- -------
-- ------- ---- ----- --- -- ----- -----在这个例子中，我们定义了一个函数 toUppercase，并将其作为模板字符串的标记函数。标记函数的作用是将传入的字符串和表达式的值连接起来，并将表达式的值转化为大写。所以输出结果就是：I'm JOHN. I'm 20 years old.。
模板标记函数的应用
先看一下一个实际使用案例。 定义一个标记函数来在模板字符串中解析 CSS 样式，并将其应用到一个 HTML 元素上：
-- -------------------- ---- ------- -------- ------------------- -------- - --------------------- - -------- - ----- --------- - -------------------------------------- ----------- ----------------- ---- ------ ------ -------- ----- -------------- ---- -------------
在这个例子中，我们定义了一个名为 applyStyle 的标记函数，并将其应用到了一段 CSS 样式文本上。这个标记函数会接收两个参数：CSS 样式文本和一个 HTML 元素，然后将这段 CSS 样式应用到这个 HTML 元素上。所以最终，这个 HTML 元素的样式就被修改了。
模板标记函数的应用远不止这些。我们可以根据自己的需求，定义出各种处理模板字符串的标记函数，从而实现各种复杂的应用场景。
总结
模板标记函数是 ES11 中的一个新特性，它可以让我们自定义解析模板字符串的方式。通过自定义处理逻辑，我们可以灵活地解析模板字符串，并动态生成文本和代码。在实际开发中，我们可以将其用于各种复杂的应用场景，从而提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f0e8548841e9894ebf9cf