本文介绍如何在 JavaScript 中高效、可靠地将形如 {{1}}、{{2}} 的序号型占位符，按顺序替换为字符串数组中的对应元素，适用于动态模板渲染场景。
本文介绍如何在 javascript 中高效、可靠地将形如 `{{1}}`、`{{2}}` 的序号型占位符，按顺序替换为字符串数组中的对应元素，适用于动态模板渲染场景。
在前端开发中，常需将用户输入或配置数据注入预定义的模板字符串，例如 'Hello {{1}}, welcome to {{2}}!' 配合 ['Alice', 'JavaScript'] 生成 'Hello Alice, welcome to JavaScript!'。相比手动遍历或多次调用 replace()，基于正则表达式的单次全局替换是最简洁、健壮且性能优良的方案。
✅ 推荐实现方式
使用 String.prototype.replace() 配合带捕获组的正则表达式，并传入回调函数动态获取替换值：
const values = ['now', 'code', 'block'];
const template = 'test {{1}} this {{2}} {{3}}';
const result = template.replace(/{{([^}}]+)}}/g, (match, digitStr) => {
const index = parseInt(digitStr, 10) - 1; // 转为 0-based 索引
return index >= 0 && index < values.length ? values[index] : match; // 安全兜底
});
console.log(result); // 'test now this code block'? 正则表达式解析
- /{{([^}}]+)}}/g 含义如下：
- {{：字面量匹配起始符号；
- ([^}}]+)：捕获组，匹配一个或多个非 }} 的字符（即占位符内的数字，如 "1"、"2"），避免误匹配嵌套或跨行情况；
- }}：字面量匹配结束符号；
- g 标志：确保替换所有匹配项，而非仅第一个。
回调函数接收两个关键参数：完整匹配字符串（如 '{{2}}'）和第一个捕获组内容（如 '2'）。我们忽略前者（用 _ 占位），专注处理数字字符串。
⚠️ 关键注意事项
- 索引安全性：占位符数字从 1 开始计数，但数组索引从 0 开始，务必执行 digitStr - 1 并校验边界（如示例中 index >= 0 && index < values.length），防止 undefined 插入；
- 类型健壮性：使用 parseInt(digitStr, 10) 显式转为整数，避免 '01' 等意外八进制解析；
- 未匹配占位符处理：建议保留原始占位符（如返回 match）而非抛错，便于调试与容错；
- 不推荐 eval 或 with：避免动态作用域风险；也不推荐简单 split + join —— 无法处理重复编号或复杂嵌套。
? 扩展建议（可选）
若需支持命名占位符（如 {{name}}）、嵌套对象访问（如 {{user.profile.name}}）或异步数据源，建议升级为轻量模板引擎（如 mustache.js）或封装为可复用函数：
function renderTemplate(str, data) {
return str.replace(/{{([^}}]+)}}/g, (_, key) => {
// 支持点号路径：'user.name' → data.user?.name
return key.split('.').reduce((obj, k) => obj?.[k], data) ?? _;
});
}掌握该模式，即可在表单预览、邮件模板、i18n 动态文案等场景中，以声明式、低侵入方式完成字符串插值。
