一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
如何把一个数字添加上千位分隔符，这是一道面试常考题，也是实际工作中经常遇到的问题，今天就分享一下用JS实现数字千位分隔的几种方式。
千位分隔符
千位分隔符，其实就是数字中的逗号。依西方的习惯，人们在数字中加进一个符号，以免因数字位数太多而难以看出它的值。所以人们在数字中，每隔三位数加进一个逗号，也就是千位分隔符，以便更加容易认出数值。 举个🌰
1000--->1,000千1000000--->1,000,000百万100000000--->100,000,000亿
实现方式
方法1
- 将数字转为字符串，将小数部分与整数部分分离
- 整数部分分隔为数组，并且反转
- 反转后的数组每隔3位添加
, - 添加完成后，再反转回来，拼接小数部分，完成格式化
代码
function thousandsSeparator(n: number): string {
const strSplit = n.toString().split(".");
const integer = strSplit[0].split("");
integer.reverse();
const decimal = strSplit[1];
const newInteger = [];
for (let i = 0; i < integer.length; i++) {
if (i % 3 === 0 && i !== 0) {
newInteger.push(",");
}
newInteger.push(integer[i]);
}
newInteger.reverse();
let s = newInteger.join("");
if (decimal) {
s += `.${decimal}`;
}
return s;
}
方法2
使用JS原生API toLocaleString 。
这是数字类型原型上一个方法(# Number.prototype.toLocaleString), 它的作用就是返回数字在特定语言环境下表示的字符串.作用很强大，兼容性也很好，详细的介绍小伙伴可以去点击连接。
代码
const number = 123456.789;
number.toLocaleString(); // => '123,456.789'
方法3
使用JS原生API Intl.NumberFormat
Intl.NumberFormat对象启用对语言敏感的数字格式
代码
const number = 3500;
console.log(new Intl.NumberFormat().format(number)); // → '3,500'
方法4
使用正则表达匹配的方式
function thousandsSeparator2(n: number): string {
const strSplit = n.toString().split(".");
const integer = strSplit[0];
const decimal = strSplit[1] || "";
return integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + decimal;
}
