JS数字不再受限,尽情飞翔。

摘要

JS数字精度问题,让我头疼不已。服务端用Int64,浏览器端用number,超过2^53就出错。生成Id更是如此。

正文

一行代码解决JS数字大于2^53精度错误的问题

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

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

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

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

 

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

第一种:服务端处理

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

第二种:浏览器端处理

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

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

 正则使用示例:

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

Axios 使用示例:

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

  

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

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

  

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

 _________________________________________

关注不迷路

扫码下方二维码,关注宇凡盒子公众号,免费获取最新技术内幕!

温馨提示:如果您访问和下载本站资源,表示您已同意只将下载文件用于研究、学习而非其他用途。
文章版权声明 1、本网站名称:宇凡盒子
2、本站文章未经许可,禁止转载!
3、如果文章内容介绍中无特别注明,本网站压缩包解压需要密码统一是:yufanbox.com
4、本站仅供资源信息交流学习,不保证资源的可用及完整性,不提供安装使用及技术服务。点此了解
5、如果您发现本站分享的资源侵犯了您的权益,请及时通知我们,我们会在接到通知后及时处理!提交入口
0

评论0

请先

站点公告

🚀 【宇凡盒子】全网资源库转储中心

👉 注册即送VIP权限👈

👻 全站资源免费下载✅,欢迎注册!

记得 【收藏】+【关注】 谢谢!~~~

立即注册
没有账号?注册  忘记密码?

社交账号快速登录