JavaScript浮点数精度问题及解决方案

引言

在JavaScript开发中，我们经常会遇到一些看似简单的数学运算却产生意外结果的情况。例如，0.3 - 0.2 !== 0.1 或 2.55.toFixed(1) 返回 2.5 而不是预期的 2.6。这些问题源于JavaScript的数字表示方式------基于IEEE 754标准的双精度浮点数格式。本文将深入探讨这些问题的根源，并提供实用的解决方案。

问题一：0.3 - 0.2 !== 0.1

问题表现

javascript 复制代码

console.log(0.3 - 0.2); // 输出: 0.09999999999999998
console.log(0.3 - 0.2 === 0.1); // 输出: false

原因分析

JavaScript使用二进制浮点数表示所有数字。然而，像0.1、0.2和0.3这样的十进制小数在二进制中是无限循环的，无法被精确表示，内存中不可能无限存储，会进行截取，接下来可以看一下这些数据在内存。当进行减法运算时，这种不精确性会导致累积误差，使得结果与预期不符。

javascript 复制代码

0.3.toString(2)
// 存储的二进制 '0.010011001100110011001100110011001100110011001100110011'
0.3.toPrecision(20)
// toPrecision 用于将数字转换为字符串，并根据指定的有效数字位数进行格式化，很显然0.3实际存储的要小于0.3
// '0.29999999999999998890'

0.1.toString(2)
// 存储的二进制 '0.0001100110011001100110011001100110011001100110011001101'
0.1.toPrecision(20)
// 小于0.1 '0.10000000000000000555'

解决方案

1. 使用整数运算

对于涉及货币或其他需要精确计算的场景，可以将数值转换为整数进行运算：

javascript 复制代码

// 将数值乘以100转换为整数
const a = 30; // 代表0.30
const b = 20; // 代表0.20
const result = (a - b) / 100; // 0.10
console.log(result === 0.1); // true

2. 四舍五入到固定小数位

通过四舍五入来消除微小误差：

javascript 复制代码

const result = Math.round((0.3 - 0.2) * 100) / 100;
console.log(result === 0.1); // true

3. 使用第三方库

对于复杂的十进制运算，可以使用专门的库如decimal.js或big.js：

javascript 复制代码

// 使用decimal.js
const Decimal = require('decimal.js');
const result = new Decimal(0.3).minus(new Decimal(0.2)).equals(new Decimal(0.1));
console.log(result); // true

问题二：2.55.toFixed(1) 是 2.5 而不是 2.6

问题表现

javascript 复制代码

console.log(1.55.toFixed(1)); // 输出: "1.6"
console.log(2.55.toFixed(1)); // 输出: "2.5"

原因分析

toFixed()方法使用银行家舍入规则（四舍六入五成双），并且由于浮点数精度问题，2.55在内部可能被存储为略小于2.55的值，导致向下舍入。

解决方案

1. 自定义舍入函数

实现一个更符合直觉的舍入函数：

javascript 复制代码

function customRound(num, digits) {
  const factor = Math.pow(10, digits);
  return (Math.round(num * factor) / factor).toFixed(digits);
}

console.log(customRound(2.55, 1)); // 2.6

2. 添加微小增量

在调用toFixed之前给数字加上一个极小的值：

javascript 复制代码

const num = 2.55;
console.log((num + Number.EPSILON).toFixed(1)); // "2.6"

3. 使用Intl.NumberFormat

利用国际化API进行格式化：

javascript 复制代码

const formatter = new Intl.NumberFormat('en-US', {
    minimumFractionDigits: 1,
    maximumFractionDigits: 1
});
console.log(formatter.format(2.55)); // "2.6"