JavaScript标签模板如何正确传递外部变量的值

标签函数的传参规则是固定的：第一个参数是模板被${}插值切分后的字符串片段数组，数组的raw属性存储未处理转义字符的原始字符串内容；从第二个参数开始，按模板里插值的顺序，依次传入每个${}表达式的计算结果。
你之前写的tag函数只接收了第一个字符串数组参数，完全没有处理后续传入的插值参数，自然拿不到外部变量key的值，输出就会缺内容。
注意：字符串片段的数量永远比插值数量多1，拼接时需要判断插值下标是否越界，避免把undefined拼入最终结果。

正确的实现需要把字符串片段和插值按顺序交错拼接，参考代码如下：

function tag(strings, ...interpolations) {
  let output = ''
  strings.raw.forEach((segment, idx) => {
    output += segment
    if (idx < interpolations.length) {
      output += interpolations[idx]
    }
  })
  console.log(output)
}

const key = "a"
tag`The value of key: ${key}` 
// 输出：The value of key: a

这个写法兼容任意数量的插值场景，多变量的情况也能正常运行：

const name = "test", count = 100
tag`Name: ${name}, Count: ${count}`
// 输出：Name: test, Count: 100

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