JS格式化数字|极客笔记

JS格式化数字

在前端开发中，经常会遇到需要格式化数字的情况，比如将数字格式化为千位分隔符形式，或者保留固定位数的小数等。本文将详细介绍如何使用JavaScript来实现数字的格式化。

使用内置方法toFixed()

JavaScript中的Number对象提供了一个内置方法toFixed()，可以用来将数字格式化为指定小数位数的字符串形式。例如：

let num = 12345.6789;
let formattedNum = num.toFixed(2);
console.log(formattedNum); // 输出 "12345.68"

在上面的示例中，我们将数字12345.6789格式化为保留两位小数的字符串形式”12345.68″。

需要注意的是，toFixed()方法返回的是一个字符串，如果想要继续进行数学运算，需要将其转换为数字类型：

let num = 12345.6789;
let formattedNum = Number(num.toFixed(2));
console.log(formattedNum); // 输出 12345.68

实现千位分隔符

有时候我们需要将数字格式化为千位分隔符形式，比如将1000格式化为”1,000″。我们可以自己实现一个函数来实现这个功能：

function formatNumberWithCommas(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

let num = 1234567;
let formattedNum = formatNumberWithCommas(num);
console.log(formattedNum); // 输出 "1,234,567"

上面的代码中，我们使用正则表达式来匹配数字的位置，然后在相应的位置插入逗号，从而实现数字的千位分隔符格式化。

使用Intl对象

除了自己实现格式化函数外，JavaScript还提供了Intl对象，可以用来格式化数字、日期等。下面是一个使用Intl对象格式化数字的示例：

let num = 1234567.89;
let formattedNum = new Intl.NumberFormat().format(num);
console.log(formattedNum); // 输出 "1,234,567.89"

在上面的示例中，我们使用Intl.NumberFormat()构造函数创建一个国际化对象，然后调用format()方法来格式化数字。

除了基本的数字格式化外，Intl对象还支持一些高级功能，比如指定语言、货币等。下面是一个示例：

let num = 1234567.89;
let options = {
    style: 'currency',
    currency: 'USD'
}
let formattedNum = new Intl.NumberFormat('en-US', options).format(num);
console.log(formattedNum); // 输出 "$1,234,567.89"

在上面的示例中，我们使用Intl对象来格式化数字为美元货币形式。