千分位格式化 ---> 金额格式化
// 1000 ---> 1,000
// 10000 ---> 10,000
// 100000 ---> 100,000
// 1000000 ---> 1,000,000
目录
目标：如何实现千分位格式化？（你有几种方式实现）
方法一字符串的方式实现
function toThousands(num) {
var result = '', counter = 0;
num = (num || 0).toString();
for (var i = num.length - 1; i >= 0; i--) {
counter++;
result = num.charAt(i) + result;
if (!(counter % 3) && i != 0) { result = ',' + result; }
}
return result;
}或者：
function fn(str) {
let arr = str.toString().split('').reverse();
console.log("arr:", arr);
// [8, 7, 6, 5, 4, 3, 2, 1] // 876, 543, 21 ---> 12, 345, 678
let st = ""; // 用来接收数据
arr.forEach( (cv, i) => {
if(i !=0 && i%3 == 0) {
st = cv + ',' + st;
} else {
st = cv + st;
}
})
return st;
}
let str = 1234;
let s = fn(str);
console.log("s:", s); */
function fn(str) {
var arr = str.split('');
for(var i=arr.length-1; i>= 0; i-=3) {
if(i != arr.length-1) {
arr.splice(i+1, 0, ',');
}
}
console.log("arr:", arr);
let st = arr.join('');
console.log('st:', st);
}
let n = "12345678901";
fn(n);
方法二——正则版
function toThousands(num) {
return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}方法三——每次截取三位末尾字符串
function toThousands(num) {
var num = (num || 0).toString(), result = '';
while (num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if (num) { result = num + result; }
return result;
}
方法四——toLocaleString
| 1 |
|
测试结果
| 数字 | 执行50000次消耗的时间（ms） | |||
|---|---|---|---|---|
| 方法一 | 方法二 | 方法三 | 方法四 | |
| 1 | 28 | 231 | 24 | 27 |
| 10 | 37 | 199 | 25 | 28 |
| 100 | 46 | 214 | 24 | 27 |
| 1000 | 57 | 304 | 49 | 26 |
| 10000 | 65 | 293 | 49 | 27 |
| 100000 | 75 | 307 | 55 | 28 |
方法四性能最好.但我暂时不考虑使用,因为:
注意:使用方法四有2个问题:
1:要先把数字转化成字符串才能达到表格所示的消耗时间.直接操作数据效率会打折.
2.在华为的手机上有bug,并不会转化加逗号,还是原模原样展现.应该是机型太老旧问题,现在手机应该没问题,以后兼容没问题肯定首选.
方法二的测试结果告诉我们，代码长短跟性能高低没有关系。方法三的综合性能是最好的:
- 对比方法一，每次操作3个字符而不是1个字符，减少循环次数；
- 对比方法二，使用正则表达式，最浪费性能。
最后，选择了方法三作为最终的优化方案。