在 ECMAScript 2019 (ES10) 中，模板字面量是一个重要的新特性。模板字面量是一种用于创建字符串的语法糖，使得字符串的拼接和格式化变得更加简单和直观。本文将介绍模板字面量的语法和用法，并提供一些实用的技巧和示例代码。
模板字面量的语法
模板字面量使用反引号（）作为标记，可以包含任意的文本和表达式。在模板字面量中，可以使用 ${expression}` 的语法来插入表达式的值。例如：
const name = 'Alice';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message); // 输出：My name is Alice and I'm 30 years old.在上面的例子中，我们使用了模板字面量来创建一个包含变量值的字符串。${expression} 的语法可以嵌套使用，也可以在任意文本的中间使用。例如：
const a = 1;
const b = 2;
const c = 3;
const result = `${a} + ${b} = ${a + b}, ${c} * (${a} + ${b}) = ${c * (a + b)}.`;
console.log(result); // 输出：1 + 2 = 3, 3 * (1 + 2) = 9.模板字面量的新特性
在 ECMAScript 2019 中，模板字面量引入了一些新的特性，使得字符串的处理变得更加灵活和方便。
标签函数
模板字面量可以使用标签函数来处理字符串。标签函数是一个函数，它可以接受模板字面量的参数，并返回处理后的字符串。例如：
-- -------------------- ---- ------- -------- ---------------------- ---------- - --------------------- -- ---- ------- -- --- - -------------------- -- ---- ------- - ------ ---- --------------- - ----- ---- - -------- ----- ------- - -------------------- ---------- --------------------- -- ------ ------
在上面的例子中，我们定义了一个标签函数 myTagFunction，它接受模板字面量的两个参数 strings 和 values。其中 strings 是一个数组，包含了模板字面量中所有的文本部分。values 是一个数组，包含了所有插入的表达式的值。标签函数可以根据这些参数来处理字符串，并返回处理后的结果。在本例中，我们使用标签函数来将 Hello, Alice! 转换成 Hi, Alice!。
标签函数可以用于各种字符串处理任务，例如格式化、翻译、加密等等。标签函数的应用范围非常广泛，可以根据具体情况来选择适合的实现方式。
原始字符串
模板字面量可以使用原始字符串来避免转义字符的影响。原始字符串使用 String.raw 函数来创建，它可以将所有的转义字符都视为普通字符。例如：
const path = String.raw`C:\Users\Alice\Desktop\file.txt`; console.log(path); // 输出：C:\Users\Alice\Desktop\file.txt
在上面的例子中，我们使用了原始字符串来表示一个文件路径。由于路径中包含了反斜杠字符，因此使用普通字符串会导致转义字符的影响。使用原始字符串可以避免这个问题，使得路径的表示更加清晰和直观。
模板字面量的使用技巧
在实际开发中，模板字面量有许多实用的技巧和用法。下面是一些常见的技巧和示例代码。
多行字符串
模板字面量可以用于创建多行字符串，使得代码更加清晰和易读。例如：
const message = `This is a
multi-line
string.`;
console.log(message); // 输出：This is a
// multi-line
// string.在上面的例子中，我们使用了模板字面量来创建一个多行字符串。由于模板字面量可以包含任意的文本，因此可以直接输入多行文本，而不需要使用换行符或者连接符号。
条件渲染
模板字面量可以使用三元表达式来进行条件渲染。例如：
const isMale = true;
const message = `Hello, ${isMale ? 'Mr.' : 'Ms.'} Alice!`;
console.log(message); // 输出：Hello, Mr. Alice!在上面的例子中，我们使用了三元表达式来根据 isMale 变量的值来判断输出的称呼。如果 isMale 为 true，则使用 Mr.，否则使用 Ms.。
循环渲染
模板字面量可以使用循环语句来进行循环渲染。例如：
const fruits = ['apple', 'banana', 'cherry'];
const list = `
<ul>
${fruits.map(fruit => `<li>${fruit}</li>`).join('')}
</ul>
`;
console.log(list); // 输出：<ul><li>apple</li><li>banana</li><li>cherry</li></ul>在上面的例子中，我们使用了 map 函数和模板字面量来创建一个水果列表。map 函数将每个水果转换为一个 <li> 元素，并使用 join 函数将它们连接起来。由于模板字面量可以包含任意的表达式，因此可以方便地进行循环渲染。
样式渲染
模板字面量可以使用样式对象来进行样式渲染。例如：
-- -------------------- ---- ------- ----- ----- - - ------ ------ --------- ------- ----------- ------- -- ----- ------- - - ---- ------- ------ --------------- ---------- ------------------ ------------ -------------------- -- ---- -- - ------ -------- ------ -- ---------------------
在上面的例子中，我们使用了一个样式对象来定义一个样式，然后使用模板字面量来将样式应用到一个 <div> 元素中。由于模板字面量可以包含任意的表达式，因此可以方便地进行样式渲染。
结论
模板字面量是 ECMAScript 2019 中的一个重要新特性，它使得字符串的拼接和格式化变得更加简单和直观。模板字面量支持标签函数、原始字符串、多行字符串、条件渲染、循环渲染、样式渲染等功能，可以应用于各种字符串处理任务。在实际开发中，我们可以根据具体情况来选择适合的实现方式，以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672576492e7021665e180a3e