JavaScript/TypeScript中如何调用定义存储在字符串中的函数

核心逻辑不需要提前感知函数名或具体定义，只需要在运行时将函数字符串解析为可执行的函数引用即可，最稳定的实现方式如下：

推荐方案：使用new Function构造函数引用 #

该方案通过将动态函数字符串包装为返回函数本身的表达式，直接拿到可调用的函数对象，全程不需要解析原函数名，兼容所有合法JS函数写法（普通函数、箭头函数、async函数等），且作用域隔离性优于直接使用eval。

JavaScript 实现 #

// 示例1：调用Hello函数
let dynamicFun = `function Hello(person) {   return 'Hello ' + person; }`
// 构造执行逻辑，直接返回定义好的函数引用
const callableFunc = new Function(`return (${dynamicFun})`)();
// 传入参数直接调用
console.log(callableFunc('Zhang San')); // 输出 Hello Zhang San

// 示例2：替换为Sum函数，调用逻辑完全不需要修改
dynamicFun = `function Sum(num) {   return num + num; }`
const callableFunc2 = new Function(`return (${dynamicFun})`)();
console.log(callableFunc2(6)); // 输出 12

// 兼容箭头函数、async函数等其他写法
const arrowFuncStr = `(content) => 'Received: ' + content`;
const arrowFunc = new Function(`return (${arrowFuncStr})`)();
console.log(arrowFunc('test')); // 输出 Received: test

TypeScript 类型适配 #

由于编译阶段无法预知动态函数的入参、返回值类型，可以通过泛型或通用函数类型做类型声明：

// 定义通用函数类型，可根据业务场景细化类型约束
type DynamicCallable = (...args: any[]) => any;

/**
 * 从字符串解析可调用函数
 */
function parseDynamicFunc(funcStr: string): DynamicCallable {
  return new Function(`return (${funcStr})`)() as DynamicCallable;
}

// 使用
const sum = parseDynamicFunc(`function Sum(num) { return num + num; }`);
console.log(sum(10)); // 输出20

注意事项 #

• 所有动态执行字符串代码的方案都存在代码注入风险，绝对不要将未经过安全校验的用户可控内容传入解析逻辑，避免引发XSS、任意代码执行等安全问题。
• 不推荐使用直接eval的方案：eval会访问当前闭包的作用域，更容易造成变量污染、作用域混乱问题，且提取函数引用的逻辑更复杂。
• 不要用正则匹配函数名的方式提取函数：JS函数写法灵活多样，正则覆盖场景有限，很容易出现匹配失败的问题。

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