JavaScript中如何将字符串占位符按数组内容依次对应替换？

解决方案 #

你之前的写法是对replaceAll的回调参数理解有误，该回调的第一个入参是匹配到的子串，而非匹配项的序号，且原生replace类API没有直接提供匹配序号的参数，我们可以自行维护计数实现需求，下面是几种最优实现：

1. 计数器方案（最推荐，性能最优）

仅需维护一个自增的索引变量即可，没有额外的数组拆分合并开销：

let matchIndex = 0;
const result = text?.replaceAll('___', () => blankData[matchIndex++] ?? '___');

这里加?? '___'是做边界兜底：如果占位符数量多于数组元素时，会保留原占位符，避免返回undefined。

2. 数组shift方案（无需额外变量）

如果不想单独声明索引变量，可以配合全局正则和数组的shift方法实现，注意如果不想修改原blankData数组，可以先做一次浅拷贝：

// 不修改原数组的写法：const tempArr = [...blankData]，替换下面的blankData为tempArr即可
const result = text?.replace(/___/g, () => blankData.shift() ?? '___');

3. 优化后的split方案

你之前的split写法可以用reduce优化，不需要手动pop处理最后一项：

const result = text.split('___').reduce((prev, curr, index) => {
  return prev + curr + (blankData[index] ?? '');
}, '');

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