在 ES6 中，我们学习到了模板字符串，它允许我们将表达式插入到字符串中，使得字符串更加灵活。而在 ES8 中，我们又新增了一种标签模板的写法，可以用于处理模板字符串，这就是本文介绍的 Tagged Template。
什么是 Tagged Template
一个 Tagged Template 可以被看作是一个函数调用的语法糖，它可以接收一个数组和若干个参数，其中数组中存储了分离了插值部分和纯字符串的模板字符串，而参数则是插入到模板字符串中的表达式的值。比如：
-------- -------------- ---------- - -- -------- -------- -- ---- -- ------- --------- ----------------------- ---------- ------------ -- ------ ----- - - --- ----- - -------- ------------ -----------
可以看到，myTag 函数接收的第一个参数是一个数组 strings，它是模板字符串中没有插值的部分，将模板字符串分为了多段。第二个参数则是一个 rest 参数 values，它存储了模板字符串中的插值表达式的值，按照顺序排列。需要注意的是，rest 参数 values 的个数会比插值表达式的个数多一个，因为字符串的个数比表达式的个数多1。
通过 Tagged Template，我们可以对模板字符串和插入表达式的各部分进行处理，从而满足各种使用场景的需求。
Tagged Template 的应用
字符串格式化
Tagged Template 可以用于更好地格式化字符串。比如，我们可以用一个 toDollar 函数将输入的数字转换为货币格式：
-------- ----------------- ---------- -
--- --- - ---
--- ---- - - -- - - --------------- ---- -
--- -- -----------
-- -- - -------------- -
--- -- ---------------------------
-
-
------ ----
-
--- ----- - ------
------------------------ ----- -- ------------
-- ------ ----- -- -------上面的 toDollar 函数接收模板字符串的分离数组和插值表达式的值。在处理模板字符串时，toDollar 函数会将插值表达式的值变成适当的货币格式，并将其合并到字符串中。
标记模板的默认值
Tagged Template 还可以指定一个默认的 tag function。在只传入模板字符串时，就会调用这个默认的 tag function。比如下面的代码中，当没有传入标记函数实现 toUpper 时，则使用默认的标记函数进行处理：
-------- ---------------- ---------- -
--- --- - ---
--- ---- - - -- - - --------------- ---- -
--- -- -----------
-- -- - -------------- -
--- -- ------------------------
-
-
------ ----
-
--- -------------- - ----------- -- ----- ---------- -----------
--- ---- - -------
------------------------------------- -- ----上面的代码中，toUpperDefault 函数使用原生的 String.raw 函数作为默认的标记函数，在字符串中插入的字符串会原样输出，并不会被处理。
模板字符串的本地化处理
Tagged Template 还可以用于将模板字符串的本地化处理。如果我们要将一个字符串翻译成多个语言，只需要写一个 tag function 并在不同的语言中对其进行翻译即可。比如下面的代码中，我们定义了一个 translate 函数，它接收一个 strings 和一个键值对的 arguments 对象，其中 arguments 存储了不同语言的翻译：
-------- ------------------ ---------- -
------ -------------------- ---- -- -- -
--- ----- - --------- -- ---
------ --- - --- - ------
-- ----
-
--- ---- - --------
--- -------- - -
-------- -
------ --------
----- --------
---- ------
--
-------- -
------ -----
----- -----
---- -----
-
-
--- ----- - ----- ----- -- --------------------------------- ---------
-------------------------- - ----- ------ ---- -- --- - ----- ---- -
------------------------ - ----- ------ ---- -- --- - ----- ---- -在上面的代码中，我们使用了 translate 函数将模板字符串进行了翻译。在模板字符串中，我们使用了 ${messages[lang][key]} 来获取翻译的结果，而名为 args 的参数则会在翻译结果中被插入。
总结
Tagged Template 是 ES8 中的一个新特性，它可以用于更好地处理模板字符串和插值表达式，从而满足不同的需求。本文介绍了 Tagged Template 的基本使用方式，并通过几个实例展示了它的实际应用。希望读者能通过本文的介绍，更好地理解和掌握 Tagged Template 的使用方法，从而在实际工作和学习中更加得心应手。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653643d17d4982a6ebe4063d