ES9 中新增的扩展 literals 语法的使用技巧
前端开发者们一直都在寻找新技巧，以使他们的代码变得更加聪明和高效。在 ES9 中新增的 literals 扩展语法就是一个这样的技巧，它可以用来更加简洁地写出字符串模板，从而提高代码的可读性和可维护性。
literals 扩展语法就是在模板字符串前面添加一个 tag 函数。这个 tag 函数的作用是对模板字符串进行处理，然后返回处理后的结果。现在，我们来看一下 literals 扩展语法的一些使用技巧，以及如何在你的项目中使用它。
标记模板字面量
标记模板字面量是 literals 扩展语法的最基本用法。通过在字符串模板前面添加一个函数，我们可以在字符串模板中使用任何 JavaScript 表达式，并在函数内部对其进行处理。例如：
-- -------------------- ---- -------
-------- -------------- ---------- -
--- ------ - ---
--- ---- - - -- - - --------------- ---- -
------ -- -----------
-- -- - -------------- -
------ -- ------------------------
-
-
------ -------
-
----- ---- - ------
----- --- - ---
----- --- - -------- ---- -- ------- --- - -- ------ ----- ------
----------------- -- -- ---- -- --- --- - -- -- ----- ----在上面的代码中，我们定义了一个标记函数 upper，该函数将所有字符串转换为大写，并将所有表达式的值插入到字符串中。然后，我们在字符串模板中使用表达式${name}和${age}，函数 upper 会将这些表达式的值转化为字符串，并将它们替换到字符串模板中。
使用 literals 扩展语法，我们可以用更加紧凑的代码来写出类似的功能，而且代码可读性更好。
嵌套标记模板字面量
标记模板字面量不只是用于直接处理模板字符串。在某些情况下，你可能需要在嵌套模板字符串中运行一个标记函数。为了实现这一点，你需要对标记函数应用两次。第一次应用是在内部字符串模板，第二次应用则是在外部字符串模板。例如：
-- -------------------- ---- -------
-------- -------------- ---------- -
--- ------ - ---
--- ---- - - -- - - --------------- ---- -
------ -- -----------
-- -- - -------------- -
------ -- ------------------------
-
-
------ -------
-
-------- ------------- ---------- -
--- ------ - ---
--- ---- - - -- - - --------------- ---- -
------ -- -----------
-- -- - -------------- -
------ -- --------------------------------
-
-
------ -------
-
----- --- - -------- ---- -- ------------ --- - -- -------------- ----- ------
----------------- -- -- ---- -- -------------------- --- - -- ------------------- ----- ----在上面的代码中，我们定义了两个标记函数 upper 和 bold。在函数 upper 中，我们将字符串转换为大写，并使用 <strong> 标签包装表达式的值。在函数 bold 中，我们使用 <strong> 标签包装字符串的剩余部分。然后，我们在嵌套字符串模板中应用这两个标记函数。
这样就可以在标记模板字面量中使用任何标记函数，使你的代码易于阅读和维护。
结论
literals 扩展语法是一种使代码变得更加聪明和高效的技巧。通过标记模板字面量或嵌套标记模板字面量，你可以更加紧凑地编写代码，并提高代码的可读性和可维护性。这些技巧可以很好地应用于你的代码库，并有助于你更好地理解 JavaScript 相关技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674faec5e884a3e30f2fadef