经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
一行代码解决JS数字大于2^53精度错误的问题
来源:cnblogs  作者:KevinCC  时间:2021/5/17 9:21:19  对本文有异议

    服务端使用长整型(Int64)的数字,在浏览器端使用JS的number类型接收时,当这个实际值超过 (2^53-1)时,JS变量的值和实际值就会出现不相等的问题。常见场景比如使用雪花算法生成Id。

    在服务端,数字长整型有64位(bit),第一位为符号位,后边为数字位。

 JS引擎中第一位为符号位,第二位到第十二位为指数位,数字位只剩最后52位,如图:

    52位能表示的最大值为2的53次方-1,所以当服务端返回的值超过这个值时,js端就会出现位数丢失的问题,造成实际值和变量值错误的问题。

 

这个问题解决的方式有两种:

第一种:服务端处理

    将数字转为字符串返回到浏览器端,可以通过全局的序列化配置设置,但这种方式增加了服务端的负担,同时在服务端和服务端接口对接时容易带来小麻烦。这种方式直接略过,感兴趣的同学可以自己研究。

第二种:浏览器端处理

    浏览器在从服务端接收数据时,需要先获取请求的响应报文,再根据数据类型将报文序列化,常见的如json格式。

   这里介绍的方式就是在http请求拿到报文,序列化为具体数据类型之前,用正则将报文里的大数字(字符长度超过15)替换处理。 所幸当前基本所有js的http请求组件都提供了原始报文的处理扩展,得以让我们能用一行代码就解决这个问题。

 正则使用示例:

使用此正则,在浏览器拿到报文还未序列化之前处理即可,以下是两种不同控件的使用示例:

Axios 使用示例:

  1. axios({
  2. method: method,
  3. url: url,
  4. data: data,
  5. transformResponse: [function (data) {
  6. data = data.replace(/"(\s*):(\s*)(\d{15,})/g, '":"$3"');
  7. return JSON.parse(data);
  8. }],
  9. })

  

umi-request 使用示例(配置Interceptors):

  1. responseInterceptors: [(res: Response, options: any) => {
  2. return res.text().then(textBody => {
  3. var resData = textBody.replace(/"(\s*):(\s*)(\d{15,})/g, '":"$3"');
  4. return new Response(resData, options)
  5. });
  6. }]

  

如果你已经看到这里,并且感觉还行的话可以在下方点个赞,或者也可以关注我的公总号(见二维码),如需转载请注明出处

 _________________________________________



原文链接:http://www.cnblogs.com/osscoder/p/14770658.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号