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

前提

前端嘛，经常处理数值和时间。所以数值和时间的格式化少不了。
最近一直在面试前端，就出了一个如何给数值添加千分位的面试题。

至于答案，，一是基于你现有的知识实现，二是知识面。
有人说，不就一个千分位，分分钟解决你，正则万岁。没错，正则很帅，那么性能呢？

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

实现

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

数值转字符串遍历

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)
}

性能

测试地址：千分位性能测试
准备性能测试的代码, 为了测试带小数位和不带小数位，在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);
}