ECMAScript 2019 中的模板字面量：如何使用一个字符串模板构建动态标记
在 JavaScript 中，字符串是被广泛使用的一种数据类型。因为字符串的灵活性和可读性，我们可以在很多场景中使用它来简化代码。随着 ECMAScript 2019 的发布，JavaScript 中新增了一种字符串格式：模板字面量。这种字符串格式不仅可以简化代码，而且还可以更灵活地构建动态标记。
什么是模板字面量？
在 JavaScript 中，我们可以使用单引号或双引号来创建字符串，例如：
const name = 'Tom'; const str = 'Hello, ' + name + '!';
这里的 str 是一个包含变量值的字符串。为了简化这种字符串的构建方式，ECMAScript 2019 引入了一种新的字符串格式：模板字面量。我们可以使用反引号将字符串括起来作为模板字面量，例如：
const name = 'Tom';
const str = `Hello, ${name}!`;这里的 str 与上面的例子等价，但它使用了模板字面量的格式。在反引号中，我们可以使用 ${} 语法来插入变量值，这样就不需要使用加号连接字符串和变量了。
模板字面量的优点
模板字面量不仅提供了一个更简洁和灵活的方式来构建字符串，而且还有以下的优点：
- 避免了错误
使用模板字面量可以避免由于类型错误或缺少参数而引起的错误。如果在模板字面量中缺少 ${} 中的变量值，编译器会在编译时抛出一个错误，例如：
const str = `Hello, ${}!`; // Invalid or unexpected token- 支持多行字符串
使用模板字面量可以轻松地创建多行字符串，而不用在每一行后添加 \n。例如：
const str = `This is a multi-line string.`;
- 支持表达式
在模板字面量中，${} 中可以是任何 JavaScript 表达式，包括函数调用和三元运算。例如：
const a = 1;
const b = 2;
const str = `The maximum is ${a > b ? a : b}.`;使用模板字面量构建动态标记
除了作为字符串的一种格式外，模板字面量还可以用于构建动态标记。在 HTML 中，我们可以使用字符串和变量来创建一个动态标记，例如：
const name = 'Tom';
const container = document.createElement('div');
container.innerHTML = '<p>Hello, ' + name + '!</p>';这里的代码使用了字符串和变量来创建一个动态标记。使用模板字面量，我们可以更清晰地构建这个标记，例如：
const name = 'Tom';
const container = document.createElement('div');
container.innerHTML = `<p>Hello, ${name}!</p>`;这里的代码使用了一个字符串模板来构建动态标记，使得代码更加清晰易读，并且可以很容易地修改和扩展。
总结
模板字面量是 ECMAScript 2019 中的一个重要特性，它可以使我们更加方便地构建、修改和扩展字符串。除此之外，模板字面量还可以用于构建动态标记，使得代码更加清晰易读。如果你正在使用 ECMAScript 2019 或更高版本的 JavaScript，那么模板字面量是一个非常有用的特性，它可以帮助你更快、更简单地编写代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487c1ec48841e989465006d