【ES6 教程】第一章新的ES6语法10—如何替换字符串中的变量

web前端开发 2022-12-03

英文 | https://www.javascripttutorial.net

翻译 | 杨小爱

在今天的教程中，我们将学习 JavaScript 模板文字，它使我们可以更轻松地使用字符串模板。

在 ES6 之前，我们使用单引号 (') 或双引号 (") 来包装字符串文字。字符串的功能非常有限。

为了使我们能够解决更复杂的问题，ES6 模板文字提供了允许更安全、更干净地处理字符串的语法。

在 ES6 中，通过将文本包装在反引号 (`) 中来创建模板文字，如下所示：

let simple = `This is a template literal`;

我们将获得以下功能：

多行字符串：可以跨越多行的字符串。

字符串格式化：用部分字符串替换变量或表达式的值的能力。此功能也称为字符串插值。

HTML 转义：转换字符串以使其可以安全地包含在 HTML 中的能力。

JavaScript 模板字面量的基本语法

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

let str = `Template literal in ES6`;

console.log(str);// Template literal in ES6console.log(str.length); // 23console.log(typeof str);// string

使用反引号，我们可以在模板文字中自由使用单引号或双引号而无需转义。

let anotherStr = `Here's a template literal`;

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

let strWithBacktick = `Template literals use backticks \` insead of quotes`;

多行字符串

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

let msg = 'Multiline \n\string';

console.log(msg);//Multiline//string

请注意，放在换行符 (\n) 之后的反斜杠 (\) 表示字符串的继续，而不是换行。

然而，这种技术在 JavaScript 引擎中并不一致。因此，创建一个依赖于数组和字符串连接的多行字符串是很常见的，如下所示：

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

模板文字允许我们更轻松地定义多行字符串，因为我们需要在字符串中的任意位置添加新行：

let p =`This textcanspan multiple lines'

请注意，空格是字符串的一部分。因此，我们需要确保文本与正确的缩进对齐。假设我们有一个 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']};

以下代码返回 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>`;

以下是变量 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>

变量和表达式替换

此时，模板文字就像是常规 JavaScript 字符串的更好版本。模板文字和常规字符串之间的最大区别是替换。

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

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

${variable_name}

请看以下示例：

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

let greeting = `Hi ${firstName}, ${lastName}`;console.log(greeting); // Hi John, Doe

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

然后，greeting 变量保存替换的结果。以下示例替换为表达式：

let price = 8.99, tax = 0.1;

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

console.log(netPrice); // netPrice:$9.89

标记模板

模板标签携带模板文字上的转换并返回结果字符串。

将标签放在模板开头的反引号 (`) 字符之前，如下所示：

let greeting = tag`Hi`;

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

function tag(literals, ...substitutions) { // return a string}

在这个函数中：

literals 参数是一个包含文字字符串的数组。
ubstitutions参数包含为每个替换解释的后续参数。

请看以下示例：

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.

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

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