如何将HTML输入的箭头函数字符串转为函数添加到JavaScript/TypeScript数组

直接转换字符串为函数（仅适合内部使用场景） #

该方案可以直接把用户输入的函数字符串转为可执行函数，但存在严重的XSS代码注入风险，仅推荐应用无外部用户、仅内部人员使用的场景下使用。
转换可以通过eval或者Function构造函数实现，示例代码如下：

// 新增函数的点击事件处理逻辑
addFunction(inputStr: string): void {
  // 可选：提前做格式校验，过滤非法输入
  const funcReg = /^\s*\(\s*\)\s*=>\s*\w+\s*\([\w,\s]*\)\s*$/;
  if (!funcReg.test(inputStr)) {
    alert('输入格式非法，请遵循 () => 函数名(参数1,参数2) 的格式');
    return;
  }
  try {
    // 转换字符串为函数
    const parsedFunc = eval(inputStr);
    // 运行时校验转换结果是否为函数
    if (typeof parsedFunc === 'function') {
      this.functionlist.push(parsedFunc);
    }
  } catch (err) {
    alert('函数解析失败：' + (err as Error).message);
  }
}

注意：转换生成的函数依赖的目标函数（比如示例中的functionC）、参数变量（比如parameterE）必须在eval执行的作用域下可访问，否则会抛出未定义错误。

生产环境推荐替代方案 #

如果你的应用面向外部用户，绝对不能直接执行用户输入的任意代码，建议采用结构化输入+白名单的方案实现需求，完全规避代码注入风险：

1. 预先定义允许调用的函数白名单

// 把允许用户调用的函数提前注册到白名单中
const ALLOWED_FUNCS = {
  functionA: functionA,
  functionB: functionB,
  functionC: functionC
} as const;
// 给函数列表加明确的TS类型标注
functionlist: Array<() => void> = [
  () => ALLOWED_FUNCS.functionA(parameterA, parameterB),
  () => ALLOWED_FUNCS.functionB(parameterC, parameterD)
];

2. 把页面输入框改为结构化输入项：

• 下拉选择框：选项为白名单里的函数名，用户只能选择允许调用的函数
• 参数输入区域：支持用户输入对应函数需要的参数

3. 新增函数逻辑改为自行拼装箭头函数

addNewFunction(funcName: keyof typeof ALLOWED_FUNCS, params: any[]): void {
  this.functionlist.push(() => ALLOWED_FUNCS[funcName](...params));
}

该方案所有可执行逻辑都在你的控制范围内，不会出现恶意代码执行问题，同时也可以利用TypeScript做编译时类型校验，避免非法函数调用。

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