在 ES9 中，带标记的模板字面量是一个比较新的特性，它可以让我们更方便地对模板字面量进行分割、转换和拼接等操作，从而在前端开发中起到极大的便利作用。
什么是带标记的模板字面量
带标记的模板字面量是指在模板字面量（也就是以反引号 `` 包裹的字符串）前添加一个标记函数。这个标记函数会接收模板字面量中的所有文字作为参数，并返回一个新的字符串。
举个例子：
function myTag(strings, ...values) {
console.log(strings); // 输出 ['Hello ','!']
console.log(values); // 输出 ['world']
return 'Hi ' + values[0] + '!';
}
console.log(myTag`Hello ${'world'}!`);
// 输出 Hi world!在这个例子中，我们定义了一个标记函数 myTag，它会将第一个参数（一个数组）拆成两个部分：字符串数组 strings 和其余的参数 values。对于上述例子，strings 则为 ['Hello ','!']，values 则为 ['world']。
然后我们通过调用 myTag 函数时，将要插入的值 world 传递到了该函数的括号中，使得 myTag 函数返回了一个新的字符串，即 Hi world!。
带标记的模板字面量的使用方法
带标记的模板字面量可以用在如下几个场景中：
1. 格式化字符串
通过标记函数，我们可以在输出前对字符串进行一些额外的处理。例如，我们可以定义一个标记函数，将字符串中的大写字母转化为小写，再把转换后的字符串输出：
-- -------------------- ---- -------
-------- -------------- ---------- -
------ --------------------- -------- ------ -- -
-------- --- -- -
------ ----------------------
- ---- -
------ ----------------------------------------------------
-
-- ----
-
----------------------- --------------
-- -- ----- ------在上述代码中，我们定义了一个新的字符串，通过字符串数组 strings 再加上插值 values 的处理，构建了一个新的字符串并输出。
2. 过滤和拼接字符串
我们可以使用标记函数将模板字面量进行完全自定义的拼接和过滤，例如，在一个商品列表中，我们希望只输出价格大于 1000 的商品名称和价格：
-- -------------------- ---- -------
----- -------- - -
------ --------- ------ -----
------ ------- ------ ------
------ ------- ------ ------
------ ---------- ------ ----
--
-------- -------------------- ---------- -
----- ---------------- - ----------------------- -- ------------- - ------
----- ------ - ---
------------------------ -- -- -
--------------------
------------- -
-------------------------------- -- -
--------------------------------
---
-
---
------ ----------------
-
-------- -------------------- -
------ ------------ - - --
-
-------- --------------------- -
------ ------------------------ - - --
-
---------------------------- --- ---- -------- ---- --- ------- ---- ------
---------------- ---------------
---
-- -- ---- --- ---- -------- ---- --- ------- ---- ------
-- ---- -- ------- ---- -- ------- 在上述代码中，我们定义了一个库存商品数组 products，然后定义了两个函数分别用来拼接商品名称和价格，最后使用包裹并标记过滤函数 filterPrice 的模板字面量输出了价格大于 1000 的商品信息。
3. 国际化
带标记的模板字面量还可以帮助我们实现对字符串进行国际化处理。对于不同的语言，我们可以定义不同的字符串替换方法，然后在调用标记函数时传入对应的语言标识即可。
总结
带标记的模板字面量是一个十分强大和灵活的特性，可以让我们大大提高字符串的处理效率和可读性。希望通过本文的学习，读者可以更深入地理解和掌握这个特性，并在实际开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9619af6b2d6eab30e517f