js精度丢失的问题

1.js精度丢失的常见问题,从常见的浮点型进行计算,到位数很长的munber类型进行计算都会造成精度丢失的问题,

首先我们看一个问题:

复制代码
0.1 + 0.2  !==  0.3  // true

let a =  9007199254740992
a + 1 == a // true

那么js为什么会出现精度丢失的问题:

计算机的二进制实现和位数限制有些数无法有限表示。就像一些无理数不能有限表示,如 圆周率 3.1415926...,1.3333... 等。JS 遵循 IEEE 754 规范,采用双精度存储(double precision),占用 64 bit

比如:

0.1 >> 0.0001 1001 1001 1001...(1001无限循环)

0.2 >> 0.0011 0011 0011 0011...(0011无限循环)

此时只能模仿十进制进行四舍五入了,但是二进制只有 0 和 1 两个,于是变为 0 舍 1 入。这即是计算机中部分浮点数运算时出现误差,丢失精度的根本原因。

大整数的精度丢失和浮点数本质上是一样的,尾数位最大是52位,因此 JS 中能精准表示的最大整数是 Math.pow(2, 53),十进制即 9007199254740992。

大于 9007199254740992 的可能会丢失精度

9007199254740992 >> 10000000000000...000 // 共计 53 个 0

9007199254740992 + 1 >> 10000000000000...001 // 中间 52 个 0

9007199254740992 + 2 >> 10000000000000...010 // 中间 51 个 0

当你做如下计算的时候

9007199254740992 + 1 // 丢失

9007199254740992 + 2 // 未丢失

9007199254740992 + 3 // 丢失

9007199254740992 + 4 // 未丢失

对于整数,前端出现问题的几率可能比较低,毕竟很少有业务需要需要用到超大整数,只要运算结果不超过 Math.pow(2, 53) 就不会丢失精度。

对于小数,前端出现问题的几率还是很多的,尤其在一些电商网站涉及到金额等数据。解决方式:把小数放到位整数(乘倍数),再缩小回原来倍数(除倍数)

// 0.1 + 0.2

(0.110 + 0.210) / 10 == 0.3 // true

对于过大的数字:

可以用bigint,应为number的基本类型不能超过2^53,不然就会出现精度丢失,为了解决这个限制,在ECMAScript标准中出现了BigInt。

BigInt可以表示任意大的整数

但是要注意写法:

复制代码
let result=124569875984123677888999;  //估摸着这一步就在前端已经精度丢失了
String(BigInt(result));

let result=BigInt(124569875984123677888999);   //这里也已经精度丢失了
String(result);
// 上面两种都是错误的写法

// 正确写法:
let result=124569875984123677888999n; 
String(result);

除了以上方式,还可以借助第三方库

BigNumber.js:提供了超高精度的数字处理能力,可以解决精度丢失问题。

decimal.js:提供了类似于 Python Decimal 的类型,可以精确表示浮点数,解决精度丢失问题。

复制代码
npm install bignumber.js --save

let x = new BigNumber(123.4567);
let y = BigNumber('123456.7e-3');
let z = new BigNumber(x);
x.isEqualTo(y) && y.isEqualTo(z) && x.isEqualTo(z);      // true

let x = new BigNumber('1111222233334444555566');
x.toString();                       // "1.111222233334444555566e+21"
x.toFixed();                        // "1111222233334444555566"

// Precision loss from using numeric literals with more than 15 significant digits.
new BigNumber(1.0000000000000001)         // '1'
new BigNumber(88259496234518.57)          // '88259496234518.56'
new BigNumber(99999999999999999999)       // '100000000000000000000'

// Precision loss from using numeric literals outside the range of Number values.
new BigNumber(2e+308)                     // 'Infinity'
new BigNumber(1e-324)                     // '0'

// Precision loss from the unexpected result of arithmetic with Number values.
new BigNumber(0.7 + 0.1)                  // '0.7999999999999999'


npm install --save decimal.js

 const a = 9.99;
 const b = 8.03;
 
 // 加法
 let c = new Decimal(a).add(new Decimal(b)) 
 
 // 减法
 let d = new Decimal(a).sub(new Decimal(b))
 
 // 乘法
 let e = new Decimal(a).mul(new Decimal(b))
 
 // 除法
 let f = new Decimal(a).div(new Decimal(b))
相关推荐
To_OC5 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
To_OC5 小时前
LC 17 电话号码的字母组合:我的回溯算法,就是从这道题开窍的
javascript·算法·leetcode
vipbic5 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy5 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志6 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble7 小时前
c端系统,其实更像一个信息展示平台
前端
你怎么知道我是队长7 小时前
JavaScript的变量和数据类型介绍
开发语言·javascript·ecmascript
李姆斯7 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜8 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司8 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能