JS字符串格式化替换大括号占位符时如何保留原有空格

解决方案 #

你的原实现是提取所有占位符的键名后用固定空格拼接，直接丢弃了模板中原有的非占位符内容（包括空格），因此无法保留原有格式。改用replace方法全局替换占位符即可，占位符之外的所有内容会原样保留：

const person = {
  name: 'John',
  middle: 'S',
  last: 'Smith'
}

const format = "{​​​​​​​ name }​​​​​​​ {​​​​​​​​    ​​​​​​middle }​​​​​​​​​​​​​​ {​​​​​​​​​​​​​​ last}​​​​​​​​​​​​​";

function formatStr(obj, format) {
  // 匹配所有大括号包裹的占位符，兼容占位符内部的任意空白/不可见字符
  return format.replace(/{([^}]+)}/g, (match, keyContent) => {
    // 去除键名前后所有空白字符，拿到实际的键
    const key = keyContent.trim()
    // 不存在的键默认返回空字符串，避免输出undefined
    return obj[key] ?? ''
  })
}

console.log(formatStr(person, format)); 
// 输出完全保留模板中原有的空格间隔：John  S Smith

实现说明 #

• 正则/{([^}]+)}/g会全局匹配所有大括号包裹的占位符，捕获大括号内部的所有内容
• 对捕获到的内容执行trim()去除前后空白，兼容占位符内部的普通空格、零宽空格等各类不可见空白字符
• replace方法只会替换匹配到的占位符部分，占位符之外的所有字符（包括空格、特殊符号、换行等）都会原封不动保留，完全符合需求
• 额外增加了空值兼容逻辑，如果模板中出现对象不存在的键，会自动替换为空字符串，避免出现undefined

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