ES10 之 tagged template literals 在模板中加入编程逻辑
在现代 Web 开发中，前端技术一直处于快速发展的状态，而 ECMAScript（简称 ES）是 JavaScript 语言的标准化版本，也是前端开发所必须掌握的技术之一。在 ES10 中，tagged template literals（标记模板字面量）的出现向我们带来了一种在模板中加入编程逻辑的能力。
一、什么是 tagged template literals
在 ES6 中，我们已经学习过模板字面量的使用，例如：
const name = 'Alice';
console.log(`Hello, ${name}!`);输出结果为：Hello, Alice!。可以看到，字符串后面的`符号是 Backtick，它的作用是定义多行字符串，加入 ${expression} 能够插入表达式。
而 tagged template literals 则是在字符串前添加函数名进行调用，这种调用方式可以让我们对模板中的值进行加工或自定义处理。比如：
-- -------------------- ---- -------
-------- ------------------ ---------- -
------ -------------------- ------ -- -
------ ------ - -------------- - --------------------------- - ----
------------
-
----- ---- - --------
---------------------------- --- -----------
输出结果为：Hello, i'm ALICE.。
代码解释：在 上面加上函数名 upperCase，那么字符串就会成为这个函数的第一个参数 strings，...values 则是一个包含模板字面量中所有表达式的数组，我们可以通过模板字面量的格式找到数组中的值（即${name}`），进行修改或定制。
二、tagged template literals 的应用
tagged template literals 在实际前端开发中有非常广泛的应用场景，以下是一些常用的应用场景。
1. SQL 查询拼接
举个例子，假设我们需要在 Web 应用程序中执行 SQL 查询语句，通常我们需要拼接 SQL 语句的字符串，如下所示：
const userId = 1;
const table = 'user';
const sql = `SELECT * FROM ${table} WHERE id=${userId}`;
console.log(sql);输出结果为：SELECT * FROM user WHERE id=1。
但是，使用此方法会带来一定的风险和不安全性，如果用户输入的字符串非法，很容易导致 SQL 注入攻击等安全问题。在这种情况下，我们可以使用 tagged template literals 来保护我们的应用程序。
-- -------------------- ---- -------
-------- ------------ ---------- -
----- --------- - ---
---------------------- ------ -- -
------------------------------ -------
---
------------------------------------- - ----
------ -------------------
-
----- ------ - --
----- ----- - -------
----- -------- - ---------- - ---- -------- ----- --------------
----------------------
输出结果与上面的例子相同。但是，通过使用 SQL 函数，我们可以确保客户端提供的字符串始终作为值处理，而不是作为 SQL 命令的部分。
2. 样式处理
在 Web 应用程序中，很多时候我们需要修改或添加层叠样式（CSS）以创建视觉效果。通常，这些样式定义在单独的 CSS 文件中，然后在 HTML 或 JavaScript 中引用。但是，使用 tagged template literals，我们可以在代码中直接添加 CSS 样式并动态生成样式表。
例如，下面是一个使用 tagged template literals 动态生成样式表的例子：
-- -------------------- ---- -------
-------- -------------- ---------- -
--- ------ - ---
---------------------- ------ -- -
------ -- -------------- - ------ -- ----
---
------ ------ - ---------------------- - ---
-
----- ----- - ------
--------------------------------------------- -
-------
-- -
------ --------------
-
- -
------ -------------------
---------- ---------------
-
--------
---
代码解释：style 函数将 tagged template literals 也就是输入的模板字符串变成有效的 CSS 样式，并返回。我们将这个函数应用到了动态生成的样式表中。
3. 多语言支持
当 Web 应用程序需要支持多语言时，我们可能需要使用中心化文本资源管理和多语言翻译机制。我们通常会将文本资源存储在数据库或其他资源文件中，并在应用程序中引用这些文本资源。但是，我们也可以使用 tagged template literals 直接使用带有变量的文本字符串。
例如，下面是一个使用 tagged template literals 支持多语言的示例。
-- -------------------- ---- -------
----- ------------ - -
--- -
------ ------- ---------
-------- -------- -- --------
--
--- -
------ -------------
-------- -------------
-
--
-------- ------------------ ---------- -
----- --- - ------------------
----- -------- - -----
------ ------------------------------------------------- --- -- -- -----------
-
----- ---- - --------
----- --- - --- -----
------------------------------------- -- ----------- ------
-------------------------------------- -- ------------ -- -- ----代码解释：在 translate 函数中，我们根据传入的 strings 数组来得到多语言文本资源的键。通过字符串替换机制，我们可以把 values 中的变量替换到多语言文本资源中的对应变量。这里简单起见，我们只使用了默认的多语言资源类型，在实际应用中可能需要更复杂的逻辑。
三、总结
tagged template literals 是 ES10 提供的一种新特性，它有助于我们在字符串中加入编程逻辑或自定义处理。在实际应用中，我们可以通过这种方式处理 SQL 查询，在样式处理中使用，或者用于动态多语言支持。通过学习这种技术，可以让我们更加高效和灵活地处理数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7c4e848841e98944592ee