当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,…values)
- arr:模板字符串中所有那些没有变量替换的部分
- …values:各个变量替换后的值
即
let a = 'Oh!';
let b = 'the';
let c = 'very much!'
tag `${a} I love ${b} JavaScript ${c}`;
function tag(arr, ...values) {
console.log(arr); //["", " I love ", " javascript ", "", raw: Array[4]]
for(let i in values){
console.log(values[i]); //oh!
//the
//very much!
}
}
在这里,(arr,…values) 等价于 (arr,value1,value2,value3),这很好理解
但是!在arr中,为什么arr[0]和arr[arr.length-1]的位置为什么出现了两个空元素???
接着我又试了试下面这个样子
let a = 'Oh!';
let b = "the";
let c = "very much!"
tag `I love ${b} javascript`;
function tag(arr, ...values) {
console.log(arr); //["I love ", " javascript", raw: Array[2]]
for(let i in values){
console.log(values[i]);
//the
}
}
excuse me???为什么又没有了?
仔细观察了一下,只有当变量出现在模板字符串的起始位置或者末尾位置时,在arr中会出现一个“”空元素
这个特性是不是有些眼熟?
对!就是split()!
let a = 'Oh my god!';
let b = a.split(' ');
console.log(b); //["Oh", "my", "god!"]
let c = ' Oh my god! ';
let d = c.split(' ');
console.log(d); //["", "Oh", "my", "god!", ""];
假想一下:
标签模板在给标签函数传递arr参数时,会将原先模板字符串用 ${} 进行分割。因为分割符的两边都会产生一个元素。所以当模板字符串的两端位置出现变量时,分割后会在分割符没有元素的一侧生成一个空元素“”。
注:arr中的最后一项raw:Array[n],是arr数组的一个属性,保存的是转义后的原字符串,这是为了方便取得转义之前的原始模板而设计的。