格式化数字在JavaScript中的应用

当我们处理金融或时间数据时，很常见需要格式化数字。JavaScript提供了多种方法来格式化数字，本文将以这种格式1,234.56为例，介绍其中的几种。

toLocaleString()

toLocaleString()是一个内置函数，可以把数字转化为本地格式的字符串。

const number = 1234.56;
console.log(number.toLocaleString()); // "1,234.56"

toLocaleString()函数的默认行为是使用本地格式，这意味着输出结果可能因不同的地区而异。如果要强制使用特定区域的格式，可以在函数的参数中指定语言标记。

const number = 1234.56;
console.log(number.toLocaleString('en-US')); // "1,234.56"
console.log(number.toLocaleString('de-DE')); // "1.234,56"

Intl.NumberFormat

Intl.NumberFormat是一个ECMAScript国际化API，可以格式化数字和货币。以下是一个简单的使用例子：

const number = 1234.56;

const format = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

console.log(format.format(number)); // "$1,234.56"

在上面的例子中，我们使用了'USD'货币类型并将数字格式化成货币格式。

除了货币格式外，我们还可以使用样式options生成百分比, 科学计数法等等。下面是一些实例：

const number = 0.12345;

const percent = new Intl.NumberFormat('en-US', {
  style: 'percent'
});

const scientific = new Intl.NumberFormat('en-US', {
  notation: 'scientific'
});

console.log(percent.format(number)); // "12.345%"
console.log(scientific.format(number)); // "1.2345E-1"

更多的使用案例可以查看MDN文档。

自制格式化函数

如果你想自己实现数字格式化的函数，你可以使用正则表达式将数字转化成字符串，并插入必要的逗号和小数点。

function formatNumber(number, decimals = 2, decPoint = '.', thousandsSep = ',') {
  decimals = Math.abs(decimals);
  decimals = isNaN(decimals) ? 2 : decimals;

  const negativeSign = number < 0 ? "-" : "";

  const i = parseInt(number = Math.abs(+number || 0).toFixed(decimals), 10) + "";
  const j = i.length > 3 ? i.length % 3 : 0;

  return negativeSign + (j ? i.substr(0, j) + thousandsSep : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousandsSep) + (decimals ? decPoint + Math.abs(number - i).toFixed(decimals).slice(2) : "");
}

console.log(formatNumber(1234.56)); // "1,234.56"
console.log(formatNumber(-1234.56, 3, '.', ' ')); // "-1 234.560"

在这个功能函数中，我们允许用户自定义小数点和千位分隔符，并可以指定小数位数，也可以默认2位。 此外，为了正确地输出负数，我们首先检查实参的符号并将其保存，最后在结果前面添加负号。