JavaScript字符串插值：如何更优替换变量字符串中的占位符？

当然有更简洁的实现方式，不用反复调用replace，以下是几种实用的方案：

1. 正则匹配 + 参数对象（最常用） #

利用正则一次性匹配所有{xxx}格式的占位符，结合参数对象批量替换，不管占位符数量多少都能一次搞定：

const Item_Required = "The {item} is required and needs to be between {min} and {max} {unit}!";
const replacements = {
  item: "Contract Title",
  min: 3,
  max: 100,
  unit: "characters"
};

// 正则匹配所有{key}格式的占位符，捕获key后从对象中取对应值
const result = Item_Required.replace(/{(\w+)}/g, (match, key) => replacements[key] || match);
// 输出: "The Contract Title is required and needs to be between 3 and 100 characters!"

如果担心某个占位符没有对应值，可以用空字符串或自定义提示替代，比如把replacements[key] || match改成replacements[key] ?? "缺失值"。

2. 使用Intl.MessageFormat（专业场景） #

如果需要处理更复杂的文本替换（比如国际化、复数规则），可以用浏览器原生的Intl.MessageFormat API，它专门用于格式化带占位符的消息：

const Item_Required = "The {item} is required and needs to be between {min} and {max} {unit}!";
const formatter = new Intl.MessageFormat(Item_Required);

const result = formatter.format({
  item: "Contract Title",
  min: 3,
  max: 100,
  unit: "characters"
});

注意：部分旧浏览器可能需要polyfill，现代浏览器基本都支持。

3. 封装复用函数（方便多次调用） #

如果业务中经常需要做这类替换，可以封装一个简单的工具函数，提高复用性：

function replacePlaceholders(template, params) {
  // 用空值合并运算符处理未定义的占位符，保留原占位符或自定义替换
  return template.replace(/{(\w+)}/g, (_, key) => params[key] ?? `{${key}}`);
}

// 使用示例
const result = replacePlaceholders(Item_Required, {
  item: "Contract Title",
  min: 3,
  max: 100,
  unit: "characters"
});

这些方案都比多次调用replace更简洁、易维护，新增占位符时只需要在参数对象中添加对应属性即可，不需要修改替换逻辑。

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