给数字添加千分符

125 阅读2分钟

这是一个很常见的功能,当数据很大的时候,通常需要添加千分符让数字更加易读

Number有一个自带的api,叫做toLocaleString,可以用来快速给数字添加千分符。

使用方法如下:num.toLocaleString() => string.

233456.toLocaleString() => '233,456'
2334.4567.toLocaleString() => '233,4.456'

例子2,输出和我们期望不符,我们期望应该是‘233,4.4567’,这个是因为toLocaleString()方法默认保留三位小数,如果我们想保留更多的位数,可以进行配置。

toLocaleString接收两个参数,分别是locales和options,这两个参数都是可选参数,并不强制。

  1. locales,一般指的是不同的format规范, 比如en-US会给数字加逗号千分符, de-DE使用点作为千分符,逗号作为整数小数分隔符
  • 1223.456.toLocaleString('en-US') => 122,3.456
    
  • 1223.456.toLocaleString('de-DE') => 122.3,456
    
  1. Options,常用的配置是指定小数点后的位数,我们可以指定最少小数点后位数,最大小数点位数
  • 最少小数点位数(minimumFractionDigits): 如果指定小数点后最少有5位,那不足五位的部分会自动使用0补齐,比如:2.3.toLocaleString(undefined, {minimumFractionDigits: 5}) => 2.30000

  • 最大小数点位数(maximumFractionDigits), 默认是3位,如果超过3位,会四舍五入, 2.3456 => 2.346; 2.3452 => 2.345 我们可以通过这个参数改变默认值,2.3452.toLocaleString(undefined, {maximumFractionDigits: 5}) => 2.3452

    补充: 在Angular中,有一个Decimal Pipe也可以实现此功能,他的优势是可以直接在html中直接引用此pipe来添加千分位,基本使用方法其实和toLocaleString相似

    使用方法: Value | number: digitsInfo | locale, 图例digitalInfo使用默认值

    image.png

    digitsInfo的常用设置,参数名字和toLocaleString略有不同:

      minIntegerDigits: 小数点前最小的位数, 默认是1
      minFractionDigits: 小数点后的最小位数 默认是0
      maxFractionDigits: 小数点后的最大位数  默认是3