JS格式化数字(每三位加逗号)的方法总结

 更新时间:2022年06月27日 09:50:32   作者:小旭2021  
这篇文章总结了JS格式化数字(每三位加逗号)的几种方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

方法一

function toThousands(num) {
    var result = [ ], counter = 0;
    num = (num || 0).toString().split('');
    for (var i = num.length - 1; i >= 0; i--) {
        counter++;
        result.unshift(num[i]);
        if (!(counter % 3) && i != 0) { result.unshift(','); }
    }
    return result.join('');
}

方法一的执行过程就是把数字转换成字符串后,打散为数组,再从末尾开始,逐个把数组中的元素插入到新数组(result)的开头。每插入一个元素,counter就计一次数(加1),当counter为3的倍数时,就插入一个逗号,但是要注意开头(i为0时)不需要逗号。最后通过调用新数组的join方法得出结果。
方法一比较清晰易懂,也在项目中用了一段时间。但是直觉告诉我,它的性能并不好。

 方法二

function toThousands(num) {
    var result = '', counter = 0;
    num = (num || 0).toString();
    for (var i = num.length - 1; i >= 0; i--) {
        counter++;
        result = num.charAt(i) + result;
        if (!(counter % 3) && i != 0) { result = ',' + result; }
    }
    return result;
}

方法二是方法一的改良版,不把字符串打散为数组,始终对字符串操作。

方法三 - 循环匹配末尾的三个数字

function toThousands(num) {
    var num = (num || 0).toString(), re = /\d{3}$/, result = '';
    while ( re.test(num) ) {
        result = RegExp.lastMatch + result;
        if (num !== RegExp.lastMatch) {
            result = ',' + result;
            num = RegExp.leftContext;
        }
        else {
            num = '';
            break;
        }
    }
    if (num) { result = num + result; }
    return result;
}

方法三是完全不同的算法,通过正则表达式循环匹配末尾的三个数字,每匹配一次,就把逗号和匹配到的内容插入到结果字符串的开头,然后把匹配目标(num)赋值为还没匹配的内容(RegExp.leftContext)。此外,还要注意:

1.如果数字的位数是3的倍数时,最后一次匹配到的内容肯定是三个数字,但是最前面的三个数字前不需要加逗号;
2.如果数字的位数不是3的倍数,那num变量最后肯定会剩下1到2个数字,循环过后,要把剩余的数字插入到结果字符串的开头。

虽然方法三减少了循环次数(一次循环处理三个字符),但由于用到了正则表达式,一定程度上增加了消耗。

方法四 - 方法三的字符串版

function toThousands(num) {
    var num = (num || 0).toString(), result = '';
    while (num.length > 3) {
        result = ',' + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
    }
    if (num) { result = num + result; }
    return result;
}

事实上,截取末尾三个字符的功能可以通过字符串类型的slice、substr或substring方法做到。这样就可以避免使用正则表达式。

 方法五 - 分组合并法

function toThousands(num) {
    var num = (num || 0).toString(), temp = num.length % 3;
    switch (temp) {
        case 1:
        num = '00' + num;
        break;
        case 2:
        num = '0' + num;
        break;
    }
    return num.match(/\d{3}/g).join(',').replace(/^0+/, '');
}

先把数字的位数补足为3的倍数,通过正则表达式,将其切割成每三个数字一个分组,再通过join方法添加逗号,最后还要把补的0移除。

方法六 - 懒人法

function toThousands(num) {
    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}

一直觉得这个格式化是可以通过一条正则表达式替换做出来的,但是需要用到断言等写法,无奈自己对这部分不太熟。Google了一下,还真找到了这么一条正则表达式,这估计是代码最短的实现。

到此这篇关于JS格式化数字的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • layui异步加载table表中某一列数据的例子

    layui异步加载table表中某一列数据的例子

    今天小编就为大家分享一篇layui异步加载table表中某一列数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Vue使用Canvas绘制圆与半圆的示例详解

    Vue使用Canvas绘制圆与半圆的示例详解

    在 Canvas 中,基本图形包括直线图形和曲线图形,在我们的工作中,经常在统计图中会看到有饼状图等这样的圆弧图形,当然绘制曲线图形那么我们要知道曲线图形的绘制往往会涉及到曲线与弧线,所以本文就给大家介绍一下Canvas绘制圆与半圆的方法
    2023-08-08
  • 页面加载完毕后滚动条自动滚动一定位置

    页面加载完毕后滚动条自动滚动一定位置

    希望页面加载完毕后向左自动滚动一定位置,下面有个不错的方法可以轻松帮大家实现下
    2014-02-02
  • JS实现获取自定义属性data值的方法示例

    JS实现获取自定义属性data值的方法示例

    这篇文章主要介绍了JS实现获取自定义属性data值的方法,结合实例形式较为详细的分析了javascript针对自定义属性data的相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • 二维码图片生成器QRCode.js简单介绍

    二维码图片生成器QRCode.js简单介绍

    这篇文章主要为大家简单介绍了二维码图片生成器QRCode.js,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 微信小程序websocket聊天室的实现示例代码

    微信小程序websocket聊天室的实现示例代码

    这篇文章主要介绍了微信小程序websocket聊天室的实现示例代码,小程序本身对http、websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块。感兴趣的可以参考一下
    2019-02-02
  • 使用layui的router来进行传参的实现方法

    使用layui的router来进行传参的实现方法

    今天小编就为大家分享一篇使用layui的router来进行传参的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Javascript 链式作用域详细介绍

    Javascript 链式作用域详细介绍

    这篇文章主要介绍了Javascript 链式作用域详细介绍的相关资料,需要的朋友可以参考下
    2017-02-02
  • js中什么时候不能使用箭头函数

    js中什么时候不能使用箭头函数

    箭头函数是和我们工作密切相关的东西,本文主要介绍了js中什么时候不能使用箭头函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • javascript 二分法(数组array)

    javascript 二分法(数组array)

    扩展Array对象,为其添加二分法查找功能,提高查找效率。
    2010-04-04

最新评论