js金额数字格式化

简介: 本文介绍了两种实现数字格式化的方法:字符串操作与正则表达式。首先,通过递归地在每三位数字间插入逗号来格式化整数。接着,扩展该功能以支持自定义小数位数及分隔符,适用于更广泛的场景。最后,展示了如何利用正则表达式简化上述过程,实现相同的功能。

一.使用字符串操作方法格式化

①整数金额格式化:

function moneyFormat (num) {
    const len = num.length
    return len <= 3 ? num : this.moneyFormat(num.slice(0, len - 3)) + ',' + num.slice(len - 3, len)
}
var num = 12345000
var res = moneyFormat(String(num))
console.log('result:', res) // '12,345,000'

②自定义保留decimal位小数,并使用split分隔符的数字格式化:

function moneyFormat (num, decimal = 2, split = ',') {
  /*
    parameter:
    num:格式化目标数字
    decimal:保留几位小数,默认2位
    split:千分位分隔符,默认为,
    moneyFormat(123456789.87654321, 2, ',') // 123,456,789.88
  */
  function thousandFormat (num) {
    const len = num.length
    return len <= 3 ? num : thousandFormat(num.slice(0, len - 3)) + split + num.slice(len - 3, len)
  }
  if (isFinite(num)) { // num是数字
    if (num === 0) { // 为0
      return num.toFixed(decimal)
    } else { // 非0
      var res = ''
      var dotIndex = String(num).indexOf('.')
      if (dotIndex === -1) { // 整数
        if (decimal === 0) {
          res = thousandFormat(String(num))
        } else {
          res = thousandFormat(String(num)) + '.' + '0'.repeat(decimal)
        }
      } else { // 非整数
        // js四舍五入 Math.round():正数时4舍5入,负数时5舍6入
        // Math.round(1.5) = 2
        // Math.round(-1.5) = -1
        // Math.round(-1.6) = -2
        // 保留decimals位小数
        const numStr = String((Math.round(num * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal)) // 四舍五入,然后固定保留2位小数
        const decimals = numStr.slice(dotIndex, dotIndex + decimal + 1) // 截取小数位
        res = thousandFormat(numStr.slice(0, dotIndex)) + decimals
      }
      return res
    }
  } else {
    return '--'
  }
}
console.log('result:', moneyFormat(123456789.87654321)) // '123,456,789.88'

二.使用正则表达式格式化

①整数金额格式化:

function moneyFormat (num) {
      return String(num).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
}
var num = 12345000
var res = moneyFormat(num)
console.log('result:', res) // '12,345,000'

②自定义保留decimal位小数,并使用split分隔符的数字格式化:

function moneyFormat (num, decimal = 2, split = ',') {
  /*
    parameter:
    num:格式化目标数字
    decimal:保留几位小数,默认2位
    split:千分位分隔符,默认为,
    moneyFormat(123456789.87654321, 2, ',') // 123,456,789.88
  */
  if (isFinite(num)) { // num是数字
    if (num === 0) { // 为0
      return num.toFixed(decimal)
    } else { // 非0
      var res = ''
      var dotIndex = String(num).indexOf('.')
      if (dotIndex === -1) { // 整数
        if (decimal === 0) {
          res = String(num).replace(/(\d)(?=(?:\d{3})+$)/g, `$1${split}`)
        } else {
          res = String(num).replace(/(\d)(?=(?:\d{3})+$)/g, `$1${split}`) + '.' + '0'.repeat(decimal)
        }
      } else { // 非整数
        // js四舍五入 Math.round():正数时4舍5入,负数时5舍6入
        // Math.round(1.5) = 2
        // Math.round(-1.5) = -1
        // Math.round(-1.6) = -2
        // 保留decimals位小数
        const numStr = String((Math.round(num * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal)) // 四舍五入,然后固定保留2位小数
        const decimals = numStr.slice(dotIndex, dotIndex + decimal + 1) // 截取小数位
        res = String(numStr.slice(0, dotIndex)).replace(/(\d)(?=(?:\d{3})+$)/g, `$1${split}`) + decimals
      }
      return res
    }
  } else {
    return '--'
  }
}
console.log('result:', moneyFormat(123456789.87654321)) // '123,456,789.88'
相关文章
|
4月前
|
JavaScript
uni-app中关于格式化时间的js文件
uni-app中关于格式化时间的js文件
82 0
|
4月前
|
前端开发 JavaScript 算法
轻松实现数字格式化:JavaScript 中的千分位分隔技巧大揭秘
轻松实现数字格式化:JavaScript 中的千分位分隔技巧大揭秘
235 0
|
4月前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
2月前
|
JavaScript
js函数封装 —— 金额添加千分位分隔符
js函数封装 —— 金额添加千分位分隔符
28 2
|
3月前
|
JavaScript 前端开发
Notepad++如何格式化JS代码
Notepad++如何格式化JS代码
503 1
|
2月前
|
JavaScript
js 金额格式化——显示千位分隔符
js 金额格式化——显示千位分隔符
38 0
|
2月前
|
JavaScript 前端开发
js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、相关插件等
js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、相关插件等
76 0
|
4月前
|
JavaScript 前端开发
JavaScript 计算时间差并格式化输出
JavaScript 计算时间差并格式化输出
52 0
|
10月前
|
JavaScript API
js日期、经纬度格式化
js日期、经纬度格式化
67 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
69 2