如何将ES6模板字面量反编译为数组表示并传入标签函数？

首先得明确：当你给模板字面量加上标签函数时，JavaScript引擎会自动帮你完成这种"拆分"工作——根本不需要你手动转换！它会把模板拆成静态字符串数组和动态替换项，然后作为参数传给标签函数。

举个最直观的例子，写一个简单的标签函数，看看它接收到的参数：

// 定义一个标签函数
function logTag(strings, ...values) {
  console.log("静态字符串部分：", strings); // 输出: ['my name is ']
  console.log("动态替换项：", values);       // 输出: ['Anthony']
  
  // 你可以在这里自定义处理逻辑，比如拼接回原字符串
  return strings.reduce((result, str, idx) => {
    return result + str + (values[idx] || '');
  }, '');
}

// 使用标签函数包裹模板字面量
const greeting = logTag`my name is ${'Anthony'}`;
console.log(greeting); // 输出: "my name is Anthony"

看到没？logTagmy name is ${'Anthony'}`` 这种写法，会被JS引擎自动编译成logTag(['my name is '], 'Anthony')——这正是你想要的[['my name is '], 'Anthony']结构（只不过标签函数的第一个参数是静态数组，后面跟着单独的替换项，你可以用剩余参数...values把它们收集成数组）。

如果你是想手动把一个模板字面量的字符串（比如'my name is ${\'Anthony\'}'）解析成这种结构，那可以写一个简单的解析函数：

function parseTemplate(str) {
  const staticParts = [];
  const replacements = [];
  let cursor = 0;
  // 匹配${}格式的正则
  const regex = /\${([^}]+)}/g;
  let match;

  while ((match = regex.exec(str)) !== null) {
    // 截取${前面的静态字符串
    staticParts.push(str.slice(cursor, match.index));
    // 提取${内部的内容，这里用eval执行（注意：实际使用要谨慎，避免代码注入）
    replacements.push(eval(match[1]));
    cursor = match.index + match[0].length;
  }
  // 加入最后一段静态字符串
  staticParts.push(str.slice(cursor));

  // 返回你要的结构：[静态数组, 替换项1, 替换项2...]
  return [staticParts, ...replacements];
}

// 测试
const parsedResult = parseTemplate('my name is ${\'Anthony\'}');
console.log(parsedResult); // 输出: [['my name is '], 'Anthony']

不过要注意，手动解析的话要处理很多边界情况（比如转义字符、嵌套的${}、复杂表达式等），如果只是为了使用标签函数，完全不需要手动做这个——JS引擎已经帮你处理好了所有拆分逻辑，直接在标签函数里接收参数就行。

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