本文介绍如何使用正则表达式配合 String.prototype.replace()，将形如 'test {{1}} this {{2}} {{3}}' 的模板字符串，按占位符编号顺序精准替换为数组 ['now', 'code', 'block'] 中的对应值，最终生成 'test now this code block'。
本文介绍如何使用正则表达式配合 `string.prototype.replace()`，将形如 `'test {{1}} this {{2}} {{3}}'` 的模板字符串，按占位符编号顺序精准替换为数组 `['now', 'code', 'block']` 中的对应值，最终生成 `'test now this code block'`。
在前端模板渲染、动态文案拼接或表单预览等场景中，常需将含有序号占位符（如 {{1}}、{{2}}）的字符串，按索引顺序替换为用户输入或配置项组成的数组值。JavaScript 提供了高效且声明式的解决方案：结合正则捕获与回调函数的 replace() 方法。
核心思路是：
- 使用正则 /{{([^}}]+)}}/g 全局匹配所有 {{N}} 形式占位符；
- 在替换回调中提取捕获到的数字 N，将其转为数组索引 N - 1（因占位符从 1 开始编号，而数组索引从 0 开始）；
- 直接返回 arr[N - 1] 作为替换内容，自动完成一一映射。
以下为可直接运行的示例代码：
const values = ['now', 'code', 'block'];
const template = 'test {{1}} this {{2}} {{3}}';
const result = template.replace(/{{([^}}]+)}}/g, (_, digitStr) => {
const index = parseInt(digitStr, 10) - 1;
return values[index] ?? ''; // 安全处理越界索引（如 {{4}} 不存在时返回空字符串）
});
console.log(result); // 输出：'test now this code block'✅ 关键细节说明：
- 正则 /{{([^}}]+)}}/g 中，[^}}]+ 表示“匹配一个或多个非 } 字符”，确保正确捕获 {{123}} 中的 123，而不会被 }} 中间出现的其他 } 干扰；
- 回调函数第一个参数 _ 是完整匹配结果（如 '{{2}}'），我们忽略它；第二个参数 digitStr 是捕获组内容（如 '2'），需显式转换为整数再减 1；
- 使用 ?? '' 提供默认值，避免 values[undefined] 导致 undefined 字符串插入，提升鲁棒性。
⚠️ 注意事项：
- 占位符编号必须为纯数字，不支持 {{id}} 或 {{name}} 等命名形式（如需命名映射，请改用对象键值对 + 更复杂的正则）；
- 若数组长度小于最大占位符编号，务必添加边界检查（如示例中的空值合并），否则可能引入 undefined；
- 正则全局标志 g 不可省略，否则仅替换首个匹配项。
该方案简洁、高效、无外部依赖，适用于大多数序号驱动的字符串模板填充需求。掌握此模式后，还可轻松扩展为支持嵌套占位符、条件替换或异步值加载等进阶场景。
