数值千分位，6种方法和性能对比

大家好，欢迎来到IT知识分享网。

前提

我就喜欢一本正紧的瞎掰。 好了， 进入正文。

实现

如下有的方法，稍微改造，就可以变成更加通用的方法，比如不是添加,而是添加#等等。

数值转字符串遍历

function format_with_array(number) { 
    var arr = (number + '').split('.'); var int = arr[0].split(''); var fraction = arr[1] || ''; var r = ""; var len = int.length; int.reverse().forEach(function (v, i) { 
    if (i !== 0 && i % 3 === 0) { 
    r = v + "," + r; } else { 
    r = v + r; } }) return r + (!!fraction ? "." + fraction : ''); } 

substring

function format_with_substring(number) { 
    var arr = (number + '').split('.'); var int = arr[0] + ''; var fraction = arr[1] || ''; var f = int.length % 3; var r = int.substring(0, f); for (var i = 0; i < Math.floor(int.length / 3); i++) { 
    r += ',' + int.substring(f + i * 3, f + (i + 1) * 3) } if (f === 0) { 
    r = r.substring(1); } return r + (!!fraction ? "." + fraction : ''); } 

除法+求模

function format_with_mod(number) { 
    var n = number; var r = ""; var temp; do { 
    mod = n % 1000; n = n / 1000; temp = ~~mod; r = (n >= 1 ?`${ 
     temp}`.padStart(3, "0"): temp) + (!!r ? "," + r : "") } while (n >= 1) var strNumber = number + ""; var index = strNumber.indexOf("."); if (index > 0) { 
    r += strNumber.substring(index); } return r; } 

正则

function format_with_regex(number) { 
    var reg = /\d{1,3}(?=(\d{3})+$)/g; return (number + '').replace(reg, '$&,'); } function format_with_regex(number) { 
    var reg = /(\d)(?=(?:\d{3})+$)/g return (number + '').replace(reg, '$1,'); } 

toLocaleString

function format_with_toLocaleString(number, minimumFractionDigits, maximumFractionDigits) { 
    minimumFractionDigits = minimumFractionDigits || 2; maximumFractionDigits = (maximumFractionDigits || 2); maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits); return number.toLocaleString("en-us", { 
    maximumFractionDigits: maximumFractionDigits || 2, minimumFractionDigits: minimumFractionDigits || 2 }) } 

Intl.NumberFormat

function format_with_Intl(number, minimumFractionDigits, maximumFractionDigits) { 
    minimumFractionDigits = minimumFractionDigits || 2; maximumFractionDigits = (maximumFractionDigits || 2); maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits); return new Intl.NumberFormat('en-us', { 
    maximumFractionDigits: maximumFractionDigits || 2, minimumFractionDigits: minimumFractionDigits || 2 }).format(number) } 

性能

function getData(count) { 
    var data = new Array(count).fill(0).map(function (i) { 
    var rd = Math.random(); var r = rd * Math.pow(10, 10); if (rd > 0.5) { 
    r = ~~r; } return r }) return data; } function test(data, fn, label) { 
    var start = performance.now(); for (var i = 0; i < data.length; i++) { 
    fn(data[i]); } var time = performance.now() - start; message((fn.name || label) + ":" + time + "ms"); } function executeTest() { 
    var data = getData(+textCount.value); test(data, format_with_array); test(data, format_with_mod); test(data, format_with_substring); test(data, format_with_regex); test(data, format_with_toLocaleString); test(data, format_with_Intl); } function message(msg) { 
    var el = document.createElement("p"); el.innerHTML = msg; messageEl.appendChild(el); } 

测试数据50000

1. chrome 版本 74.0.3729.131（正式版本） （32 位）

format_with_array:59.13ms

format_with_mod:23.96ms

format_with_substring:44.04ms

format_with_regex:53.54ms

format_with_toLocaleString:1813.61ms

format_with_Intl:1973.45ms

2. 360极速浏览器11.0.2052.0
极速模式

format_with_array:63.30ms

format_with_mod:37.80ms

format_with_substring:41.40ms

format_with_regex:51.20ms

format_with_toLocaleString:3334.30ms

format_with_Intl:3485.80ms

兼容模式不支持 Array.fill Pass

3. 搜狗高速浏览器 8.5.10.30358

format_with_array:75.29ms

format_with_mod:35.47ms

format_with_substring:40.79ms

format_with_regex:49.86ms

format_with_toLocaleString:2418.04ms

format_with_Intl:2474.30ms

4. firefox 66.0.3

format_with_array:41.00ms

format_with_mod:25.00ms

format_with_substring:28.00ms

format_with_regex:43.00ms

format_with_toLocaleString:1799.00ms

format_with_Intl:2239.00ms

基本的结果都是一致的， 因为随机数不一样，结果也会偶尔不一致。

format_with_mod > format_with_substring > format_with_regex > format_with_array > format_with_toLocaleString > format_with_Intl

其中Intl.NumberFormat是有很大提升空间的，可以把实例缓存之类的。

当然，测试可能不严谨，问题不大，知道有这么几种思路就行，还有哪些思路呢？ 欢迎留言。

写在最后

如果你觉得不错，你的一赞一评就是我前行的最大动力。

技术交流群请到 这里来。
或者添加我的微信 dirge-cloud，一起学习。