后端说，这个超大数字idxxx会变成xxx，让我知道了js的一个陷阱

背景

某一天，后端说，这个大数字id559151767661585572会变成559151767661585600，我排查了一番，发现我的代码并没有做任何相关转换逻辑，那么为何会出现这个问题呢？直到我询问了ai，我才知道，原来js还有这样一个问题，下面我们一起来详细了解吧。

JavaScript 超大数字自动转换失去精度问题

JavaScript 作为一种广泛使用的编程语言，因其高效、灵活而被广泛应用于前端开发。然而，JavaScript 在处理数字时存在一些潜在的陷阱，尤其是对于超大数字的处理，容易出现精度丢失的问题。本文将详细探讨 JavaScript 中如何处理超大数字，分析该问题的根源，并提供解决方案。

1. JavaScript 的数字表示方式

在 JavaScript 中，所有数字（无论是整数还是浮动数）都是采用 IEEE 754 双精度浮点数标准 来表示的。这意味着，所有数字都被存储为 64 位的二进制格式。其中，1 位用于符号，11 位用于指数，52 位用于有效数字（尾数）。这种表示方法虽然适合大多数应用场景，但它也有一定的局限性，尤其是在处理非常大的数字时，可能会遇到精度问题。

2. 为什么会出现精度丢失？

浮点数精度限制

由于 JavaScript 采用双精度浮点数来表示数字，这种表示方法无法精确表示所有的数字，尤其是当数字非常大时。浮点数本质上无法精确表示某些小数，尤其是那些无法在二进制中精确表示的数字。对于超大整数，JavaScript 会将其转换为浮点数表示，而浮点数的精度是有限的，导致部分数字丢失精度。

例如，以下代码中的数字超出了 JavaScript 能精确表示的范围：

let num = 123456789012345678901234567890;
console.log(num);  // 输出：123456789012345680000000000000

可以看到，尽管原始数字是一个非常大的整数，输出结果却失去了精度。这个问题是由 JavaScript 的浮点数限制所导致的。

15 位有效数字

根据 IEEE 754 双精度浮点数标准，JavaScript 的数字类型最多能够保持 15 位有效数字。因此，当数字超过这个范围时，JavaScript 会自动进行舍入，导致精度丢失。

let largeNumber = 1234567890123456;
console.log(largeNumber);  // 输出：1234567890123456
let largerNumber = 12345678901234567;
console.log(largerNumber); // 输出：12345678901234568（精度丢失）

当数字超过 15 位有效数字时，JavaScript 只保留前 15 位有效数字，后面的数字被舍入。

3. 解决方法

对于涉及超大数字的场景，JavaScript 提供了几种解决方法来避免精度丢失的问题。

3.1 使用 BigInt

在现代 JavaScript 中，BigInt 是一种用于表示任意大小整数的原生类型，它能精准地处理超出 JavaScript 原生 Number 类型表示范围的整数。通过 BigInt，我们可以避免精度丢失问题。

let bigNumber = 123456789012345678901234567890n;
console.log(bigNumber);  // 输出：123456789012345678901234567890n

需要注意的是，BigInt 类型与 Number 类型并不兼容，因此无法进行直接的混合运算。例如，不能将 BigInt 与 Number 直接相加，必须先进行类型转换：

let num = 100;
let bigNum = 123456789012345678901234567890n;
let result = BigInt(num) + bigNum;
console.log(result);  // 输出：123456789012345678901234567990n

3.2 使用第三方库

除了 BigInt，还有一些第三方库可以帮助开发者在 JavaScript 中处理超大数字。这些库提供了高精度的数学运算功能，并能处理各种复杂的数字计算。以下是一些常用的第三方库：

• Big.js：一个用于高精度浮点数运算的库，适用于需要处理大量数字计算的应用。
• Decimal.js：另一个用于高精度浮点数运算的库，尤其适用于金融计算等领域。
• bignumber.js：用于高精度计算的库，支持更大的数字和更复杂的运算。

这些库提供了更为灵活和高效的方式来处理大数字和精度问题。

3.3 使用字符串表示大数字

如果只需要进行数字的展示而不涉及复杂的数学运算，开发者还可以考虑使用字符串来表示超大数字。这避免了浮点数精度的问题，适用于只需要在界面上显示超大数字的场景。

let largeNumberStr = "123456789012345678901234567890";
console.log(largeNumberStr);  // 输出：123456789012345678901234567890

总结

JavaScript 中的数字类型采用了 IEEE 754 双精度浮点数标准，虽然这种表示方式适合大多数场景，但它在处理超大数字时容易出现精度丢失的问题。特别是对于超过 15 位有效数字的整数，JavaScript 会自动舍入，导致数据丢失。

为了解决这个问题，我们可以使用 BigInt 类型来精确处理大数字，或者通过第三方库（如 Big.js、Decimal.js 等）来避免精度丢失。此外，对于不涉及复杂运算的场景，也可以通过字符串方式处理大数字。

了解并掌握这些技巧，可以帮助我们在开发过程中避免因为数字精度丢失而带来的潜在问题。

最后

虽然前端可以进行转换，但后端需要数值型的id，而前端又不可能直接转换成数值传给后端，所以不论如何后端都需要做改动，这个问题当然是由后端去修复啦，将数值id转换成字符串即可。