js精度丢失的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 的类型，可以精确表示浮点数，解决精度丢失问题。文章来源地址https://www.toymoban.com/news/detail-622861.html

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))

到了这里，关于js精度丢失的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！