带逗号数字字符串转Number时报Cannot read property 'replace' of null错误

报错原因 #

报错Cannot read property 'replace' of null说明执行why.replace时，why的取值是null，和你后续观测到的prop返回字符串不冲突，通常是两个原因导致：

• 接口请求是异步操作，组件首次渲染/代码第一次执行时，接口还没返回结果，visitsPerPerson的初始值是null，这时候执行替换逻辑就会抛出错误，你后续在控制台看到的日志是接口返回、prop更新后的输出，不是报错那次执行的结果
• 控制台打印引用类型值时存在懒求值特性，如果你打印时变量是null，后续值更新后你展开控制台的打印结果，展示的会是更新后的值，容易造成观测误差

解决方案 #

方案1：用可选链加兜底逻辑（写法简洁）

let why = visitsPerPerson
console.log(typeof why)
// 变量为null/undefined时跳过replace执行，转换失败兜底为0，可根据需求调整兜底值
let noCommas = parseFloat(why?.replace(/,/g, '') ?? '') || 0
console.log(noCommas)

方案2：加前置类型判断

let why = visitsPerPerson
let noCommas = 0
// 只有确认值是字符串类型时才执行替换逻辑
if (typeof why === 'string') {
  noCommas = parseFloat(why.replace(/,/g, ''))
}
console.log(noCommas)

框架场景额外优化

如果你在React/Vue等框架中使用，可以直接给prop设置默认值为空字符串，从源头避免初始值为null的问题：

Vue 示例

props: {
  visitsPerPerson: {
    type: String,
    default: ''
  }
}

React 示例

const YourComponent = ({ visitsPerPerson = '' }) => {
  // 业务逻辑
}

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