在前端开发中，我们经常需要动态生成字符串，例如拼接API请求地址、构建HTML模板、生成日志等等。而在ES6中，引入了模板字符串（Template literals）的语法，可以方便快捷地拼接字符串。ES2021引入了新的特性，提供了更多的最佳实践，让我们更好地处理模板字符串。
模板字符串的基本用法
首先来看一下，模板字符串的基本用法。使用反引号（`）包裹字符串，可以在其中使用${}来插入变量或表达式。例如：
const name = 'Alice';
console.log(`Hello, ${name}!`);输出结果为：
Hello, Alice!
这里，使用了${}来插入变量name。
多行模板字符串
模板字符串还有一个很实用的特性，就是可以轻松地处理多行字符串。例如，构建一个HTML模板，就需要处理多行字符串。使用传统的字符串拼接方式，需要添加大量的\n，让代码难以阅读和维护。而使用模板字符串，可以自然地写出多行字符串，代码也更加简洁。
const html = `
<div class="card">
<img src="${imageUrl}" alt="${title}">
<h3>${title}</h3>
<p>${description}</p>
<a href="${url}" class="btn">Read More</a>
</div>
`;这里，使用了反引号包裹HTML模板，代码简洁易读。使用模板字符串，还可以轻松地在字符串中使用单引号或双引号，而不需要转义。
标签模板
标签模板（Tagged template）是使用模板字符串的一种高级用法。可以自定义一个函数，在函数中对模板字符串进行处理。例如，对模板字符串进行国际化处理。
-- -------------------- ---- -------
-------- ------------- ---------- -
----- ---- - -
--- -
------- ------ ------- -----
--
--- -
------- ------ ---------
-
--
----- --- - -----------
----- ----------- - -----------------------
------ -------------------------- -----------
-
----- ---- - --------
----- ----------- - -----
----------------------- -----------这里，定义了一个i18n函数，接受模板字符串和变量。i18n函数会根据当前语言，返回处理后的字符串。使用时，可以像使用模板字符串一样，对字符串进行处理。对于多语言网站，这种方式可以方便地进行国际化处理。
嵌入其他操作符
使用模板字符串时，可以直接嵌入其他操作符。例如，可以在${}中进行三元运算符、函数调用等操作，将会返回对应的结果。
const x = 10;
console.log(`x = ${x}`);
console.log(`x + 5 = ${x + 5}`);
console.log(`x > 5 ? 'Yes' : 'No' = ${x > 5 ? 'Yes' : 'No'}`);
console.log(`Today is ${new Date().toLocaleDateString()}`);这里，直接嵌入了一个三元运算符、计算表达式、函数调用等，返回了对应的结果。但是注意，在模板字符串中不要使用太多的复杂表达式，会影响代码的可读性。
模板标签缓存
最后，我们介绍一下最新的ES2021引入的特性：模板标签缓存。对于某些需要频繁生成的字符串，使用模板标签缓存可以提高代码的性能。使用标签缓存后，解析模板字符串时只需要执行一次，后续生成字符串时直接从缓存中读取，避免了重复计算。
-- -------------------- ---- -------
-------- ---------------------- --------- ------------ ---- -
----- -------- - ---------------------- --------- ------------ ------
----- ----- - --------------------- - --------------------- -- ---
-- ----------------- -
------ ----------------
-
----- -------- - -
---- -------------
---- ----------------- ---------------
-----------------
---------------------
-- ------------- ---------------- --------
------
--
--------------- - ---------
------ ---------
-
----- ----- - ------ -------
----- -------- - -------------------------------
----- ----------- - ------ ----- ----- --- ----- ----------- ---------- -------
----- --- - ----
---------------------------------- --------- ------------ ------
---------------------------------- --------- ------------ ------这里，定义了一个函数getCardTemplate，接受四个参数。函数会根据四个参数生成一个唯一的缓存键，检查缓存中是否存在对应的模板字符串。如果存在，直接返回；否则，生成模板字符串，并存入缓存中。调用时，可以看到第一次生成时，函数执行了一次，第二次调用直接从缓存中读取，没有执行函数。
总结：
- 模板字符串是ES6引入的特性，可以方便快捷地拼接字符串。
- 模板字符串具有处理多行字符串、嵌入操作符、标签模板等高级特性，使用时需要注意最佳实践。
- 模板标签缓存是ES2021引入的新特性，可以提高代码性能。
希望本文可以帮助大家更好地处理模板字符串，让代码更加简洁明了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64786c7e968c7c53b04ac3ec