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;
}

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1193.html

转载时须注明出处及本声明