在 ES6 (ECMAScript 2015) 中，模板字符串 (Template string) 和标记模板 (Tagged template) 是两个非常有用的新特性，它们可以让我们以更加优雅的方式处理字符串和模板的构建与处理。在本文中，我们将详细介绍这两种特性的应用，帮助您更好地理解和运用它们。
模板字符串
模板字符串是一种新的字符串语法，使用反引号 ` 将字符串的内容包裹起来，并使用 ${} 语法来嵌入变量和表达式。例如：
let name = 'Alice';
let age = 30;
console.log(`My name is ${name} and I'm ${age} years old.`);输出：
My name is Alice and I'm 30 years old.
相对于传统的字符串拼接方式，模板字符串提供了更加方便、可读性更好的方式。它们还支持多行字符串，例如：
console.log(`This is a multiline string.`);
输出：
This is a multiline string.
我们可以利用模板字符串的特性进行更加方便的字符串拼接：
let a = 10;
let b = 20;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result);输出：
The sum of 10 and 20 is 30.
模板字符串还支持在字符串中嵌入函数调用、表达式等。例如：
function toUpperCase(str) {
return str.toUpperCase();
}
console.log(`The result is ${toUpperCase('hello')}.`);输出：
The result is HELLO.
总之，模板字符串提供了一种更加方便、简洁、可读性更好的字符串表示方式，值得我们在日常的开发中广泛应用。
标记模板
标记模板是一种高级的特性，它允许我们自定义一些函数来处理使用反引号 ` 包裹起来的字符串。标记模板的形式是一个函数调用，函数的第一参数是一个数组，包含了被反引号 ` 包裹起来的字符串的拆分结果。数组中每个元素表示一个字符串片段，它们在原字符串中的位置被保存在数组下标中。例如：
function myTag(strings, ...values) {
console.log(strings);
console.log(values);
}
let name = 'Alice';
let age = 30;
myTag`My name is ${name} and I'm ${age} years old.`;输出：
-- -------------------- ---- ------- - --- ---- -- -- - --- --- -- - ----- ----- - - -------- -- -
可以看到，函数 myTag 的第一个参数 strings 是一个数组，它包含了反引号 ` 包裹起来的字符串的拆分结果。函数 myTag 的第二个参数 values 是一个数组，包含了反引号 ` 中嵌入的变量和表达式的值。
在标记模板中，我们可以自由地处理这些字符串片段和变量值，从而实现一些有趣的功能。例如，我们可以将字符串片段按照自己的要求进行处理并拼接起来，然后返回一个新的字符串。例如：
-- -------------------- ---- -------
-------- -------------- ---------- -
--- ------ - ---
--- ---- - - -- - - -------------- ---- -
------ -- -----------
------ -- --------- - --
-
------ -- ---------------------- - ---
------ -------
-
--- - - ---
--- - - ---
--- ------ - --------- --- -- ---- --- ---- -- --- - -----
--------------------输出：
The sum of 20 and 40 is 60.
我们可以看到，自定义的 myTag 函数将字符串片段和变量值按照一定的方式进行处理，并返回一个新的字符串。
除了可以自定义处理字符串片段和变量值外，我们还可以将标记模板用在函数调用上，来实现一些有趣的功能。例如，我们可以定义一个名为 css 的标记模板函数，来实现 CSS 样式的快速构建。例如：
-- -------------------- ---- -------
-------- ------------ ---------- -
--- ------ - ---
--- ---- - - -- - - -------------- ---- -
------ -- -----------
------ -- ----------
-
------ -- ---------------------- - ---
------ -------
-
--- ----- - ------
--- -------- - -------
--- ---- - ------- --------
--- ----- - ----
------ ---------
---------- ------------
--
--- --- - ------------------------------
----------------- - ------
------------- - -----
-------------------------------上面的代码定义了一个 css 函数，它将传入的字符串和变量值进行拼接，并返回一个新的字符串。我们利用这个函数来构建一个 CSS 样式，并将样式应用到一个 div 元素上。
这样，我们就可以非常方便地快速构建 CSS 样式，在开发过程中大大提高了效率。
总结
模板字符串和标记模板是 ES6 (ECMAScript 2015) 中非常有用的新特性，它们提供了一种更加方便、灵活、可读性更好的字符串处理方式。我们可以利用这些特性来快速构建字符串、CSS 样式等，从而提高在开发过程中的效率和灵活度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bfb1e48841e98948be92a