记录一次精度丢失问题

发表于 更新于

在使用 Antd Select 组件的时候，请求详情回显 显示了一个错误的 value 值，不显示 label。

图片

为什么

  • 后端给前端传了一个 1293435817355730946（19位） 大数值类型，前端通过 ‘’ + 、toString() 等方式进行类型转换，得到 1293435817355731000（精度丢失），Select 列表没有对应上 [类型和数值]，所以绑定不上。

因为 JavaScript 中的数字类型 (Number) 有一定的精度限制。在JavaScript中,数字类型使用 IEEE 754 标准,采用 64位 浮点数表示。这种表示方式存在一些局限性:

  1. 整数的精确表示范围为-2^53 + 1 到 2^53 - 1,即 -9007199254740991 到 9007199254740991（16位） 。超出这个范围的整数将丢失精度。
  2. 浮点数的表示也有误差,无法精确表示某些十进制小数，比如0.1。

如何解决

  1. 与后端开发沟通，通过字符串传递
  2. 使用 ES2020 BigInt 类型
  3. 使用 bignumber.js、decimal.js 等第三方库解决