模板字面量提供了创建领域专用语言(domain-specific language,DSL)的语法,处理内容更安全。
模板字面量的最简单语法,是使用反引号( ` )来包裹普通字符串。
字符串中包含反引号,使用反斜杠( \ )转义。
let message = `Hello world!`;
console.log(message); // "Hello world!"
console.log(typeof message); // "string"
console.log(message.length); // 12
let message2 = `\`Hello world!\``;
console.log(message2); // "`Hello world!`"
多行字符串
let message = `Hello
world!`;
console.log(message);
制造替换位
替换位可以将任何有效的 JS 表达式嵌入到模板字面量中,并将其结果输出为字符串的一部分。
替换位由起始的 ${ 与结束的 } 来界定,之间允许放入任意的 JS 表达式。
可替换的除了变量名,还可以嵌入计算、函数调用等等。
let count = 10,
price = 0.25,
message = `${count} items cost $${(count * price).toFixed(2)}.`;
console.log(message); // "10 items cost $2.50."
标签化模板
一个模板标签能对模板字面量进行转换并返回最终的字符串值,标签在模板的起始处被指定,即在第一个 ` 之前,如下所示:
let message = tag`Hello world`;
tag 就是会被应用到 `Hello world` 模板字面量上的模板标签。
第一个参数是个数组,包含被 JS 解释过的字面量字符串,随后的参数是每个替换位的解释值。
let name = 'World';
let message = tag`Hello ${name} !`;
function tag(literals, ...substitutions) {
let result1 = "";
let result2 = "";
for (let i = 0; i < literals.length; i++) {
console.log('literals[', i, ']:', literals[i]);//literals[ 0 ]: Hello
//literals[ 1 ]: !
result1 += literals[i];
}
for (let i = 0; i < substitutions.length; i++) {
console.log('substitutions[', i, ']:', substitutions[i]);//substitutions[ 0 ]: World
result2 += substitutions[i];
}
return result2 + result1; // "WorldHello !"
}
console.log(message);
模板字面量中的原始值
模板标签也能访问字符串的原始信息,主要指的是可以访问字符在转义之前的形式。
let message1 = `Hello\nworld!`,
message2 = String.raw`Hello\nworld!`;
console.log(message1);//"Hello
// world!"
console.log(message2);//"Hello\nworld!"