本文介绍如何用 JavaScript 正则表达式高效、可靠地将形如 {{1}}、{{2}} 的序号占位符，按顺序替换为字符串数组中的对应元素（注意：占位符序号从 1 开始，数组索引从 0 开始）。
本文介绍如何用 javascript 正则表达式高效、可靠地将形如 `{{1}}`、`{{2}}` 的序号占位符，按顺序替换为字符串数组中的对应元素（注意：占位符序号从 1 开始，数组索引从 0 开始）。
在模板化字符串处理中，常需将带序号的双大括号占位符（如 {{1}}、{{2}}）按顺序替换为动态数据。相比手动遍历或多次调用 replace()，基于正则表达式的单次全局替换是最简洁、健壮且性能友好的方案。
✅ 推荐实现方式
使用 String.prototype.replace() 配合全局正则表达式 /{{([^}}]+)}}/g，并传入回调函数进行动态替换：
const values = ['now', 'code', 'block'];
const template = 'test {{1}} this {{2}} {{3}}';
const result = template.replace(/{{([^}}]+)}}/g, (_, digitStr) => {
const index = parseInt(digitStr, 10) - 1; // 转为数字并转为 0-based 索引
return values[index] ?? ''; // 安全访问：越界时返回空字符串
});
console.log(result); // "test now this code block"? 正则表达式解析
- /{{([^}}]+)}}/g 含义如下：
- {{：字面量匹配起始符号；
- ([^}}]+)：捕获组，匹配一个或多个非 } 字符（即占位符内的内容，如 "1"、"2"），避免误匹配嵌套 }}；
- }}：字面量匹配结束符号；
- /g：全局标志，确保替换所有匹配项（而非仅第一个）。
回调函数中，_ 接收完整匹配（如 "{{1}}"），我们忽略；digitStr 接收捕获组内容（如 "1"），经 parseInt() 转换后减 1，即可精准映射到数组索引。
⚠️ 注意事项与最佳实践
- 索引越界防护：务必检查 index 是否在 values 数组有效范围内（如使用 ?? '' 或 values[index] || ''），避免 undefined 污染结果；
- 非数字占位符兼容性：当前正则支持任意非 }} 内容（如 {{id}}），但若需严格限定为纯数字，可改用 /{{(\d+)}}/g；
- 不推荐 eval 或 with：切勿为图方便引入执行风险，本方案完全无副作用；
- 性能优势：单次遍历完成全部替换，时间复杂度 O(n)，优于循环 + 多次 replace()。
该方法简洁、可读性强，适用于表单渲染、邮件模板、日志插值等常见场景，是现代 JavaScript 模板填充的轻量级标准解法。
