做网站费用是什么,空白网站建设,代制作网站,四平做网站佳业前提
前端嘛#xff0c;经常处理数值和时间。 所以数值和时间的格式化少不了。 最近一直在面试前端#xff0c; 就出了一个如何给数值添加千分位的面试题。
至于答案#xff0c;#xff0c; 一是基于你现有的知识实现#xff0c; 二是知识面。 有人说#xff0c; 不就一…前提
前端嘛经常处理数值和时间。 所以数值和时间的格式化少不了。 最近一直在面试前端 就出了一个如何给数值添加千分位的面试题。
至于答案 一是基于你现有的知识实现 二是知识面。 有人说 不就一个千分位 分分钟解决你 正则万岁。 没错 正则很帅 那么性能呢
我就喜欢一本正紧的瞎掰。 好了 进入正文。
实现
如下有的方法稍微改造就可以变成更加通用的方法比如不是添加,而是添加#等等。
数值转字符串遍历
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一起学习。
