模板字面量和模板字面量标签函数
模板字面量
模板字面量为ES6新增,用来定义字符串的能力。与’'和""不同的是,它能保留换行符,可以跨行定义字符串。
//保留换行符
let str = `hello
world`;
console.log(str);
//hello
//world
//顾名思义,模板字面量在定义模板时特别有用
let pageHTML = `
<div>
<a href="#">
<span>Jony Xin</span>
</a>
</div>`;
//使用时需要注意几点:
//1.以换行符开头的模板字面量
console.log(pageHTML[0]); //(换行符)
console.log(pageHTML[0] === '\n'); //true
//2.缩进量
str = `hello
world`;
console.log(str.length); //15 [5+1换行符+4空格+5]
//等价于"hello\n world";
let str2 = "hello\n world";
console.log(str === str2); //true
字符串插值
支持字符串插值是模板字面量最常用的一个特性。
从技术上讲,模板字面量不是字符串,而是一种特殊的JavaScript句法表达式,只不过求值后得到的是字符串。模板字面量在定义时立即求值并转换为字符串实例,任何插入的变量也会从他们最接近的作用域中取值。
let str1 = 'hello',str2 = 'world';
//以前字符串插值
let str3 = str1 + ',' + str2;
//现在字符串插值
let str4 = `${str1},${str2}`;
console.log(str3); //hello,world
console.log(str4); //hello,world
//所有插入的值都会使用toString()强制转换为字符串
//在插值表达式中可以调用函数和方法
function capitalize(word){
return `${ word[0].toUpperCase() }${word.slice(1)}`;
//string.toUpperCase() 用于将字符串转换为大写
//slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
//slice() 方法可从已有的数组中返回选定的元素。
}
console.log(`${ capitalize('hello') },${ capitalize('world') }`); //Hello,World
模板字面量标签函数
可通过标签函数自定义插值行为。废话不多说我们先上例子:
let a = 6;
let b = 9;
function simpleTag(strings, aVal, bVal, sumVal) {
console.log(strings);
console.log(aVal);
console.log(bVal);
console.log(sumVal);
return 'foobar';
}
let untaggedRes = `${a} + ${b} = ${a + b}`;
let taggedRes = simpleTag`${a} + ${b} = ${a + b}`;
// ['', ' + ', ' = ', '', raw: Array(4)]
//6
//9
//15
console.log(untaggedRes); //6 + 9 = 15
console.log(taggedRes); //foobar
-
标签函数会接收 被插值记号分割后的模板 和 对每个表达式求值的结果
- 被插值记号分割后的模板——可以想象把插值想象成一个个挡板,将模板字面量中其他的字符给分开,如插值${a}将’’[空串]和’ + '分开
- 所以可以得出对于一个有n个插值的模板字面量,传给标签函数表达式参数的个数始终是n个,标签函数接受n+1个参数(1个被插值记号分割后的模板+ n个插值表达式求值的结果),标签函数第一个参数所包含的字符串个数始终是n+1个(n个’挡板’能分成n+1个区域)。
-
因为表达式参数是数量是可变的,所以通常使用剩余操作符(rest operator)将他们收集到一个数组中。
function simpleTag(strings, ...expressions) { console.log(strings); for(const expression of expressions){ console.log(expression); } return 'foobar'; } let taggedRes = simpleTag`${a} + ${b} = ${a + b}`; // ['', ' + ', ' = ', '', raw: Array(4)] //6 //9 //15 console.log(taggedRes); //foobar