Vue2用正则实现数字千分位格式化报错replace未定义如何解决

这个Cannot read property 'replace' of undefined错误的本质，是你模板表达式中访问的item.price[0]值为undefined，对非字符串的空值调用字符串方法replace才会触发类型异常。此前逻辑能正常运行，只是因为历史上所有渲染场景里，item.price都是结构固定的非空数组、首元素为可操作的字符串，没有遇到数据缺失的情况。

• 核对异常页面加载的RANDOM_PRODUCTS原始数据结构：检查是否存在部分商品对象缺失price字段、price值为null/undefined、price是空数组（空数组取索引0自然返回undefined）的情况
• 排查数据时序问题：如果RANDOM_PRODUCTS不是硬编码的静态常量，而是依赖接口返回后才赋值的，当Vue首次渲染时接口尚未返回、对应字段还没完成初始化，就会触发访问空值的报错
• 校验字段类型适配：你当前的逻辑默认item.price[0]是字符串类型，如果实际返回的price值是数字类型，就算没有空值，调用数字类型的replace方法本身也会抛出异常

不要在模板里直接写多层嵌套的硬取值，加上全链路空值兜底即可解决问题，常见的改法有两种：

1. 直接在模板表达式里加判断兜底
   如果项目用的Vue2版本支持可选链语法，直接替换原有的表达式即可：

   {{ (item?.price?.[0] ?? 0).toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ') }}
   

   如果是不支持可选链的老版本Vue2编译环境，就换成三元判断的写法：

   {{ item && item.price && item.price[0] ? item.price[0].toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ') : '0' }}
   

2. 抽成公共格式化方法（更易维护）
   把千分位逻辑从模板里抽离到methods中，统一做空值和类型兼容，避免每个用到的地方重复写判断：

   methods: {
     formatThousandth(val) {
       // 统一处理空值、非字符串类型的兼容
       if (val === undefined || val === null || val === '') return '0'
       return val.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ')
     }
   }
   

   模板内调用时不用再写多层判断：

   <span class="name_item_price">{{ formatThousandth(item.price && item.price[0]) }}</span>
   

小提示：你当前使用的正则仅适配纯整数场景，如果后续需要支持带小数的价格，可以调整正则逻辑，避免把分隔符错误插入小数部分。

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