JavaScript数值千分位格式化的方法和性能

瞎掰的前提

前端嘛，经常处理数值和时间。所以数值和时间的格式化少不了。

最近一直在面试前端，就出了一个如何给数值添加千分位的面试题。

至于答案，我一直都有一种标准，一是基于你现有的知识可以实现，二是超出你知识。

有人说，不就一个千分位，分分钟解决你，正则万岁。没错，正则很帅，那么性能呢？

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

实现

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

数值转字符串遍历

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 = "";

    do {

        mod = n % 1000;

        n = n / 1000;

        r = ~~mod + (!!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)

}

性能

测试地址：千分位性能测试

准备性能测试的代码, 为了测试带小数位和不带小数位，在getData的时候，如果随机值大于0.5, 将去除小数位。

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

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

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

搜狗高速浏览器 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

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是有很大提升空间的，可以把实例缓存之类的。

巴特西