JavaScript中Number对象的toFixed() 方法详解

JavaScript中Number对象的toFixed() 方法详解

toFixed() 方法是JavaScript中Number对象的一个方法，可以将数字保留指定位数的小数。在本文中，我们将详细介绍这个方法的用法和示例，以便帮助读者更好地理解。

语法

toFixed() 方法的语法如下：

number.toFixed([digits])

其中，digits 参数表示保留的小数位数，可以是0到20之间的整数。如果省略 digits 参数，则默认取为0。

下面是一个例子：

const num = 3.14159265358979323846;
num.toFixed(); // "3"
num.toFixed(2); // "3.14"
num.toFixed(4); // "3.1416"
num.toFixed(10); // "3.1415926536"

注意事项

值得注意的是，toFixed() 方法返回的是一个字符串类型的值，而不是数字类型的值。这一点需要特别注意，因为如果将其与数字类型的值计算，会出现一些奇怪的结果。

const num = 3.14159;
const str = num.toFixed(2); // "3.14"
console.log(str + 1); // "3.141591"
console.log(str - 1); // 2.14

由于 toFixed() 返回的是字符串类型，所以在计算时会隐式地将其转换成数字类型的值，这样就解释了上面的两个奇怪的结果。

示例1：计算商品价格

假设我们正在开发一个电商网站，在商品详情页中需要显示商品的价格。假设商品的价格为21.99元，我们可以使用 toFixed() 方法将其保留两位小数，并将其展示在页面上。

const price = 21.99;
const formattedPrice = price.toFixed(2); // "21.99"
console.log("该商品的价格为：" + formattedPrice + "元");

这样我们就可以将商品的价格展示在页面上了，同时保证小数部分的精度。

示例2：计算平均值

假设我们需要计算一组数据的平均值。如果不加以处理，计算结果可能会出现很多小数，影响结果的可读性。因此，我们可以使用 toFixed() 方法将平均值保留一定的小数位数。

// 计算平均值
const nums = [3.4, 5.2, 7.8, 9.1, 1.2];
const sum = nums.reduce((a, b) => a + b);
const avg = sum / nums.length;

// 保留两位小数，输出平均值
const formattedAvg = avg.toFixed(2);
console.log("该数据的平均值为：" + formattedAvg);

这样，我们就可以将计算结果保留到小数点后两位，并将其展示在页面上。