uniapp 全局设置千位符

我们在页面上需要渲染数据的时候，例如：99999；需要按照千分位显示成方便阅读的格式99,999。
个人觉得最好的办法就是写一个过滤器，将所有的数据都用这个过滤器过滤一下。
因为涉及的数据比较多，我就将这个过滤器挂载到了全局，也可以在单独页面引入使用

1.main.js 全局方法

// 在 main.js 文件中直接写方法
Vue.filter('unitConverter', (value)=>{
  if (!value) return 0
  // 获取整数部分
  const intPart = Math.trunc(value)
  // 整数部分处理，增加,
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // 预定义小数部分
  let floatPart = ''
  // 将数值截取为小数部分和整数部分
  const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // 有小数部分
    floatPart = valueArray[1].toString() // 取得小数部分
    return intPartFormat + '.' + floatPart
  }
  return intPartFormat + floatPart
})

index.vue

<view>{{riskAll| unitConverter}}</view>

2.home.vue 单页面方法

filters:{
  unitConverter function(value){
    if (!value) return 0
    // 获取整数部分
    const intPart = Math.trunc(value)
    // 整数部分处理，增加,
    const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    // 预定义小数部分
    let floatPart = ''
    // 将数值截取为小数部分和整数部分
    const valueArray = value.toString().split('.')
    if (valueArray.length === 2) { // 有小数部分
      floatPart = valueArray[1].toString() // 取得小数部分
      return intPartFormat + '.' + floatPart
    }
    return intPartFormat + floatPart
  })
},

<view>{{riskAll| unitConverter}}</view>