React.js字符串多令牌替换报错及无循环解决方案咨询

问题重现 #

以下JSX代码用于替换提示文本中的令牌，但运行时出现TypeError: Cannot read properties of undefined (reading 'replace')错误：

const prompt = '[a]_[b]_[c]'
const tokens = ['[a]','[b]','[c]']
const values = ['A', 'BBB', 'CC']
const promptRes = tokens.reduce( (prevText, curText, i) => {
    prevText = prevText.replace(curText, values[i]) 
}, prompt)
console.log(promptRes) // Expected: 'A_BBB_CC'  

报错信息：

prevText = prevText.replace(curText, values[i])
^
TypeError: Cannot read properties of undefined (reading 'replace')

1. 错误原因 #

reduce方法要求回调函数必须返回每一轮处理后的累积值。原代码中仅修改了prevText变量，但没有通过return将其返回给下一轮迭代。

第一次迭代时，prevText初始值为传入的prompt字符串，处理完成后无返回值，导致第二轮迭代的prevText变为undefined，调用undefined.replace()自然触发类型错误。

2. 无循环的多令牌替换方案 #

方案一：固定令牌映射（适合令牌数量固定场景） #

直接创建令牌与值的映射表，结合正则表达式一次性替换所有匹配项：

const prompt = '[a]_[b]_[c]'
const tokenMap = {
  '[a]': 'A',
  '[b]': 'BBB',
  '[c]': 'CC'
}
// 匹配所有目标令牌的正则
const promptRes = prompt.replace(/\[a\]|\[b\]|\[c\]/g, match => tokenMap[match])
console.log(promptRes) // 输出: 'A_BBB_CC'

方案二：动态生成替换规则（适合令牌数量不固定场景） #

通过Object.fromEntries构建映射表，动态生成正则表达式，无需手动编写匹配规则：

const prompt = '[a]_[b]_[c]'
const tokens = ['[a]','[b]','[c]']
const values = ['A', 'BBB', 'CC']

// 构建令牌-值映射表
const tokenMap = Object.fromEntries(tokens.map((token, idx) => [token, values[idx]]))
// 转义令牌中的正则特殊字符，生成匹配所有令牌的正则
const escapedTokens = tokens.map(token => token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
const regex = new RegExp(escapedTokens.join('|'), 'g')

// 一次性替换所有令牌
const promptRes = prompt.replace(regex, match => tokenMap[match])
console.log(promptRes) // 输出: 'A_BBB_CC'

以上方案均无显式循环（替换逻辑由浏览器引擎内部处理），符合JSX中禁止使用循环的要求。

内容的提问来源于stack exchange，提问作者Lewis C.