js中进行数字,超大金额(千位符)格式化处理

方法一:利用字符串提供的toLocaleString()方法处理,此方法最简单

var num = 1450068;
console.log(num.toLocaleString()) // 1,450,068

 

方法二:截取末尾三个字符的功能可以通过字符串类型的slice、substr或substring方法做到

/*
   slice() 方法可从已有的数组中返回选定的元素,截取数组的一个方法
*/
function toThousandsNum(num) {
       var num = (num || 0).toString(),
             result = '';

        while (num.length > 3) {
            //此处用数组的slice方法，如果是负数，那么它规定从数组尾部开始算起的位置
            result = ',' + num.slice(-3) + result;
            num = num.slice(0, num.length - 3);
        }
        // 如果数字的开头为0,不需要逗号
        if (num){
          result = num + result
        }
        return result;
    }

    console.log(toThousandsNum(000123456789123)) // 123,456,789,123

 

方法三:把数字通过toString，转换成字符串后，打散为数组，再从末尾开始，逐个把数组中的元素插入到新数组（result）的开头，每插入一个元素，counter就计一次数（加1），当counter为3的倍数时,利用取余的方式,就插入一个逗号，但是要注意开头（i为0时）不需要逗号。最后通过调用新数组的join方法得出结果

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('');
}
console.log(toThousands(236471283572983412)); // 236,471,283,572,983,420

 

方法四:不把字符串打散为数组，始终对字符串操作,下面的这种操作字符串的方式是对上面的改良

 

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;
}
console.log(toThousands(42371582378423))  // 42,371,582,378,423

方法五:正则表达式,此方法个人觉得比较难以理解,网上大牛写的

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

综上所述:数字千位符格式化的方式有很多种方式,当然个人觉得最简单粗暴的方法就是toLocalString()方法,即使数字开始是0,这个方法也自动帮我们处理了的,实际开发中,强烈建议用第一种方式最好,后面的方法仅次

有时候,往往在面试时会被问到,除了最简单的一种方式,还有没有别的方式,其他方法是有些烧脑壳的

结合第三方库的使用

当你觉得自己编写这种格式化方法比较繁琐的时候,总有好用的工具已经帮我们实现了的

• Numeral.js

• 官网及文档：numeraljs.com/

• GitHub：github.com/adamwdraper… 它是一个用于格式化和操作数字的JavaScript库

• 下载具体的文件:bootcdn下载或者github下载都可以 根据官方文档使用案例:直接使用即可

• 它也支持npm,在React,Vue等前端框架,甚至微信小程序里同样可以使用

 

<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script>

var string = numeral(1634600).format('0,0');
console.log(string); // 1,634,600