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

问题表现

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

原因分析

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

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. 使用整数运算

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

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

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

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

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

3. 使用第三方库

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

// 使用decimal.jsconstDecimal=require('decimal.js');constresult=newDecimal(0.3).minus(newDecimal(0.2)).equals(newDecimal(0.1));console.log(result);// true

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

问题表现

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

原因分析

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

解决方案

1. 自定义舍入函数

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

functioncustomRound(num,digits){constfactor=Math.pow(10,digits);return(Math.round(num*factor)/factor).toFixed(digits);}console.log(customRound(2.55,1));// 2.6

2. 添加微小增量

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

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

3. 使用Intl.NumberFormat

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

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