es6模板字符串中标签模板作为参数时产生空元素的问题

当模板字符串作为标签模板使用时，标签函数接受到的参数分别为（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中会出现一个“”空元素

这个特性是不是有些眼熟？

对！就是spilt()！

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
，是arr数组的一个属性，保存的是转义后的原字符串，这是为了方便取得转义之前的原始模板而设计的。