JS如何用数组按顺序替换字符串中多个:id占位符

问题原因 #

你的代码未生效的核心原因是：JavaScript 字符串为不可变类型，String.replace() 方法不会修改原字符串，只会返回替换后的新字符串。你在 forEach 第二次及之后的迭代中没有把替换结果重新赋值给 newStr，导致每次都是在第一个替换完成的字符串上做无效操作，最终只有第一个 :id 被替换。

修改方案 #

1. 基于原有 forEach 逻辑修改

只需要给后续替换的结果加赋值即可，同时可以省去判断newStr是否为undefined的冗余逻辑：

const injectPathVariables = (
  target: string,
  ids: string[]
): string => {
  let newStr = target;
  ids.forEach(id => {
    newStr = newStr.replace(':id', id);
  });
  return newStr;
};

2. 更简洁的 reduce 实现

这种需要迭代累积结果的场景，用数组reduce方法逻辑更清晰：

const injectPathVariables = (target: string, ids: string[]): string => 
  ids.reduce((prevStr, currentId) => prevStr.replace(':id', currentId), target);

两种写法的输出都符合预期：输入target: 'users/:id/games/:id/server/:id', ids: ['123', '456', '789']时，会返回'users/123/games/456/server/789'。

可选边界处理 #

如果要兼容ids数量和字符串中:id数量不匹配的场景，可以加额外校验避免出现未替换的占位符：

const injectPathVariables = (target: string, ids: string[]): string => {
  const result = ids.reduce((prevStr, currentId) => prevStr.replace(':id', currentId), target);
  // 存在未替换的占位符时可根据业务需求选择清空、抛错或者保留
  if (result.includes(':id')) {
    console.warn('路径占位符数量大于传入的id数量，剩余占位符将被清空');
    return result.replaceAll(':id', '');
  }
  return result;
};

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