LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

JS 处理长整型数字的坑:从雪花 ID 精度丢失说起

freeflydom
2025年7月10日 9:46 本文热度 82

在服务端使用 64 位长整型(Int64)数字,而前端通过 JavaScript 的number类型接收时,若数值超过2^53 - 1(即 9007199254740991),会出现数值不相等的问题。这一现象的核心原因是 JavaScript 中number类型的精度限制,而雪花算法生成的 ID(通常为 64 位)恰好属于这类场景,因此需要特别处理。

一、问题根源:JavaScript 中number的精度限制

JavaScript 的number类型基于IEEE 754 双精度浮点数标准实现,其底层存储结构决定了它的精度范围:

  • 双精度浮点数的 “尾数(mantissa)” 部分占 52 位,加上隐藏的 1 位 “整数位”,总共可表示53 位有效精度

  • 这意味着:对于整数,number类型能精确表示的范围是[-2^53 + 1, 2^53 - 1],这个范围外的整数无法被精确存储,会出现 “精度丢失”。

当服务端返回的 Int64 数值超过2^53 - 1时,JavaScript 的number会因无法精确表示该值,导致存储的结果与实际值不一致(例如末尾几位被截断或四舍五入)。

二、典型场景:雪花算法 ID 的问题

雪花算法(Snowflake)生成的 ID 是 64 位整数,结构通常为:

  • 1 位符号位(固定为 0,保证正数);

  • 41 位时间戳;

  • 10 位机器 ID;

  • 12 位序列号。

显然,64 位整数的最大值为2^63 - 1(约 9e18),远超过2^53 - 1,因此用number接收时必然会丢失精度,导致前端存储的 ID 与服务端实际值不匹配(例如服务端 ID 为1234567890123456789,前端接收后可能变成1234567890123456700)。

三、解决方法:如何避免精度丢失?

解决的核心思路是绕开 JavaScriptnumber类型的精度限制,常见方案如下:

1. 以字符串形式传递大整数

最直接的方式是服务端在返回数据时,将 Int64 类型的字段转换为字符串,前端接收后以字符串形式存储和使用。

  • 服务端处理:例如在 Java 中,将Long类型的雪花 ID 转换为String后再序列化到 JSON 中;
  • 前端接收:直接使用字符串类型的 ID(无需转换为number),避免精度丢失。

2. 前端使用BigInt类型处理大整数

BigInt是 JavaScript 中专门用于表示任意精度整数的类型,可精确存储超过2^53 - 1的数值。

  • 服务端:保持 Int64 类型的数值(例如 JSON 中直接存储数字);
  • 前端处理:
    • 接收时,通过BigInt()构造函数将数值转换为BigInt类型(例如const id = BigInt(response.id));

    • 注意:BigIntnumber不能直接运算,需显式转换(例如BigInt(123) + 456n,其中nBigInt的字面量后缀)。

示例
服务端返回 JSON:{ "id": 1234567890123456789 }
前端处理:

javascript

// 直接用number接收会丢失精度
const numId = response.id; // 结果可能为1234567890123456700(错误)
// 用BigInt接收可保持精度
const bigIntId = BigInt(response.id); // 结果为1234567890123456789n(正确)

3. 框架 / 序列化工具的配置优化

在前后端数据交互中(尤其是 JSON 序列化 / 反序列化),可通过工具配置自动处理大整数:

  • 例如,使用JSON.parse时,通过reviver函数将大整数转换为BigInt

    javascript

    const data = JSON.parse(response, (key, value) => {
      // 假设ID字段名为"id",且数值超过2^53-1
      if (key === 'id' && typeof value === 'number' && value > 2**53 - 1) {
        return BigInt(value);
      }
      return value;
    });
    
  • 部分框架(如 Vue、React)或 HTTP 客户端(如 Axios)可配置拦截器,自动将大整数字段转换为BigInt或字符串。

四、注意事项

  1. 兼容性BigInt在 IE 浏览器中不支持,但现代浏览器(Chrome、Firefox、Edge 等)均已支持;
  2. 字符串传递的优势:若前端仅需展示或传递 ID(无需数值运算),字符串形式更简单,避免BigInt的类型转换成本;
  3. 数据库交互:若前端需将 ID 回传到服务端或存储到数据库,保持字符串或BigInt类型即可(服务端可再转换为 Int64 处理)。

总结

当服务端的 Int64 数值超过2^53 - 1时,JavaScript 的number类型无法精确表示,导致数值不匹配。解决核心是避开number的精度限制,推荐通过 “字符串传递” 或 “前端BigInt处理” 两种方式,尤其在雪花算法 ID 等 64 位整数场景中必须使用。

​转自https://juejin.cn/post/7524645466745815059


该文章在 2025/7/10 9:46:53 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved