uni-app不支持v-filter语法,过滤器需用函数调用或计算属性实现;推荐用replace(/1/g, '')提取纯数字,或parsefloat()安全获取浮点数,并注意处理全角数字。\d ↩

uni-app里过滤器不能直接用v-filter语法
uni-app不支持Vue 2的v-filter指令,也不像Vue 3那样有内置过滤器机制。所谓“过滤器”,实际是写在模板里的函数调用或计算属性。直接写{{ text | numberOnly }}会报错:Property or method "numberOnly" is not defined。
replace(/[^\d]/g, '')是最常用也最可靠的数字提取方式
正则/[^\d]/g表示“所有非数字字符”,全局替换为空字符串,能干净地留下纯数字串。注意别用/\D/g——虽然等价,但可读性差,且某些旧版iOS WebView对\D支持不稳定。
- 输入
"价格:¥123.45元"→ 输出"12345"(小数点也被去掉了) - 输入
"订单号#A7B8C9"→ 输出"789" - 如果要保留小数点,得用
replace(/[^\d.]/g, ''),但后续必须手动处理多个点、开头结尾点等问题
需要保留小数时,用parseFloat()比正则更安全
单纯提取“第一个合法数字”场景下,parseFloat()自动跳过前导空格和非数字字符,遇到首个小数点后继续解析,直到非数字字符为止,还天然防NaN:
-
parseFloat("总价:¥123.45元")→123.45 -
parseFloat("库存:-56件")→-56 -
parseFloat("无数据")→NaN,需配合isNaN()判断
别用parseInt()代替——它遇到小数点就截断,parseInt("123.45")结果是123,不是你想要的金额。
在computed或方法里封装,避免模板里重复写正则
模板里写{{ text.replace(/[^\d]/g, '') }}不仅难维护,还会因作用域问题导致this丢失(尤其在v-for中)。正确做法是封装成方法:
methods: {
extractNumber(str) {
return str ? str.replace(/[^\d]/g, '') : ''
},
extractFloat(str) {
return str ? parseFloat(str) || 0 : 0
}
}
然后模板里调用{{ extractNumber(item.desc) }}。注意:不要在computed里传参,那会破坏响应式依赖追踪。
真正容易被忽略的是中文全角数字(如“123”)——\d匹配不了,得额外加String.prototype.normalize('NFKC')转为半角再处理,否则线上用户粘贴带全角数字的文本时就会漏掉。











