接口返回数字长度太长导致精度丢失（丢失精度）

开水没有冬天

已于 2024-04-10 10:37:24 修改

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

于 2022-07-27 10:12:49 首次发布

本文链接：https://blog.csdn.net/weixin_42995876/article/details/126008581

博客讨论了前端在显示后端返回的19位雪花ID时出现精度丢失的问题，以及JavaScript中浮点数计算的不精确性。解决方案包括在前端使用json-bigint插件来处理大整数，并提供了相关代码示例。同时，解释了精度丢失的根本原因在于十进制到二进制的转换过程中可能出现无限循环部分，而有限的存储空间导致精度损失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象：

后端返回 id字段是使用 “雪花算法”生成的，19位，但是在前端查看的时候，反显后几位都是0了，精度丢失！

接口地址直接在浏览器打开（get），显示正常：

在这里插入图片描述

在netWork中查看接口返回：

此时数字已经丢失精度了！

解决

插件：json-bigint

yarn add json-bigint
//或
npm install json-bigint

axios.defaults.transformResponse = [
  function (data) {
    const json = JSONBIG({
      storeAsString: true
    })
    const res = json.parse(data)
    return res
  }
]

在这里插入图片描述

丢失精度的原因：

https://juejin.cn/post/7264208575973621815

场景：

浮点数的计算，包括加减乘除，都会这样。eg：

正常计算：0.1 + 0.2 = 0.3
JavaScript 计算：0.1 + 0.2 = 0.30000000000000004

正常计算：1 - 0.9 = 0.1
JavaScript 计算：1 - 0.9 = 0.09999999999999998

超过最值：js 16位，后端雪花返回19位。准确说是：±9007199254740991。
保留指定小数位。

console.log(1.585.toFixed(2)) // 1.58 ——> 期望为：1.59

原因：转二进制的时候，出问题了。
实际上会底层会进行十进制和二进制的相互转换，而这个转换过程就有可能会出现精度丢失，因为十进制转二进制后可能产生无限循环部分，而实际存储空间是有限的。