解决 JavaScript Number 精度问题:处理超大 Long 类型 ID

在前后端交互中,常常需要传递 Long 类型的 ID。但 JavaScript 的 Number 类型基于 IEEE 754 标准,最大只能精确表示 15 到 17 位的整数,超过这个范围会丢失精度。为了避免这种问题,本文介绍如何处理超大数字。

问题描述

JavaScript 的 Number 类型的最大安全整数是 9007199254740991,超过这个值的数字会出现精度丢失。例如,1234567890123456789 会被转为 1234567890123456700,导致错误。

问题的根源

Long 类型是许多后端语言(如 Java)用于表示大整数的类型,而 JavaScript 的 Number 类型不能正确表示如此大的数字。

ini 复制代码
// 后端:Java
Long longId = 1234567890123456789L;

前端接收到该 ID 后,会出现精度丢失:

javascript 复制代码
// 前端:JavaScript
let itemId = 1234567890123456789;  // 错误,精度丢失
console.log(itemId);  // 输出:1234567890123456700

解决方案

Long 类型 ID 转为字符串,并确保前后端都使用字符串形式传递 ID,避免精度丢失。

  • 后台 :将 Long 类型 ID 转为字符串。
  • 前端 :接收 ID 时保持字符串类型,避免转换为 Number

实施方案

后端(Java 示例):
less 复制代码
@RestController
public class ItemController {
    @GetMapping("/items/{id}")
    public ResponseEntity<ItemVO> getItem(@PathVariable Long id) {
        Item item = itemService.getItemById(id);
​
        ItemVO itemVO = new ItemVO();
        itemVO.setId(String.valueOf(id));
​
        return ResponseEntity.ok(itemVO);
    }
}
前端(JavaScript 示例):
javascript 复制代码
// 使用 axios 请求 API
axios.get('/api/items/1234567890123456789')
  .then(response => {
    const itemId = response.data.id;  // 保持为字符串
    console.log(itemId);  // 输出原始字符串
  })
  .catch(error => {
    console.error('Error:', error);
  });
相关推荐
天问一30 分钟前
使用 Vue Router 进行路由定制和调用的示例
前端·javascript·vue.js
韩立学长2 小时前
【开题答辩实录分享】以《基于Vue的非遗文化知识分享平台的设计与实现》为例进行选题答辩实录分享
前端·javascript·vue.js
前端 贾公子3 小时前
Vue响应式原理学习:基本原理
javascript·vue.js·学习
飛6793 小时前
从 0 到 1 掌握 Flutter 状态管理:Provider 实战与原理剖析
开发语言·javascript·ecmascript
~无忧花开~4 小时前
Vue二级弹窗关闭错误解决指南
开发语言·前端·javascript·vue.js
知行力4 小时前
【GitHub每日速递 20251209】Next.js融合AI,让draw.io图表创建、修改、可视化全靠自然语言!
javascript·人工智能·github
REDcker4 小时前
JS 与 C++ 语言绑定技术详解
开发语言·javascript·c++
zlpzlpzyd4 小时前
vue.js 3中全局组件和局部组件的区别
前端·javascript·vue.js
浩星4 小时前
css实现类似element官网的磨砂屏幕效果
前端·javascript·css
一只小风华~5 小时前
Vue.js 核心知识点全面解析
前端·javascript·vue.js