前言
JavaScript 是一门迅速发展的语言，每年都会推出新的版本，带来更多的特性和语法糖，方便了我们的开发。ES11（也称为 ECMAScript 2020）是 JavaScript 的最新版本，其中最令人兴奋的新功能之一是模板字面量增强。
本文将介绍新特性模板字面量增强中的可变表达式和标签函数，并给出详细的用例与指导意义。
可变表达式
在 ES11 中，我们现在可以在模板文本中使用可变表达式。可变表达式允许我们动态地注入值到模板文本中。
语法
在模板文本中，可变表达式使用 ${expression} 格式进行表示，其中 expression 为任意有效的表达式。
`Hello ${name}!`例子
const name = 'World';
console.log(`Hello ${name}!`);
// output: "Hello World!"在上面的例子中，变量 name 被注入到了模板文本中，并在输出时被解析为 "World"。
嵌套可变表达式
我们还可以在可变表达式中嵌套其他可变表达式，从而实现更复杂的表达式。
const firstName = 'Tom';
const lastName = 'Hanks';
console.log(`Hello ${firstName.toUpperCase()} ${lastName.toUpperCase()}!`);
// output: "Hello TOM HANKS!"标签函数
我们也可以使用标签函数（Tagged Template）在模板字面量上执行自定义操作。标签函数允许对模板文本进行处理，并在运行时将其转换成其他格式或注入自定义逻辑。
语法
标签函数是默认函数的一种扩展，它遵循以下语法：
tagFunction`template literal`
其中，tagFunction 是在模板字面量之前指定的标签函数名。
例子
-- -------------------- ---- ------- -------- ---------------------- ---------- - --------------------- -------------------- - ----- ---- - ------- ----- --- - --- ---------------- ---- -- ------- --- --- ------ ----- ------
在上面的例子中，标签函数 myTagFunction 接收到两个参数：一个字符串数组含有模板字面量的文本和一个包含可变表达式的值的数组。这个特殊的语法称为剩余参数运算符。
标签函数 myTagFunction 输出以下内容：
["My name is ", " and I'm ", " years old."] ["John", 30]
搭配可变表达式使用
标签函数通常与可变表达式一起使用，以完成一些特定任务。
-- -------------------- ---- -------
-------- ---------------------- ---------- -
--- ------ - ---
--- ---- - - -- - - --------------- ---- -
-- -- - -- -
------ -- -------- - -----------------
-
------ -- -----------
-
------ -------
-
----- --------- - ------
----- -------- - --------
---------------------------- ---- -- ------------ ---------------
-- ------- --- ---- -- --- -------在上面的例子中，标签函数 myTagFunction 将模板字面量文本转换为一个字符串，该字符串将第一个可变表达式中的名字转换为大写，并将其与模板文本的其余部分连接在一起。
结论
ES11 的模板字面量增强是 JavaScript 开发中一个非常方便的新特性。使用可变表达式和标签函数，我们能更轻松地构造模板文本，并在其中动态注入值或对其进行处理。
在日常开发中，我们可以考虑使用模板字面量增强来优化代码，提高生产效率。尤其是在构造 HTML 和 CSS 代码的场景下，这种技术将非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f11daf6fbf96019736b375