React大屏显示项目需要格式化数字,千分位处用逗号隔开数字。
// 格式化数字,千分位
export function formatNumber(num: number) {
return num.toLocaleString('en-US');
}
显示效果如下所示:
接下来在做大屏项目的过程中遇到了数字过大导致长度过长溢出显示框的问题:
讨论了一下决定修改一下显示方法,不知道以后会不会用到,现在这里记一下:
eg:123456789 -> 1.234亿
1234567890000 ->12,345亿
//大屏显示防止数据过长通用
export function formatData(num: number) {
let t;
let uni = '';
if (num > 100000000) {
num = num / 100000000;
uni = '亿';
} else if (num > 10000) {
num = num / 10000;
uni = '万';
}
t = Number(num.toPrecision(4));
const n = t.toLocaleString('en-US');
// console.log('nnn', num);
t = n + uni;
return t;
}
====================================================================================
需求又改了 = =,强制保留3位小数。最后手动写了一个逗号分隔函数。
//大屏显示防止数据过长通用
export function formatData(num: number) {
if (num == 0) return 0;
let t = num.toFixed(3);
const idx = t.indexOf('.');
console.log('t', t, 'idx', idx);
for (let i = idx; i > 0; i -= 3) {
if (i != idx) {
const arr = t.split('');
arr.splice(i, 0, ',');
t = arr.join('');
}
}
return t;
}