js中数字运算结果与预期不一致的问题和解决方案

Posted 2023-03-05 赏花赏景赏时光

本文主要是和大家聊聊关于js中经常出现数字运算结果与预期结果不一致的问题，与及解决该问题的的方案。

一、问题现象

如：0.1 + 0.2的预期结果是0.3，但是在js中得到的计算结果却是0.30000000000000004，如下图所示

 如：0.3 - 0.2的预期结果是0.1，但是在js中得到的计算结果为0.09999999999999998，如下图所示

 要想明白出现上述问题的原因，还需要了解在js中数字是如何编码的。

二、js中的数字编码

javascript 的 数字Number 类型是一个双精度 64 位二进制格式 IEEE 754 值，类似于 Java 或者 C# 中的 double。这意味着它可以表示小数值，但是存储数值的大小和精度有一些限制。简而言之，IEEE 754 双精度浮点数使用 64 位来表示 3 个部分：

• 1 比特符号位（sign）（0-正数，1-负数）
• 11 比特指数位（exponent）（-1022 到 1023）
• 52 比特尾数位（mantissa-小数部分）（表示 0 和 1 之间的数值）

尾数（也称为有效位数）是表示实际值的数值（有效数值）部分。指数是尾数应乘以的 2 的幂。将其视为科学计数法：

尾数使用 52 比特存储，在二进制小数中解释为 1.… 之后的数值。因此，尾数的精度是 2的-52次方幂（可以通过 Number.EPSILON 获得），或者十进制小数点后大约 15 到 17 位；高于该精度级别的算术需要舍入。

一个数值可以容纳的最大值是 2的1024次方减1（基于二进制的指数为 1023，尾数为 0.1111...），这可以通过 Number.MAX_VALUE 获得。大于该值的数值，被特殊数常数 Infinity 取代。

只有在 范围内的整数才能在不丢失精度的情况下被表示（可通过 Number.MIN_SAFE_INTEGER 和 Number.MAX_SAFE_INTEGER 获得），因为尾数只能容纳 53 位（包括前导 1）。

 以上内容出自：Number - JavaScript | MDN

三、0.1+0.2不等于0.3的原因

通过上述介绍可以知道在二进制科学表示法中，双精度浮点数的小数部分最多只能保留52位，再加上前面的1，其实就是保留53位有效数字，剩余的舍去，遵从“0舍1入”的原则。

// 0.1 转化为二进制 
0.0 0011 0011 0011 0011...(0011无限循环） 

// 0.2 转化为二进制 
0.0011 0011 0011 0011 0011...(0011无限循环）

// 0.3 转化为二进制 
0.01 0011 0011 0011...(0011无限循环）

如上，0.1、0.2、0.3转化为二进制会出现无限循环，0.1+0.2 不等于 0.3 ，因为在 0.1+0.2 的计算过程中发生了两次精度丢失。第一次是在 0.1 和 0.2 转成双精度二进制浮点数时，由于二进制浮点数的小数位只能存储52位，导致小数点后第53位的数要进行为1则进1为0则舍去的操作，从而造成一次精度丢失。第二次在 0.1 和 0.2 转成二进制浮点数后，二进制浮点数相加的过程中，小数位相加导致小数位多出了一位，又要让第53位的数进行为1则进1为0则舍去的操作，又造成一次精度丢失。最终导致 0.1+0.2 不等于0.3

四、解决方案

1、简单粗暴的方法是使用toFixed设置保留小数位数(注意用toFixed得到的是string类型)

(0.1+0.2).toFixed(1) == 0.3    // true

2、将其转化为整数计算后，再转化为小数

(0.1*100+0.2*100)/100 === 0.3 // true

3、使用第三方库：bignumber.js

bignumber.js APIhttps://mikemcl.github.io/bignumber.js/#bignumberbignumber.js - npmA library for arbitrary-precision decimal and non-decimal arithmetic. Latest version: 9.1.1, last published: 2 months ago. Start using bignumber.js in your project by running `npm i bignumber.js`. There are 5883 other projects in the npm registry using bignumber.js.https://www.npmjs.com/package/bignumber.js用法很简单

npm install bignumber.js // 安装依赖包bignumber.js

import BigNumber from "bignumber.js"; // 引进依赖包
let x = new BigNumber(0.1) // 使用构造函数BigNumber
let result = x.plus(0.2) // 结果为'0.3'，注意输出结果为字符串数字

注意使用bignumber.js计算出来的结果为字符串。

相比较于1、2两种方法，3种方法比较简单，只需要在使用的时候直接调用API即可，不需要开发者自行做转换。

五、bignumber.js源码解析

bignumber.js是一个用于任意精度数学运算的js库，它的大致实现原理是将所有数字当成字符串，重新实现了计算逻辑，主要缺点就是性能比原生差。