本文主要是介绍数值千分位，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);
}测试数据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，一起学习。
这篇关于数值千分位，6种方法和性能对比的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
