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是有很大提升空間的,可以把例項快取之類的