【JS字符串】模板字面量——学习如何替换字符串中的变量

JavaScript字符串10个月前更新 admin
1,336 0

在本教程中,您将了解 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 ES6
console.log(str.length); // 23
console.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 text
can
span multiple lines`;

请注意,空格是字符串的一部分。 因此,您需要确保文本与正确的缩进对齐。 假设您有一个帖子对象:

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’]
};

以下代码返回帖子对象的 HTML 代码。 请注意,我们使用对象解构技术将帖子对象的属性分配给各个变量:标题、摘录、正文和标签。

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 模板文字的模板标签。 标记可以是具有以下签名的任何函数:

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

在这个函数中:

literals 参数是一个包含文字字符串的数组。

替换参数包含为每个替换解释的后续参数。

请参阅以下示例:

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() 函数接受三个参数:文字数组和存储在替换数组中的另外两个参数。

第一个参数是包含三个元素的文字数组:

  • 第一个替换 (”) 之前的空字符串。 请注意,文字数组的第一个参数是一个空字符串。
  • 位于第一个和第二个替换之间的字符串“items cost”。
  • 跟在第二个替换 (‘.’) 之后的字符串

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

总结

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

© 版权声明

相关文章

暂无评论

暂无评论...