JavaScript模板字面量参数：one数组构成及拆分原理疑问

示例代码 #

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

const person = "d";
const age = 10;
getPersonInfo`${person} is ${age} years old`;

问题1：为何参数one对应的数组为['', ' is ', ' years old']？ #

这是JavaScript模板字符串标签函数的内置特性：当通过标签函数调用模板字符串时，第一个参数会自动收集所有${}插值以外的静态字符串片段，按顺序组合成数组。

放到这段代码里看，模板字符串${person} is ${age} years old被两个插值点切割成了三部分静态内容：

• 第一个插值${person}前没有静态文本，对应空字符串''
• 两个插值${person}和${age}之间的静态文本是' is '
• 第二个插值${age}后的静态文本是' years old'
  这些片段就被打包成数组传给了第一个参数one。

问题2：'is'与'years old'也可拆分为更小数组，其遵循的原理是什么？ #

核心还是标签函数对模板字符串的切割规则：只要模板字符串中存在${}插值，静态内容就会被每个插值点切割成独立的数组元素，插值的内容是什么不影响这个规则。

比如把代码改成getPersonInfo${person} ${'i'}s ${age} ${'years'} old``，第一个参数的数组就会变成['', ' ', 's ', ' ', ' old']——每一个${}都会成为切割标记，把前后的静态文本拆成数组的一项，哪怕插值里是直接写的字面量而非变量。

内容的提问来源于stack exchange，提问作者nox