前端实战篇—在Javascript中,Number类型超长问题详解

行走的ET 2018-01-22 14:37:21 ⋅ 762 阅读

今天给大家分享的是在Javascript中,获取到数字超出长度问题。

实战背景

刚刚收尾的一个移动端商城项目中搭建用户体系的时候,DB设计的User用户表主键ID为bigint(20) 为了达到不重复的问题 Java生成了16-20位不重复的Long类型数字串(具体生成方式也是非常复杂的)。
但是在和web前端API对接的时候发现获取到的ID和生成的不一致,导致操作用户数据的时候一直有问题,最后定位到是ID后端数据类型和Javascript中的数据类型不一致。

问题原因

JavaScript中所有的数字,无论是整数还是小数,其类型均为Number。在程序内部,Number类型的实质是一个64位的浮点数,这与Java中double类型的浮点数是一致的;因此,JavaScript中所有的数都是浮点数。遵循IEEE 754标准(浮点数算术标准),JavaScript所能表示的数值范围为正负1.7976931348623157乘以10的308次方,其最小所能表示的小数为正负5乘以10的负324次方,这两个边界值可以分别通过访问Number对象的MAX_VALUE属性和MIN_VALUE属性来获取。

对于整数,根据ECMAScript标准的要求(http://ecma262-5.com/ELS5_HTML.htm#Section_8.5),JavaScript能表示并进行精确算术运算的整数范围为:正负2的53次方,也即从最小值-9007199254740992到最大值+9007199254740992之间的范围;对于超过这个范围的整数,JavaScript依旧可以进行运算,但却不保证运算结果的精度。值得注意的是,对于整数的位运算(比如移位等操作),JavaScript仅支持32位整型数,也即从-2147483648到+2147483647之间的整数。

我们可以浏览器中测试一下,如下操作

如上图所示 是正常的,那么我们再 +1 试试

看到了吧? 都变了!!!!

解决方案1
数据库设计的时候用varchar(20),那么会映射为String类型,就不会出现这种问题
解决方案2
如果项目已经成型并且修改数据库会造成不可预料的问题那么可以在User对象中再增加一个String类型id映射字段,如下    private Long userId;    
    private String userIdStr;    public String getUserIdStr() {        return this.userId+"";
    }    public void setUserIdStr(String userIdStr) {        this.userIdStr = userIdStr;
    }

那么和前端交互的时候可以使用userIdStr字段 因为是String 类型的,规避掉这个问题。

以后在设计的时候记得不要再犯这样的问题哦!



全部评论: 0

    我有话说:

    前端实战JavaScript 反调试技巧的简单应用(上)

    最近作者看了一些关于JavaScript反调试的帖子,今天给大家整理一下希望有帮助。

    移动H5前端五大性能优化方案(实战

    移动H5前端五大性能优化方案(实战

    前端实战JavaScript 反调试技巧的简单应用(下)

    通过时间差异、DevTools检测(Chrome)、隐式流完整性控制和 代理对象来达到JavaScript反调试目的

    DDDplus 1.0.2 发布,轻量级业务台开发框架

    DDDplus 简介 一套轻量级业务台开发框架,以DDD思想为本,致力于业务资产的可沉淀可传承,全方位解决复杂业务场景的扩展问题实现台核心要素,赋能台建设。 融合了前台复杂生态协作方法论

    MySql实战:写一个简单的存储过程,完成订单定时任务

    前言之前我们分享了MySql的性能优化、索引详解等内容,本文章主要是针对想要入门MySql存储过程的读者,主要实现的业务是订单库里面的超过30分钟没有支付的订单全部置为失效订单......

    JAVA实现附近范围内公交定位问题

    接上前端实战:通过JS抓取城市所有站点与线路】获取附近定位信息

    推荐一款前端数据源管理工具 algeb

    ALGEB 简介 这是一个比较抽象的库,一开始可能比较难理解。我写它的初衷,是创建可响应的数据请求管理。传统数据请求,我们只是把携带ajax代码的一堆函数放一起,这样就可以调用接口。但是这种

    前端实战-聊聊JavaScript内存

    内存生命周期、分配内存、使用分配的内存(读与写操作),当应用程序不再需要时,释放掉已分配的内存

    服务化改造实践 | 如何 Dubbo 支持 REST

    随着微服务的流行以及多语言互操作诉求的日益增多, Dubbo 暴露 REST 服务变成了一个不容忽视的诉求。

    微信小程序实战:如何解决https域名问题

    开发自己的微信小程序绕不开https问题,为了能小程序调用我们自己的API服务请打开看一看吧!!!

    电商实战:商品模型分析与设计(超级实用

    最近设计电商平台,那么整个电商系统商品模型是非常重要的模块,也可以说是整个电商的核心,那么接下来我们一起分析一下,设计出一个完整的商品模型。

    微服务架构实战(六):Spring boot2.x 集成阿里大鱼短信接口详解与Demo

    Spring boot2.x 集成阿里大鱼短信接口,发送短信验证码及短信接口详解

    11 个Javascript机器学习库

    1. Brain.js Brain.js是一个Javascript库,用于替代(现在已弃用的)“ 脑 ”库的神经网络,该库可与Node.js一起使用或浏览器使用(注释计算),并为不同任务提供不同

    Angular 11.0.0-rc.2 发布,Web 前端框架

    表达式保留 this.$event 和 th...

    前端实战:通过JS抓取城市所有站点与线路

    做公交线路定位,木有数据怎么办?网上抓去~ 手把手教你通过JS实现站点线路数据抓取

    抖音品质建设 - iOS启动优化《实战

    实战,本文是实战。 原理:抖音品质建设-iO...

    微信小程序微商城(四):动态API实现商品详情页(上)

    1、实现商品详情页面布局(这实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态加载数据

    为什么阿里巴巴不建议 boolean 类型变量用 isXXX?

    背景 平时工作大家经常使用到boolean以及Boolean类型的数据,前者是基本数据类型,后者是包装类,为什么不推荐使用isXXX来命名呢?到底是用基本类型的数据好呢还是用包装类好呢? 例子