ECMAScript 2020 引入了模板字面量增强，可用于更方便地拼接字符串。不仅可以使用字符串内嵌的变量和表达式，还可以使用标签模板来自定义字符串的处理方式。这篇文章将介绍模板字面量增强的使用方法及其优点。
基础用法
使用模板字面量的基本方法是，在反引号中使用 ${} 包裹变量或表达式。例如：
const name = 'Alice';
console.log(`Hello, ${name}!`);
// 输出：Hello, Alice!在 ${} 中可以使用任何有效的 JavaScript 表达式。例如：
const a = 10;
const b = 20;
console.log(`a + b = ${a + b}`);
// 输出：a + b = 30标签模板
除了使用 ${}，模板字面量还支持标签模板。标签模板是通过在模板字面量前添加函数而实现的。例如：
// www.javascriptcn.com code example
function toUpperCase(strings, ...values) {
let result = '';
for (let i = 0; i < strings.length; i++) {
result += strings[i].toUpperCase();
if (i < values.length) {
result += values[i];
}
}
return result;
}
const name = 'Alice';
console.log(toUpperCase`Hello, ${name}!`);
// 输出：HELLO, ALICE!在这个示例中，toUpperCase 是一个标签模板函数。当模板字面量被传递给这个函数时，其第一个参数 strings 是一个字符串数组，包含了模板字面量中所有的静态字符串部分。例如，在 toUpperCase 函数中，strings[0] 是 "Hello, "，strings[1] 是 "!"。其余的参数 values 则是模板字面量中 ${} 中的表达式计算出来的值。在 toUpperCase 函数中，我们将这些值拼接到字符串中，并将所有的字符串转换为大写。
标签模板函数可以实现非常灵活的字符串处理，比如自定义字符串的生成规则，应用样式或格式等。
原始字符串
在模板字面量中，可以使用原始字符串来避免转义字符的影响。使用原始字符串的方法是在字符串前面添加 String.raw 标签。例如：
console.log(String.raw`Hello\nworld!`); // 输出：Hello\nworld!
在这个示例中，String.raw 函数将忽略 \n 转义字符的作用，直接输出字符串中的内容。这对于一些需要保留转义字符的场景非常有用，比如正则表达式或 SQL 语句等。
应用场景
模板字面量增强在前端开发中的应用场景非常广泛。例如：
- 字符串拼接：传统的字符串拼接方式会导致代码可读性差、容易出错。使用模板字面量可以直接在字符串中插入变量，更加简单和可读性强。
const name = 'Alice';
const age = 18;
console.log(`My name is ${name}, and I am ${age} years old.`);
// 输出：My name is Alice, and I am 18 years old.- HTML 代码生成：在前端开发中，我们有时需要动态生成 HTML 代码。使用模板字面量可以更方便的生成 HTML 代码，并且可以避免 XSS 攻击。
// www.javascriptcn.com code example
const items = [
{ name: 'apple', price: 5 },
{ name: 'orange', price: 3 }
];
function generateHTML(items) {
let result = '<ul>';
for (let item of items) {
result += `<li><b>${item.name}</b>: ${item.price} dollars.</li>`;
}
result += '</ul>';
return result;
}
console.log(generateHTML(items));
/*
输出：
<ul>
<li><b>apple</b>: 5 dollars.</li>
<li><b>orange</b>: 3 dollars.</li>
</ul>
*/- 代码生成：在一些特定的场景下，我们需要动态生成代码。使用模板字面量可以在保证代码可读性的同时，更快速和准确地生成代码。
// www.javascriptcn.com code example
function generateFunction(name, args, body) {
return `function ${name}(${args}) {\n${body}\n}`;
}
const func = generateFunction('add', 'a, b', 'return a + b;');
console.log(func);
// 输出：function add(a, b) {
// return a + b;
// }小结
模板字面量增强为字符串处理提供了更加方便、灵活和安全的方法，并且与标签模板结合使用可以实现更加高级的字符串处理。在前端开发中，我们可以利用这些方法来生成可读性强、性能好的代码。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cfcd7ae46428fe9ebd269f