JavaScript 中 0.1 + 0.2 != 0.3：浮点数运算的陷阱

引言

在日常的 JavaScript 开发中，我们经常会面对一些看似简单的数学运算。然而，当我们执行 0.1 + 0.2 这样的操作时，很多人可能会感到困惑，因为预期的结果应该是 0.3，但实际上却是一个略微不同的值。这个现象是由于 JavaScript 中浮点数运算的特性导致的，本文将深入探讨这个问题的背后原因以及如何在开发中避免相关的陷阱。

为什么会发生这种情况？

在计算机中，浮点数是用二进制表示的，而不是十进制。由于这一事实，一些十进制小数可能无法精确地用二进制表示，从而导致在浮点数运算中产生舍入误差。JavaScript 使用的是 IEEE 754 标准来表示浮点数，这一标准采用二进制表示法，因此在某些情况下，十进制小数无法完全精确映射到二进制表示。

在具体到 0.1 + 0.2 的例子中，这两个数字在二进制中的表示并不是精确的。虽然它们在十进制下是简单的小数，但在二进制中，它们的精确表示是一个无限循环小数。由于计算机的存储和运算能力的限制，这样的无限循环小数无法被精确表示，因此就会引发舍入误差。

console.log(0.1 + 0.2); // 输出 0.30000000000000004

浮点数运算的挑战

1. 精度丢失

在 JavaScript 中，由于浮点数运算的不可避免的舍入误差，可能会导致精度丢失。这意味着在比较两个浮点数是否相等时，应该使用一些技巧，而不是直接使用相等运算符。

console.log(0.1 + 0.2 === 0.3); // 输出 false
console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON); // 输出 true

2. 运算顺序的影响

JavaScript 的浮点数运算还受到运算顺序的影响。由于浮点数的表示范围和精度有限，当进行多个浮点数的运算时，不同的运算顺序可能导致不同的结果。

console.log(0.1 + 0.2 + 0.3); // 输出 0.6000000000000001
console.log(0.3 + 0.2 + 0.1); // 输出 0.6

3. 解决方案：使用整数进行运算

为了避免浮点数运算的陷阱，一种常见的做法是将浮点数转换为整数进行运算，然后再将结果转换回浮点数。这可以通过乘以一个足够大的倍数来实现。

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 输出 0.3

如何在开发中避免问题？

在实际的开发中，我们可以采取一些策略来最小化浮点数运算带来的问题。

1. 使用整数进行运算

如前所述，将浮点数转换为整数进行运算是一种可行的解决方案。通过乘以一个足够大的倍数，我们可以避免舍入误差。

2. 使用专门的库

一些专门处理精确数学运算的库，如 Decimal.js 和 big.js，提供了更精确的十进制运算，可以在避免浮点数问题的同时保持较高的性能。

3. 使用 Number.EPSILON 进行比较

在比较浮点数是否相等时，应该使用一个很小的常量，例如 Number.EPSILON，而不是直接使用相等运算符。

console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON); // 输出 true

4. 注意运算顺序

在进行多个浮点数的运算时，应该注意运算顺序可能带来的不同结果。在关键的业务逻辑中，可以考虑重新排列运算的顺序，以最小化舍入误差的影响。

5.自定义向上向下取整

只要跟钱有关，那这个问题就必须得重视了，js中并没有针对精度保留向上向下的方法，当时我们可以利用原生的 Math.pow 和 Math.floor 二次封装，根据实际场景决定向上保留精度还是向下保留精度；

/**
 * 向下取整 例如：3.33333333 取3位，返回 3.333
 * num 原始值
 * precision 保留精度
 */
Math.floorPow = function(num, precision){
  // 根据保留精度放大 小数位
  let magnify =  Math.pow(10, precision);
  // 返回小于等于给定数字的 最大整数
  return Math.floor(num * magnify)/magnify;
}

/**
 * 向上取整 例如：3.33333333 取3位，返回 3.334
 * num 原始值
 * precision 保留精度
 */
Math.ceilPow = function(num, precision){
  // 根据保留精度放大 小数位
  let magnify =  Math.pow(10, precision);
  // 返回小于等于给定数字的 最大整数
  return Math.ceil(num * magnify)/magnify;
}

结语

JavaScript 中 0.1 + 0.2 不等于 0.3 的现象并非 bug，而是由于浮点数运算的本质导致的。了解浮点数运算的特性，采用适当的解决方案，可以帮助我们避免在开发中因为这类问题而浪费时间。通过合理的数学运算和注意运算顺序，我们可以更好地利用 JavaScript 的数值计算功能，确保我们的应用在处理数学运算时保持准确性和可靠性。