JavaScript中str.replace()方法结果不符合预期，问题出在哪里？

示例代码 #

const str = 'test'
const newStr = str.replace(str[3],str[3].toUpperCase())
console.log(newStr) // 实际输出: 'Test'

const str2 = 'hello'
const newStr2 = str2.replace(str2[3],str2[3].toUpperCase())
console.log(newStr2) // 实际输出: 'heLlo'

问题描述 #

原本想通过str.replace()把字符串指定索引位置的字符转成大写，但结果和预期不符：

• 实际输出：'Test'、'heLlo'
• 预期输出：'tesT'、'helLo'

原因分析 #

核心问题在于String.replace()的第一个参数如果是普通字符串时，只会匹配并替换字符串中第一个出现的目标字符，而非你指定索引位置的那个字符。

比如第一个例子里，str = 'test'，str[3]是t，调用replace('t', 'T')时，方法会找到字符串里第一个t（也就是索引0的位置）替换成大写，所以得到'Test'，而不是替换索引3的t。

第二个例子str2 = 'hello'，str2[3]是l，replace('l', 'L')会替换第一个出现的l（索引2的位置），所以输出'heLlo'，而非索引3的l。

正确实现方式 #

如果要精准替换指定索引的字符，可以通过字符串拆分重组的方式实现：

function replaceAt(str, index, replacement) {
  return str.slice(0, index) + replacement + str.slice(index + 1)
}

// 测试
const str = 'test'
const newStr = replaceAt(str, 3, str[3].toUpperCase())
console.log(newStr) // 输出: 'tesT'

const str2 = 'hello'
const newStr2 = replaceAt(str2, 3, str2[3].toUpperCase())
console.log(newStr2) // 输出: 'helLo'

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