ES6中标记模板字面量的拓展

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45077505/article/details/102687539

借用网上的一道题目来进行解析，

function getPersonInfo(one, two, three,four) {
    console.log(one);
    console.log(two);
    console.log(three);
    console.log(four);
}

const person = "Lydia";
const age = 21;
const sex = "女"

getPersonInfo`${person} is ${age} years old  ${sex}`;

上面这道题目会打印出什么呢？
结果：

 ["", " is ", " years old "，""] Lydia 21 女

看到这个结果，可能会有人迷惑，前面那个空字符串是怎么来的呢，下面我来解释一下我的理解（下面给出的代码我没有老老实实的把空格写上）:

• 首先要知道一点，getPersonInfo函数的接收第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分

按照上面的题目来说，可能会有人认为，我除了变量以外的成员不是应该是[“is”, “years old”]吗，怎么会前面后面都有空字符串呢

• 会出现空字符串是因为变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推

这是什么意思呢？

其实意思就是我的变量总是要插入（替换）到两个字符串的中间的，不满足条件的，会使用空字符串（""）进行补位，

如果还是不太明白的，请继续往下看

比如上面段代码，
第一个变量person，是要替换到第一个参数数组的第一项和第二项中间的，
第二个变量age会替换到第一个参数数组的第二项和第三项中间，

但是person前面没有字符串了，所以会补上一个空字符串，变量age也是需要插入到两个字符串中间，所以会在后面补上一个空字符串,如下图

总之就是一句话，标记模板里面的变量总是要插入（替换）到两个字符串的中间的，不满足条件的话就会用空字符串来补位