如何用数组元素依次替换字符串中重复出现的指定字符？

嘿，我太懂你遇到的这个坑了！用split('?').join(arr)之所以不行，是因为join()会把整个数组直接转成逗号分隔的字符串，然后用这个串去填充每个拆分后的间隙，自然就出现了每个问号位置都塞了b,d,f的尴尬情况，完全不是我们想要的“依次替换”效果。

下面给你两个简单好用的解决方案：

方案一：用正则replace的回调函数（最简洁） #

String.replace()的第二个参数可以是个函数，每次匹配到目标字符时，我们就让它从数组里取下一个元素来替换，完美契合需求：

const str = 'a ? c ? e ?';
const arr = ['b', 'd', 'f'];
let replaceIndex = 0;

const result_str = str.replace(/\?/g, () => {
  // 每匹配到一个问号，就返回数组当前索引的元素，然后索引自增
  return arr[replaceIndex++];
});

console.log(result_str); // 输出：'a b c d e f'

额外优化：处理数组元素不足的情况 #

如果你的问号数量比数组元素多，上面的代码会把多余的问号替换成undefined，可以加个小判断避免这种问题：

const result_str = str.replace(/\?/g, () => {
  return arr[replaceIndex++] || ''; // 没有对应元素时替换为空字符串
});

方案二：拆分后遍历拼接（逻辑更直观） #

要是你觉得正则有点抽象，也可以先把字符串按问号拆成片段，再逐个拼接数组元素：

const str = 'a ? c ? e ?';
const arr = ['b', 'd', 'f'];
const strParts = str.split('?');
let result_str = '';

for (let i = 0; i < strParts.length; i++) {
  // 先拼接拆分出来的字符串片段
  result_str += strParts[i];
  // 只要还有未使用的数组元素，就把它拼进去
  if (i < arr.length) {
    result_str += arr[i];
  }
}

console.log(result_str); // 输出：'a b c d e f'

这个方法的逻辑特别直白：拆分后得到的数组是['a ', ' c ', ' e ', '']，遍历的时候把每个片段和对应的数组元素依次拼接，最后就得到了目标字符串。

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