如何在JavaScript中用对象键值对插值模板字符串？求替代with语句方案

你提到的with语句确实不推荐使用，这里有几种更安全高效的实现方式：

1. 解构赋值（最推荐） #

直接把对象的属性解构到当前作用域，再用模板字符串，逻辑清晰且无安全隐患：

const data = { age: 18, name: "John" };
const { name, age } = data;
const result = `I'm ${name}. I'm ${age} years old`;
// 输出："I'm John. I'm 18 years old"

这种方式明确指定要使用的属性，可读性强，也不会像with那样污染作用域。

2. 正则匹配替换（模拟Python风格） #

如果想和Python一样用%(key)s/%(key)d这种占位符格式，可以写一个通用的插值函数：

function interpolate(template, data) {
  // 匹配 %(key)s 或 %(key)d 格式的占位符
  return template.replace(/%\((\w+)\)[sd]/g, (_, key) => {
    // 存在对应属性就替换，否则保留原占位符
    return data[key] ?? _;
  });
}

const data = { age: 18, name: "John" };
const template = "I'm %(name)s. I'm %(age)d years old";
const result = interpolate(template, data);
// 输出："I'm John. I'm 18 years old"

这个函数可以处理任意符合格式的模板，适配你习惯的Python风格写法。

3. 动态生成函数（适合大量属性场景） #

如果模板里要用到的属性很多，不想逐个解构，可以用Function构造函数动态生成渲染函数，但注意：仅在模板完全可控（非用户输入）的场景下使用，避免XSS风险：

function renderTemplate(template, data) {
  const keys = Object.keys(data);
  return new Function(...keys, `return \`${template}\``)(...Object.values(data));
}

const data = { age: 18, name: "John" };
const template = "I'm ${name}. I'm ${age} years old";
const result = renderTemplate(template, data);
// 输出："I'm John. I'm 18 years old"

这种方式自动把对象的所有属性作为模板字符串的变量，省去手动解构的步骤，但一定要确保模板内容安全。

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