效果
方法一、toLocaleString,默认保留三位小数
JavaScript 1.5(于 1999 年推出)中实现的,基本上所有主要浏览器都支持
let num = '15234235245223';
console.log(Number(num).toLocaleString()); // '15,234,235,245,223'
方法二、正则表达式 + replace函数,保留两位小数
let num = '15234235245223';
function numberToThousands1(str: string | number) {
if (str)
return Number(str)
.toFixed(2)
.toString()
.replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
}
console.log(numberToThousands1(num)); // '15,234,235,245,223.00'
方法三、正则表达式 + replace函数,保留两位小数(推荐)
let num = '15234235245223';
function numberToThousands2(str: string | number) {
if (str)
return Number(str)
.toFixed(2)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(numberToThousands2(num)); // '15,234,235,245,223.00'
方法四、Intl.NumberFormat,默认保留三位小数
原生js功能。支持 IE11、Edge、最新的 Safari、Chrome、Firefox、Opera、iOS 上的 Safari 和 Android 上的 Chrome。
可以把普通的数字,转换成不同的货币和格式样式字符串。
let num = '15234235245223';
function numberToThousands3(str: string | number) {
if (str)
return new Intl.NumberFormat('en-US').format(Number(str))
}
console.log(numberToThousands3(num)); // '15,234,235,245,223'
方法五、JS实现
function paddingNum(inputNum: number) {
let flag = inputNum > 0 ? true : false;
let numArr = Math.abs(inputNum).toString().split('.');
let right = numArr[1] ? '.' + numArr[1] : ''; // 小数点右边的数字
let left = numArr[0]; // 小数点左边的数字
let temp = '';
while (left.length > 3) {
// str.slice(start, end); 截取字符串,返回截取的字符串,end取不到
temp = ',' + left.slice(-3) + temp;
left = left.slice(0, left.length - 3);
}
return flag ? left + temp + right : '-' + left + temp + right;
}
console.log(paddingNum(2, 3)); // '2'
console.log(paddingNum(1234.56)); // '1,234.56'
console.log(paddingNum(123456789)); // '123,456,789'
console.log(paddingNum(-987654.3)); // '-987,654.3'
参考: