【ES6 教程】第一章 新的ES6语法10—如何替换字符串中的变量
在 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 textcanspan 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']
};
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>`;
<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`;
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数组:
第一次替换 (”) 之前的空字符串。 请注意,文字数组的第一个参数是一个空字符串。
位于第一个和第二个替换之间的字符串“items cost”。
第二次替换后的字符串 ('.')
第二个参数是 9,它是数量变量的解释值。 它成为替换数组的第一个元素。 第三个参数是 80.91,它是表达式 (quantity * priceEach).toFixed(2) 的解释值。 它成为替换数组的第二个元素。
总结
使用反引号为字符串插值创建字符串文字。
推荐阅读
【ES6 教程】第一章 新的ES6语法01—let:使用let关键字声明块范围的变量
【ES6 教程】第一章 新的ES6语法02—var 和 let 的区别
【ES6 教程】第一章 新的ES6语法03—使用const 关键字定义常量
【ES6 教程】第一章 新的ES6语法04—如何设置函数参数的默认值
【ES6 教程】第一章 新的ES6语法05—REST 参数以及如何有效地使用它们
【ES6 教程】第一章 新的ES6语法06—JavaScript 扩展运算符
【ES6 教程】第一章 新的ES6语法07—ES6 提供了一种定义对象字面量的新方法
【ES6 教程】第一章 新的ES6语法08— for…of 循环
【ES6 教程】第一章 新的ES6语法09—八进制和二进制字面量