动态按钮引发Unexpected Token错误问题排查

嘿，这个问题我之前踩过坑！你遇到的Unexpected Token错误，核心原因是动态生成点击事件时的字符串拼接逻辑有问题——当array["data"]里的内容以连字符结尾时，直接把它拼进JS代码字符串里，会被解析器当成非法的语法（比如把连字符-误判为减号，后面没有操作数就报错）。

举个例子，假设你原来的代码是这样的：

// 错误示范：直接拼接未转义的字符串
array["data"].forEach(item => {
  const btn = document.createElement('button');
  btn.innerText = '点击设置变量';
  // 如果item是"demo-"，拼出来的代码是setTempVars(demo-)，语法直接炸
  btn.onclick = eval(`() => setTempVars(${item})`);
  document.body.appendChild(btn);
});

快速修复方案：给动态内容加字符串转义 #

最简单的解决办法是把item当成字符串值传入，而不是让JS解析成标识符。可以用JSON.stringify()自动处理所有特殊字符（包括连字符、引号等）：

array["data"].forEach(item => {
  const btn = document.createElement('button');
  btn.innerText = '点击设置变量';
  // 用JSON.stringify把item转成合法的字符串字面量
  btn.onclick = new Function(`setTempVars(${JSON.stringify(item)})`);
  document.body.appendChild(btn);
});

JSON.stringify()会自动给字符串加上双引号，并且转义内部的特殊字符，不管item结尾有没有连字符，都能生成合法的JS代码。

更安全的最佳实践：避免字符串拼接生成代码 #

用字符串拼接或者eval生成代码不仅容易出语法错误，还存在XSS安全风险（如果array["data"]的内容来自用户输入）。更稳妥的方式是用事件绑定+闭包/箭头函数直接传递参数：

// 先定义你的设置变量函数
function setTempVars(...args) {
  // 这里处理临时变量逻辑，比如：
  window.temp1 = args[0];
  window.temp2 = args[1];
  // ...
}

// 动态生成按钮时直接绑定带参数的回调
array["data"].forEach(item => {
  const btn = document.createElement('button');
  btn.innerText = '点击设置变量';
  // 用箭头函数捕获当前item，点击时直接调用
  btn.addEventListener('click', () => {
    // 如果item是包含多个值的对象，比如{var1: "val-", var2: "test"}
    setTempVars(item.var1, item.var2);
    // 如果是单个值就直接传：setTempVars(item);
  });
  document.body.appendChild(btn);
});

这种方式完全不需要拼接字符串，不管item里有什么特殊字符，都能安全传递，还能避免语法错误，代码可读性也更高。

额外提示 #

如果你的setTempVars需要设置多个临时变量，建议把数组元素设计成对象（比如{tempA: "foo-", tempB: "bar"}），这样在回调里可以直接解构赋值，逻辑更清晰：

btn.addEventListener('click', () => {
  const { tempA, tempB } = item;
  // 直接使用临时变量
  console.log(tempA, tempB);
});

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