为什么JavaScript中用replace实现首字母转大写会在部分场景失效

问题原因 #

代码的执行顺序与replace匹配源的取值逻辑不匹配，是导致异常的核心原因：

• JS代码执行顺序从左到右，你先对原字符串做了toLowerCase()转全小写处理，再调用replace方法
• replace方法的查找参数用的是原始str的首字符str[0]，不是转小写之后的字符串首字符

场景2执行步骤拆解 #

1. 原始变量str = 'Variable'，因此str[0]的值为大写的'V'，str[0].toUpperCase()结果也是'V'
2. 先执行str.toLowerCase().trim()，得到的中间结果是全小写字符串'variable'
3. 执行replace逻辑时，是在全小写的'variable'中查找大写的'V'，无匹配结果，因此替换不生效，最终返回全小写的'variable'

场景1正常的原因 #

原始str = 'variable'，str[0]是小写的'v'，转全小写后的字符串中仍存在小写'v'，因此replace可以匹配到并完成替换，得到预期结果。

正确实现方式 #

推荐两种无兼容问题的首字母大写实现：

1. 字符串拼接写法

const trimStr = str.trim()
const result = trimStr.charAt(0).toUpperCase() + trimStr.slice(1).toLowerCase()

2. 正则替换写法

const result = str.trim().toLowerCase().replace(/^./, match => match.toUpperCase())

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