如何在Function构造函数中为ES6模板字面量设置上下文替换占位符？

完全理解你的顾虑——eval和new Function确实有安全风险，而且对于这种简单的占位符替换来说，根本没必要用它们。下面给你两个实用、安全的解决方案，覆盖基础和嵌套属性的场景：

基础版：正则匹配直接替换 #

如果你的占位符都是${key}这种简单的一级键名，用正则配合回调函数就能轻松搞定：

const replacePlaceholders = (str, values) => {
  // 全局匹配所有${xxx}格式的占位符，捕获键名
  return str.replace(/\${([^}]+)}/g, (_, key) => {
    // 从values中取值，不存在则保留原占位符（也可改成返回""）
    return values[key] ?? _;
  });
};

// 测试一下
const originalStr = "http://example.com/?name=${name}&age=${age}";
const values = { name: "Royi Namir", age: 30 };
console.log(replacePlaceholders(originalStr, values));
// 输出：http://example.com/?name=Royi Namir&age=30

这个方法的核心是正则/\${([^}]+)}/g：它会精准匹配所有${xxx}格式的片段，把xxx作为键名提取出来，再从你传入的values对象中取出对应的值替换进去。如果某个占位符没有对应的值，会保留原占位符（你可以把?? _改成?? ""来替换为空）。

进阶版：支持嵌套属性 #

如果你的占位符需要支持${user.name}这种嵌套属性，只需加一个简单的嵌套取值函数即可：

// 从对象中根据路径获取嵌套属性
const getNestedValue = (obj, path) => {
  return path.split('.').reduce((current, key) => {
    return current?.[key];
  }, obj);
};

const replaceNestedPlaceholders = (str, values) => {
  return str.replace(/\${([^}]+)}/g, (_, path) => {
    const value = getNestedValue(values, path);
    return value ?? _;
  });
};

// 测试嵌套场景
const nestedValues = { user: { name: "Royi Namir" }, age: 30 };
const nestedStr = "http://example.com/?name=${user.name}&age=${age}";
console.log(replaceNestedPlaceholders(nestedStr, nestedValues));
// 输出：http://example.com/?name=Royi Namir&age=30

为什么不推荐eval/new Function？ #

这两个方法会将字符串作为代码执行，如果你的资源字符串或values中包含不可信内容（比如用户输入），很容易引发代码注入、XSS等安全问题。而上面的正则替换方案是纯静态的匹配取值，完全不存在执行未知代码的风险，更适合这类场景。

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