如何在JavaScript中替换字符串中的{变量}占位符？

核心思路 #

通过正则匹配所有{xxx}格式的占位符，结合递归解析逻辑处理嵌套属性路径（如bank.balance），最终用数据源对象对应的值完成替换。

实现步骤与示例 #

1. 嵌套属性解析工具函数 #

先实现一个工具函数，用于从对象中提取嵌套路径的属性值：

function getNestedValue(obj, path) {
  return path.split('.').reduce((current, key) => {
    // 找不到对应属性时保留原占位符，避免输出undefined
    return current && current[key] !== undefined ? current[key] : `{${path}}`;
  }, obj);
}

2. 通用占位符替换函数 #

基于工具函数，编写全局替换的核心函数：

function replacePlaceholders(template, data) {
  // 全局匹配所有{xxx}格式的占位符，捕获组提取键名
  const placeholderRegex = /{([^{}]+)}/g;
  return template.replace(placeholderRegex, (match, key) => {
    return getNestedValue(data, key.trim());
  });
}

3. 完整场景示例 #

结合你的实际使用场景，完整代码如下：

// 模板字符串数组
const array = [
    "string 1 have {amount}",
    "string 2 have {amount}  as well as {user}",
    "string 3 have {amount} as well as {user} and their {bank.balance}"
];

// 自定义随机获取数组元素函数
function getRandomElem(arr) {
  const randomIndex = Math.floor(Math.random() * arr.length);
  return arr[randomIndex];
}

// 嵌套属性解析工具函数
function getNestedValue(obj, path) {
  return path.split('.').reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : `{${path}}`;
  }, obj);
}

// 通用占位符替换函数
function replacePlaceholders(template, data) {
  const placeholderRegex = /{([^{}]+)}/g;
  return template.replace(placeholderRegex, (match, key) => {
    return getNestedValue(data, key.trim());
  });
}

// 示例数据源
const data = {
  amount: Math.floor(Math.random() * 100) + 1,
  user: "Alice",
  bank: {
    balance: 5000
  }
};

// 执行流程
const response = getRandomElem(array);
const replacedString = replacePlaceholders(response, data);

console.log(replacedString);

4. 关键细节说明 #

• 正则匹配逻辑：/{([^{}]+)}/g 会全局匹配所有{}包裹的内容，捕获组精准提取占位符内的键名（支持带.的嵌套路径）。
• 容错机制：当数据源中不存在对应键时，会保留原占位符，避免输出undefined破坏字符串结构。
• 轻量性：无需引入外部库，适合简单场景下的占位符替换需求。

扩展提示 #

如果需要更复杂的模板逻辑（如条件分支、循环渲染），可以考虑使用Handlebars、Mustache等成熟模板引擎，但上述自定义方案在轻量场景下足够高效。

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