动态替换字符串占位符：如何用变量作为replaceAll()参数？

问题场景 #

表单提交后生成键值对对象，键为输入框ID，值为对应输入内容：

let inputsObj = {
   templateList: 'blank',
   agentsName: 'John',
   agentsPhone: '000-000-0000'
}

需要将模板字符串中所有与对象键同名的占位符，替换为对应的值：

let template = "My name is agentsName and this is my phone number: agentsPhone"

期望输出：

"My name is John and this is my phone number: 000-000-0000"

原代码问题分析 #

你编写的循环替换代码无法正常工作，核心原因有两个：

1. 循环第一次迭代就执行了return，函数直接终止，仅处理第一个键就返回结果，未遍历完所有键值对。
2. 每次替换都基于原始template字符串，而非上一次替换后的结果，即便去掉return，最终也只会保留最后一次替换的效果。

原错误代码：

let finalTemplate

const getReplacements = () => {
   for (let replacement in inputsObj) {
       finalTemplate = template.replaceAll(replacement, inputsObj[replacement])
            return finalTemplate
   }
   return finalTemplate
}

解决方案 #

方案一：修正循环逻辑 #

从原始模板字符串开始，每次基于上一次替换后的结果继续处理，遍历完所有键值对后返回最终结果：

const getReplacements = () => {
  let result = template;
  for (const key in inputsObj) {
    result = result.replaceAll(key, inputsObj[key]);
  }
  return result;
}

方案二：正则表达式一次性替换（更高效） #

将所有对象键组合成正则表达式，一次性匹配所有占位符并替换，避免多次遍历字符串：

const getReplacements = () => {
  // 转义键中的正则特殊字符，避免语法冲突
  const escapedKeys = Object.keys(inputsObj).map(key => escapeRegExp(key)).join('|');
  const placeholderRegex = new RegExp(escapedKeys, 'g');
  
  return template.replace(placeholderRegex, match => inputsObj[match]);
}

// 辅助函数：转义正则特殊字符
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

该方案优势：

• 仅遍历字符串一次，处理大量键时效率更高
• 可避免键之间存在包含关系（如name和agentName）时的替换顺序问题
• 若占位符有特殊格式（如{{agentsName}}），可修改正则为new RegExp({{(${escapedKeys})}}, 'g')，避免误替换普通文本

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