今天学习的一个知识点,在讲标记模板字面量前需要先了解一下模板字面量(字符串模板)、字符串插值
模板字面量
ECMAScript 6 新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同,模板字面量保留换行字符,可以跨行定义字符串:例如
const info = "first line \n second line"
const infos = `first line
second line`
console.log(info)
console.log(infos)
结果:
字符串插值
ES6 增加的模板字面值支持字符串插值,就是可以在字符串中使用 JavaScript 表达式。如下:
let value = 5;
let exponent = 'second';
// 以前,字符串插值是这样实现的:
let interpolatedString =
value + ' to the ' + exponent + ' power is ' + (value * value);
// 现在,可以用模板字面量这样实现:
let interpolatedTemplateLiteral =
`${ value } to the ${ exponent } power is ${ value * value }`;
console.log(interpolatedString); // 5 to the second power is 25
console.log(interpolatedTemplateLiteral); // 5 to the second power is 25
标记模板字面量
当在模板字面值前放置值为函数实例的表达式,也就是说在函数表达式中传入我们的模板字符函数会怎样解析呢?
const a = 6;
const b = 9;
function simpleTag(a, b, c, d,e) {
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e)
return 'foobar';
}
let untaggedResult = `${ a } + ${ b } = ${ a + b }`;
let taggedResult = simpleTag `${ a } + ${ b } = ${ a + b }`;
//object Array ["", " + ", " = ", ""]
// 6
// 9
// 15
//undefined
console.log(untaggedResult); // "6 + 9 = 15"
console.log(taggedResult); // "foobar"
在我们使用模板字面量时,第一个传入的参数是一个包含字符串的数组,剩余的参数按照我们的表达式的值一次传入。简而言之就是,传入的第一个参数所输出的数组就是把表达式进行一个成分的拆解,之后传入对应插值的值。
所以`${ a } + ${ b } = ${ a + b }`拆解完就是: ["", " + ", " = ", ""] ,6,9,15。