JavaScript 模板字面量 - JavaScript 教程

摘要：在本教程中，您将了解 JavaScript 模板字面量，它允许您更轻松地处理字符串模板。

在 ES6 之前，您使用单引号 (') 或双引号 (") 来包装字符串字面量。并且这些字符串的功能非常有限。

为了让您能够解决更复杂的问题，ES6 模板字面量提供了允许您更安全、更清洁地处理字符串的语法。

在 ES6 中，您可以通过将文本用反引号 (`) 括起来来创建模板字面量，如下所示

let simple = `This is a template literal`;Code language: JavaScript (javascript)

您将获得以下功能

多行字符串：一个可以跨越多行的字符串。
字符串格式化：能够将字符串的一部分替换为变量或表达式的值。此功能也称为字符串插值。
HTML 转义：能够转换字符串，使其安全地包含在 HTML 中。

JavaScript 模板字面量的基本语法

如前所述，模板字面量不使用单引号或双引号，而是使用反引号，如下例所示

let str = `Template literal in ES6`;

console.log(str);// Template literal in ES6
console.log(str.length); // 23
console.log(typeof str);// stringCode language: JavaScript (javascript)

使用反引号，您可以在模板字面量中自由使用单引号或双引号，无需转义。

let anotherStr = `Here's a template literal`;Code language: JavaScript (javascript)

如果字符串包含反引号，则必须使用反斜杠 (\) 对其进行转义

let strWithBacktick = `Template literals use backticks \` insead of quotes`;Code language: JavaScript (javascript)

多行字符串

在 ES6 之前，您可以使用以下技术通过手动在字符串中包含换行符 (\n) 来创建多行字符串，如下所示

let msg = 'Multiline \n\
string';

console.log(msg);
//Multiline
//stringCode language: JavaScript (javascript)

请注意，换行符 (\n) 后面的反斜杠 (\) 表示字符串的延续，而不是新行。

但是，此技术在 JavaScript 引擎中并不一致。因此，创建依赖于数组和字符串连接的多行字符串非常普遍，如下所示

let msg = ['This text',
         'can',
         'span multiple lines'].join('\n');Code language: JavaScript (javascript)

模板字面量允许您更轻松地定义多行字符串，因为您需要在需要的地方添加新行

let p =
`This text
can
span multiple lines`;Code language: JavaScript (javascript)

请注意，空格是字符串的一部分。因此，您需要确保文本与适当的缩进对齐。假设您有一个 post 对象

let post = {
    title: 'JavaScript Template Literals',
    excerpt: 'Introduction to JavaScript template literals in ES6',
    body: 'Content of the post will be here...',
    tags: ['es6', 'template literals', 'javascript']
};
Code language: JavaScript (javascript)

以下代码返回 post 对象的 HTML 代码。请注意，我们使用对象解构技术将 post 对象的属性分配给单个变量：title、excerpt、body 和 tags。

let {title, excerpt, body, tags} = post;

let postHtml = `<article>
<header>
    <h1>${title}</h1>
</header>
<section>
    <div>${excerpt}</div>
    <div>${body}</div>
</section>
<footer>
    <ul>
      ${tags.map(tag => `<li>${tag}</li>`).join('\n      ')}
    </ul>
</footer>`;Code language: HTML, XML (xml)

以下是变量 postHtml 的输出。注意我们如何使用间距来正确缩进 <li> 标签。

<article>
<header>
    <h1>JavaScript Template Literals</h1>
</header>
<section>
    <div>Introduction to JavaScript template literals in ES6</div>
    <div>Content of the post will be here...</div>
</section>
<footer>
    <ul>
      <li>es6</li>
      <li>template literals</li>
      <li>javascript</li>
    </ul>
</footer>Code language: HTML, XML (xml)

变量和表达式替换

此时，模板字面量就像常规 JavaScript 字符串的更好版本一样。模板字面量和常规字符串之间的主要区别在于替换。

替换允许您将变量和表达式嵌入字符串中。JavaScript 引擎将自动将这些变量和表达式替换为它们的值。此功能称为字符串插值。

要指示 JavaScript 替换变量和表达式，您需要将变量和表达式放在一个特殊的块中，如下所示

${variable_name}

请参见以下示例

let firstName = 'John',
    lastName = 'Doe';

let greeting = `Hi ${firstName}, ${lastName}`;
console.log(greeting); // Hi John, DoeCode language: JavaScript (javascript)

替换 ${firstName} 和 ${lastName} 访问变量 firstName 和 lastName，以将它们的值插入到 greeting 字符串中。

然后 greeting 变量保存替换的结果。以下示例替换表达式而不是变量

let price = 8.99,
    tax = 0.1;

let netPrice = `Net Price:$${(price * (1 + tax)).toFixed(2)}`;

console.log(netPrice); // netPrice:$9.89Code language: JavaScript (javascript)

带标签的模板

标签模板对模板字面量进行转换并返回结果字符串。

您需要将标签放在模板字面量开始处，在反引号 (`) 字符之前，如下所示

let greeting = tag`Hi`;Code language: JavaScript (javascript)

在此示例中，tag 是应用于 Hi 模板字面量的标签模板。tag 可以是任何具有以下签名的函数

function tag(literals, ...substitutions) {
    // return a string
}Code language: JavaScript (javascript)

在此函数中

literals 参数是一个包含字面字符串的数组。
substitutions 参数包含每个替换的后续参数。

请参见以下示例

function format(literals, ...substitutions) {
    let result = '';

    for (let i = 0; i < substitutions.length; i++) {
        result += literals[i];
        result += substitutions[i];
    }
    // add the last literal
    result += literals[literals.length - 1];
    return result;
}

let quantity = 9,
    priceEach = 8.99,
    result = format`${quantity} items cost $${(quantity * priceEach).toFixed(2)}.`;

console.log(result); // 9 items cost $80.91.Code language: JavaScript (javascript)

在此示例中，format() 函数接受三个参数：literals 数组和存储在 substitutions 数组中的另外两个参数。

第一个参数是包含三个元素的 literals 数组

第一个替换之前的空字符串 (”)。请注意，literals 数组的第一个参数是一个空字符串。
位于第一个和第二个替换之间的字符串 'items cost'。
紧随第二个替换之后的字符串 ('.')

第二个参数是 9，它是 quantity 变量的解释值。它成为 substitutions 数组的第一个元素。第三个参数是 80.91，它是表达式 (quantity * priceEach).toFixed(2) 的解释值。它成为替换数组的第二个元素。

总结

使用反引号创建用于字符串插值的字符串字面量。

本教程是否有帮助？