在前端开发中，我们经常需要拼接字符串。在 ES6 之前，我们使用字符串拼接或者字符串模板来实现。ES6 中引入了模板字符串，让字符串的拼接更加简单和可读性更高。而在 ES8 中，另一种字符串替代方案也被引入——tagged template literals。
什么是 tagged template literals？
tagged template literals 是一种新的字符串替代方案，它使用一个函数（tag function）来处理字符串模板。在这个函数中，我们可以对字符串进行任意操作，并返回处理后的字符串。
tagged template literals 的语法如下所示：
tag`string text ${expression} string text`其中 tag 是一个函数，后面紧跟的是用反引号括起来的字符串模板。字符串模板中可以包含普通字符串和占位符（${expression}），占位符中的表达式会被求值后转换为字符串。
当 template literals 被解析成字符串后，会被传递给 tag function，作为它的参数。tag function 可以对字符串进行任意处理，并返回处理后的字符串。
tagged template literals 的用途
tagged template literals 可以用于各种字符串处理场景，如国际化、模板渲染、代码生成等。
国际化
在国际化中，我们常常需要将字符串翻译成多种语言。使用 tagged template literals 可以轻松实现这一功能。
我们可以定义一个翻译函数（如下所示），它将当前语言下的文本替换成对应翻译。
-- -------------------- ---- -------
----- -- - - ------ -------- ----- ------ --
----- -- - - ------ ----- ----- ---- --
-------- ------------------ --------------- -
--- ------ - ---
--- ---- - - -- - - ------------------- ---- -
------ -- -----------
------ -- ---------------
-
------ -- ---------------------- - ---
-- -----
------ - ----------------------- ------------------------- ---------
------ -------
-
----- -------- - --------
----- ---- - --------
----- ------- - ---------------------- ----------
--------------------- -- ---------- -------模板渲染
我们可以使用 tagged template literals 实现一个简单的模板引擎，来将数据渲染到 HTML 模板中。
-- -------------------- ---- -------
----- ---- - - ----- -------- ---- -- --
-------- --------------- --------------- -
--- ------ - ---
--- ---- - - -- - - ------------------- ---- -
------ -- -----------
------ -- ---------------
-
------ -- ---------------------- - ---
-- ---------
----------------------------- -- -
----- -- - --- ---------------------------- -----
------ - ------------------ -----------
---
------ -------
-
----- -------- - -
-----
-----------------
------- -----------
------
--
----- ---- - -----------------
------------------
-- ---
-- -----
-- --------------
-- ------- ------
-- ------代码生成
我们可以使用 tagged template literals 生成代码，如下所示。
-- -------------------- ---- -------
-------- --------------------- --------------- -
--- ------ - ---
--- ---- - - -- - - ------------------- ---- -
------ -- -----------
------ -- ---------------
-
------ -- ---------------------- - ---
-- ----
----- ---- - -
----------- -
---------
------ ------------------
----
--
------ -----
-
----- - - --
----- - - --
----- ---- - ----------------- - ------
------------------------ -- -- -总结
tagged template literals 是一种强大的字符串替代方案，它可以用于各种字符串处理场景，如国际化、模板渲染、代码生成等。tagged template literals 将字符串模板和函数绑定在一起，让我们可以对字符串进行任意操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653203c07d4982a6eb4263d2