js的Bug - 大数传参参数错误 - 精度丢失

Posted 2022-04-02 Rudon滨海渔村

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js的Bug - 大数传参参数错误 - 精度丢失相关的知识，希望对你有一定的参考价值。

示意图

问题关键

javascript普通数字类型的变量，目前最大只能是小于等于 2的53次方
= 9007199254740992
= Number.MAX_SAFE_INTEGER
= js定义的最大安全值

超过 JS 中能表示的最大安全值之外就要丢失精度了

解决办法

办法1）传参前，用字符串格式储存数字，再传入，即可，
优点：简单
缺点：不能运算
例子：var n = '9873945793843337593856755';

办法2）使用数据类型bigint储存大数字。
Bigint 是 JavaScript 中一个新的数据类型，可以用来操作超出 Number 最大安全范围的整数。
优点：可以运算
缺点：在JSON解析中会存在“格式错误”
例子1：var n = 9873945793843337593856755n; // 字母n结尾
例子2：var n = BigInt( '9873945793843337593856755' ); // 注意，这里还是要传字符串进去

完整代码（错误例子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h2>
        js的Bug - 大数传参 参数错误
    </h2>

    <h3>输入银行账号： 661590881234567899</h3>
    <h3>
        接收到的参数：
        <u id="res"></u>
    </h3>
    
    <script>

    function bankC (v) 
        console.log(v);
        // ...TODO
        return v;
    

    var account = 661590881234567899;
    var res = bankC(account);

    document.getElementById('res').innerHTML = res;


    </script>
    

</body>
</html>

灵感来自

Node.js 中遇到大数处理精度丢失如何解决？前端也适用！ - 知乎在 JavaScript 中浮点数运算时经常出现 0.1+0.2=0.30000000000000004 这样的问题，除此之外还有一个不容忽视的大数危机（大数处理精度丢失）问题。这个问题之前看大家在群里也聊了不止一次，周末在另一个「 Nodej…https://zhuanlan.zhihu.com/p/394841148