js大数字精度问题解决

摘要

在相当久的一段时间里，挂机跳钱类游戏相当火爆。随着合成的进行，金钱会越来越多，出现了千亿、万亿、万万亿的数值，要知道最大的安全整数只有 9007199254740991，怎么做到的呢？

正文

使用工具

• 谷歌浏览器
• CocosCreator 版本 2.4.3
• JSBI 大整数运算库

先说说最大安全整数

在谷歌浏览器的控制台可以看到 Number 是有个属性值代表着最大安全整数，大于这个值的运算都会有可能因精度丢失而运算错误！

为什么是这个值呢？这个值用表达式是 Math.pow(2, 53) - 1，但是对于 64 位的机器为啥不是 64 次幂呢？因为 JS 的数值采用了 IEEE 754 格式中的双精度浮点值标准，它分为 52 位尾数位、11 位指数位和 1 位符号位。符号位代表正负，那么最大可表示位数为 2 的 53 次幂，但是因为 2 的 53 次幂跟加一后的值因为精度丢失了而相等，所以它不安全，取减一，式子就出来了！
更详细的精度取值原理可以参考这篇文章：
https://www.zhihu.com/question/380574329/answer/1213162194

在 cocos 内使用

明白了最大安全整数的限制，就肯定有解决方案，字符串就是一个方案，切分开用数组是另一个方案。而这么常见的问题怎能没有现成的库呢！JSBI 大整数库，而且已经作为 ES2020 的一部分了。
https://github.com/GoogleChromeLabs/jsbi
安装 JSBI 库
npm install jsbi –save

安装完毕后我们新建个 Label 做展示：

尝试下加法与乘法，乘法后数值必然很大：

查看结果：

JSBI 更多计算方式：

关于 TS

该库在 TS 脚本中使用时，可以 import * as JSBI from ‘jsbi’，也可以用 require。但是 ts 会因为库是 common.js 导出方式而出现类型报错，虽然不影响实际运行但看着也很难受。

方案一：any 大法好，不过没有智能提示且不够优雅。

方案二：自己撸一个声明文件，参考包中自带的 d.ts 文件，将导出类的写法改成导出模块。

享受全部智能提示：