今天介绍一种我已经使用了很长时间的,针对现代浏览器的金额文本格式化方法。

这种方法使用了 Intl.NumberFormat (MDN) 这个API。

以人民币为例

const amountFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'CNY' })

/**
 * 1234567.12 to 1,234,567.12
 * @param amount
 */
export const formatAmount = (amount: number): string => {
  if (typeof amount === 'undefined') {
    return ''
  }
  return amountFormatter.format(amount).substr(3)
}

formatAmount('1234567.12') // => 1,234,567.12

通过上面这个方法,就可以获取常见的人民币展示形式 1,234,567.12

如果你需要保留人民币符号,那就是下面这个方法

amountFormatter.format(amount).substr(2)
// 1234567.12 to ¥1,234,567.12

事实上 format 方法输出的字符串是 CN¥1,234,567.12 ,因此你可以根据自己的需要进行调整。

通过调整 locale 参数和 options 还可以组合出更多形式,尽情探索吧。