技术频道


JavaScript 中数字格式化

一、toString().replace(..) 方式:


最简单的方法之一是将 String.prototype.replace()function 与以下参数一起使用:

  • 正则表达式: (?=(\d{3})+(?!\d))
  • 重置价值: $1,

正则表达式只匹配一个数字,\d 后跟三个数字集 (?=(\d{3})+(?!\d))。然后将匹配的数字替换为 $1,。这里 $1 是一种特殊的替换模式,其中包含第一个带括号的子匹配字符串的值(在我们的情况下,它是匹配的数字)。

,(逗号)字符是我们的分隔符。也可以使用 . 格式获取数字,例如 XXX.XXX.XXX

注意:某些国家地区使用 .(dot - 点)作为千位的分隔符。

Number formatting in JavaScript 例子:

function formatNumber(num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

console.info(formatNumber(2665)) // 2,665
console.info(formatNumber(102665)) // 102,665
console.info(formatNumber(111102665)) // 111,102,665

该方法也适用于小数(浮点数):

console.info(formatNumber(1240.5)) // 1,240.5
console.info(formatNumber(1000240.5)) // 1,000,240.5

JavaScript 千分位符用 dot - 点的坑:


使用时必须小心 .(dot - 点)作为千分位分隔符。小数点在 JavaScript 中始终以点字符表示。因此,使用点作为分隔符可以为以下结果

1240.5 -> 1.240.5
1000240.5 -> 1.000.240.5

JS 货币格式:


此方法稍作修改,也可以用于货币格式设置,例如:

function currencyFormat(num) {
  return '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

对于货币格式,JavaScript 为了保持精度,可以用 Number.prototype.toFixed() 将数字转换为字符串,使其始终具有两位十进制数字,如果需要为其他国家/地区设置货币格式,则需要对 currencyFormat 方法进行一些修改,比如:

function currencyFormatDE(num) {
  return (
    num
      .toFixed(2) // always two decimal digits
      .replace('.', ',') // replace decimal point character with ,
      .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + ' €'
  ) // use . as a separator
}

console.info(currencyFormatDE(1234567.89)) // output 1.234.567,89 €

二、toLocaleString() 方式:


toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。新的 locales 和 options 参数让应用程序可以指定要进行格式转换的语言,并且定制函数的行为。在旧的实现中,会忽略 locales 和 options 参数,使用的语言环境和返回的字符串的形式完全取决于实现方式。

在没有指定区域的基本使用时,返回使用默认的语言环境和默认选项格式化的字符串:

var number = 3500;

console.log(number.toLocaleString()); // Displays "3,500" if in U.S. English locale

JavaScript 千分位格式化(逗号)扩展阅读:



发表评论