ES11 是 JavaScript 的最新版本，它带来了许多新的特性和功能。其中之一是模板字面量，它是一种更美观和可读性更高的对象定义方法。在这篇文章中，我们将深入探讨 ES11 中的模板字面量，学习它的用法和指导意义，并提供一些示例代码。
什么是模板字面量
模板字面量是 ES11 中的一种对象定义方法，它可以更优美地定义对象，提高代码的可读性。它使用反引号 ` 来包围一个字符串，并使用 ${} 来包围 JavaScript 表达式。这些表达式将被解析并嵌入到字符串中。以下是一个示例：
const person = {
name: 'John',
age: 30
};
console.log(`My name is ${person.name} and I am ${person.age} years old.`);
// Output: 'My name is John and I am 30 years old.'在上面的代码中，我们使用模板字面量定义了一个包含名字和年龄的人物对象。我们还使用了模板字面量打印了一个字符串，其中包含了这个人物对象的信息。
除了对象定义，模板字面量还可以用于拼接字符串、定义多行字符串和模板标签等功能。在接下来的章节中，我们将对这些功能进行详细解释。
字符串拼接
模板字面量可以通过 ${} 包裹的表达式来拼接字符串，这比传统的字符串拼接方法更加简单和易读。以下是一个示例：
const name = 'John';
console.log(`Hello, ${name}!`);
// Output: 'Hello, John!'在上面的示例中，我们使用模板字面量来拼接字符串，并用 ${} 包裹了变量 name。这种方式比传统的字符串拼接方法更加简单和易读。
多行字符串
在传统的 JavaScript 中，你必须使用转义字符或者拼接多个字符串来定义多行字符串。使用模板字面量，你可以直接定义多行字符串。以下是一个示例：
-- -------------------- ---- ------- ----- ---- - ---- --- -- ------- ------- --- ----- --- -------- ----- --- ------- --- -------- ------ --- --- --- -- ----- ------- ------------------ -- ------- -- ---- --- -- ------- ------- -- --- ----- --- -------- ----- -- --- ------- --- -------- ------ -- --- --- --- -- ----- ------
在上面的示例中，我们使用模板字面量定义了一首诗歌，其中包含多行文本。我们可以直接通过 console.log 打印整个字符串，而不需要手动拼接每一行字符串。
模板标签
模板标签是一种函数，它可以用于处理模板字面量中的字符串和表达式，并返回一个处理后的结果。以下是一个示例：
function greeting(strings, name) {
return `${strings[0]}${name}${strings[1]}`;
}
const name = 'John';
console.log(greeting`Hi, ${name}!`);
// Output: 'Hi, John!'在上面的代码中，我们定义了一个模板标签函数 greeting，它接收一个数组 strings 和一个名字 name。在模板字面量中，我们用 greeting 函数处理了字符串和表达式，并最终输出了一个包含了名称的字符串。
结论
ES11 中的模板字面量是一个优美的对象定义方法，它可以提高代码的可读性。它可以用于拼接字符串、定义多行字符串和模板标签等多个功能。在使用模板字面量时，我们需要记住用反引号 ` 包围字符串，并用 ${} 包裹表达式。使用模板字面量可以让我们的代码更加简洁、优美和易读。
示例代码
如果你想开始学习模板字面量，可以使用以下示例代码进行练习：
字符串拼接
const name = 'John';
console.log(`Hello, ${name}!`);多行字符串
const poem = `The sun is shining bright, The birds are chirping loud, The flowers are blooming white, And the day is never dull.`; console.log(poem);
模板标签
function greeting(strings, name) {
return `${strings[0]}${name}${strings[1]}`;
}
const name = 'John';
console.log(greeting`Hi, ${name}!`);来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f070826fbf960197330d96