在 JavaScript 中，字符串是一种非常常用的数据类型。而在 ES6 中，新增了一种字符串模板的语法：模板字面量（Template Literal）。模板字面量不仅可以更方便地拼接字符串，还可以支持变量的插入、多行文本的输出等功能。在本文中，我们将深入探讨模板字面量的应用与技巧，帮助读者更好地掌握这一语法。
基本用法
模板字面量是以反引号（`）包裹的字符串，示例如下：
----- --- - ------- --------
与普通字符串不同的是，模板字面量可以在字符串中插入变量，使用 ${} 来引用变量。示例如下：
----- ---- - ------ ----- --- - ------- ---------- ----------------- -- --------- ----
在上面的示例中，我们使用 ${} 将变量 name 插入到了字符串中。需要注意的是，${} 中可以放置任何 JavaScript 表达式，例如：
----- - - --- ----- - - --- ----- --- - -- - - - --- - ---- ----------------- -- ---- - - - --
多行文本输出
在传统的 JavaScript 中，如果要输出多行文本，需要使用特殊符号（例如 \n）来表示换行。而在模板字面量中，我们可以直接输入多行文本，示例如下：
----- --- - - ------ ------ -- ----------------- -- --- -- ------ -- ------
需要注意的是，模板字面量中的多行文本会保留缩进，如果不需要缩进，可以使用 {} 包裹文本，示例如下：
----- --- - -
--
----------------
-
--
----------------- -- ---
-- ------
-- ------标签模板
除了普通的模板字面量之外，ES6 还提供了一种更高级的语法：标签模板（Tagged Template）。标签模板可以在模板字面量前添加一个标签函数，通过这个函数对模板字面量进行处理。示例如下：
-------- -------------- ---------- -
--- ------ - ---
--- ---- - - -- - - --------------- ---- -
------ -- -----------
-- -- - -------------- -
------ -- ------------------------
-
-
------ -------
-
----- ---- - ------
----- --- - ------------ ----------
----------------- -- --------- ----在上面的示例中，我们定义了一个标签函数 upper，它将模板字面量中的变量转换为大写字母。在调用 upper 函数时，模板字面量会被拆分为一个字符串数组和一个变量数组，分别作为 strings 和 values 参数传入函数中。在函数中，我们遍历 strings 数组和 values 数组，将它们拼接成一个新的字符串并进行处理。
需要注意的是，标签函数可以接收任意数量的参数，并且可以返回任意类型的值。这使得标签模板非常灵活，可以用于各种场景，例如自定义模板引擎、国际化处理等。
应用与技巧
1. 拼接 HTML 字符串
在传统的 JavaScript 中，拼接 HTML 字符串是一件非常繁琐的事情，需要使用大量的字符串拼接和转义符号。而在模板字面量中，我们可以直接拼接 HTML 标签，使代码更加简洁易读。示例如下：
----- ---- - ------
----- ---- - -
---- -------------
----- ---------------------------
------
--在上面的示例中，我们使用模板字面量拼接了一个包含用户名的 HTML 片段。需要注意的是，为了防止 XSS 攻击，我们应该对插入到 HTML 中的变量进行转义，例如：
-------- --------------- -
------ ----------------------- ------- -- -
------ ------- -
---- ----
------ --------
---- ----
------ -------
---- ----
------ -------
---- ----
------ ---------
---- ----
------ --------
-
---
-
----- ---- - ---------------------------------
----- ---- - -
---- -------------
----- ---------------------------------------
------
--在上面的示例中，我们定义了一个 escapeHtml 函数，用于将特殊字符转义为 HTML 实体。在拼接 HTML 字符串时，我们将变量 name 传入 escapeHtml 函数进行转义，以避免 XSS 攻击。
2. 定义多语言文本
在国际化处理中，我们通常需要根据用户的语言环境输出不同的文本。使用模板字面量可以很方便地定义多语言文本，示例如下：
----- -------- - -
--- -
------ ------- --------
--
--- -
------ ---------
--
--
----- -------- - -----
----- ------- - -------------------------
--------------------- -- ---------在上面的示例中，我们定义了一个 messages 对象，其中包含了两种语言的文本。根据用户的语言环境，我们可以选择合适的语言输出文本。使用模板字面量，我们可以更方便地定义多语言文本，而且可以避免繁琐的字符串拼接。
3. 声明多行字符串
在 JavaScript 中，声明多行字符串是一件非常繁琐的事情，需要使用特殊符号（例如 \n）来表示换行。而在模板字面量中，我们可以直接输入多行文本，使代码更加简洁易读。示例如下：
----- --- - - ----- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- --
在上面的示例中，我们使用模板字面量声明了一个多行字符串。需要注意的是，模板字面量中的多行文本会保留缩进，如果不需要缩进，可以使用 {} 包裹文本。
总结
模板字面量是 ES6 中新增的一种字符串模板语法，它可以更方便地拼接字符串、支持变量的插入、多行文本的输出等功能。除了普通的模板字面量之外，ES6 还提供了一种更高级的语法：标签模板。标签模板可以在模板字面量前添加一个标签函数，通过这个函数对模板字面量进行处理。在实际开发中，我们可以使用模板字面量拼接 HTML 字符串、定义多语言文本、声明多行字符串等，使代码更加简洁易读。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6509043995b1f8cacd3ce5c0