欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue自定义过滤器格式化数字,每三位加一个逗号

程序员文章站 2024-03-15 15:41:29
...

自己在开发过程中,前端需要对一些表示金额的数值进行处理,每隔三位数字,用逗号分隔开。记录一下自己的做法。

(1) 自定义格式化方法
Vue自定义过滤器格式化数字,每三位加一个逗号

源代码如下

/* 数字金额逢三加, 比如 123,464.23 */
export function numberToCurrency(value) {
  if (!value) return '0.00'
  // 将数值截取,保留两位小数
  value = value.toFixed(2)
  // 获取整数部分
  const intPart = Math.trunc(value)
  // 整数部分处理,增加,
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // 预定义小数部分
  let floatPart = '.00'
  // 将数值截取为小数部分和整数部分
  const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // 有小数部分
    floatPart = valueArray[1].toString() // 取得小数部分
    return intPartFormat + '.' + floatPart
  }
  return intPartFormat + floatPart
}

(2) 引入格式化方法,并且定义过滤器
Vue自定义过滤器格式化数字,每三位加一个逗号
(3)使用过滤器

Vue自定义过滤器格式化数字,每三位加一个逗号

相关标签: