uni-app模板中不能直接调用toLocaleString()，需在computed中预处理并绑定；注意平台兼容性，低版本微信小程序和iOS Safari可能不支持分组参数。
uni-app模板里直接写toLocaleString()会报错
因为uni-app的WXML模板不支持调用JS方法，{{ price.toLocaleString() }}这种写法在小程序编译阶段就失败，H5可能显示为空或undefined。模板只允许简单表达式，不能带括号调用函数。
必须把格式化逻辑提前放到computed、methods或data中，再绑定到模板。比如在computed里定义一个formattedPrice，然后模板里用{{ formattedPrice }}。
- 别在
data里直接存格式化后的字符串——原始值一变，它不会自动更新 -
computed比methods更合适：响应式、无副作用、不重复计算 - 原始数据建议统一为
number类型，避免后端传回"1999.00"这种字符串导致toFixed出错
用toLocaleString()要注意平台兼容性
微信小程序基础库 2.27.0+ 才完整支持{ useGrouping: true }，低版本可能直接忽略参数，返回"1234567.89"而不是"1,234,567.89"；iOS Safari 对zh-CN locale 的支持也不稳定，有时回退成空格分隔。
简单场景可直接用：{{ (price || 0).toLocaleString('en-US') }}，但需加兜底：
computed: {
formattedPrice() {
const n = Number(this.price)
if (isNaN(n)) return '0'
// 微信小程序低版本 fallback 到正则
if (uni.getSystemInfoSync().platform === 'ios' && uni.getSystemInfoSync().SDKVersion < '2.27.0') {
return this.toThousands(n)
}
return n.toLocaleString('en-US')
}
}
- 传入字符串（如
"abc"）会导致返回原字符串，不报错但没效果 -
toLocaleString()不控制小数位数，要固定两位得组合：Number(price).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') - 负数天然支持，但
toFixed()对-0会返回"-0.00"，需额外判断
手写正则千分位函数必须处理边界情况
网上常见的/(\d)(?=(\d{3})+\.)/g在-1234567.89上会把负号吃掉，变成",234,567.89"；遇到"1e6"或空字符串也会崩。健壮写法要先转Number，再拆整数/小数部分，单独处理符号。
推荐这个已验证多端的版本：
function toThousands(num) {
if (num == null || num === '') return '0'
const n = Number(num)
if (isNaN(n)) return '0'
const [integer, decimal] = String(n).split('.')
const sign = n < 0 ? '-' : ''
const intPart = Math.abs(integer).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
return decimal ? `${sign}${intPart}.${decimal}` : `${sign}${intPart}`
}
- 正则
/\B(?=(\d{3})+(?!\d))/g只匹配数字内部位置，不影响小数点和负号，是安全的 - 不要用
parseInt()代替Number()，它会截断小数，parseInt("123.45")→123 - 后端可能返回
null或""，不校验直接toFixed()会得到"NaN.00"
全局过滤器在uni-app里基本不可用
uni-app 默认 Vue 2 模式下，filters在小程序平台编译时被完全忽略，H5 虽支持但跨端不一致；Vue 3 模式下filters已被官方移除。写{{ price | toThousands }}在微信小程序里大概率空白，甚至报filters is not defined。
如果项目已用过滤器，必须迁移：
- 删掉所有
Vue.filter()定义和{{ xxx | yyy }}模板写法 - 把逻辑封装成工具函数，放在
utils/format.js里，按需导入使用 - 需要响应式展示的，一律改用
computed；纯工具逻辑（如导出Excel）用methods或工具函数 - 检查
vueVersion配置，确认没误启 Vue 3 模式——否则连filters语法都解析不了
最常被忽略的是原始数据类型校验和负数边界，比如后端返回"-"或undefined，直接进正则会炸；还有小数点位置异常（如"123..45"）没过滤，导致split('.')拿到["123", "", "45"]。这些必须在格式化前清洗干净。
