Java Long类型过大时，js会丢失经度问题

Long类型转json时前端js丢失精度解决方案

一、问题背景

Java后端开发过程中，尤其是id字段，因数值太大，通过json形式传输到前端后，在js解析时，会丢失精度。

如果对精度丢失没有什么概念，可以看一个知乎的帖子，来感受一下：https://www.zhihu.com/question/34564427?sort=created

二、解决思路

将id字段序列化为json时，转换为字符串类型，前端传输到后端，反序列化时，再重新转换为Long。

三、具体实现

在dto所在项目中，新建一个helper包(名字自定义，也可以放现有包里)。PS：为什么要建到dto项目中？因为，这个包最后可能会给其他组使用，这样以来，所有的处理规则逻辑都是统一的，方便对接。

在包里添加类LongJsonSerializer，代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13

/**   * Long 类型字段序列化时转为字符串，避免js丢失精度   *   */ public  class  LongJsonSerializer extends JsonSerializer<Long> {      @Override      public  void  serialize(Long value, JsonGenerator jsonGenerator, SerializerProvider serializerProvider) throws IOException, JsonProcessingException {          String text = (value ==  null  ?  null  : String.valueOf(value));          if  (text !=  null ) {              jsonGenerator.writeString(text);          }      } }

　　然后在包里再添加类LongJsonDeserializer，代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/**   * 将字符串转为Long   *   */ public  class  LongJsonDeserializer extends JsonDeserializer<Long> {      private  static  final Logger logger = LoggerFactory.getLogger(LongJsonDeserializer. class );         @Override      public  Long deserialize(JsonParser jsonParser, DeserializationContext deserializationContext) throws IOException, JsonProcessingException {          String value = jsonParser.getText();          try  {              return  value ==  null  ?  null  : Long.parseLong(value);          }  catch  (NumberFormatException e) {              logger.error( "解析长整形错误" , e);              return  null ;          }      } }

　　

好了，接下来是使用这两个类。

在需要处理的id字段上，加上注解。比如如下代码：

1 2 3 4 5 6

/**   * id   */ @JsonSerialize( using  = LongJsonSerializer. class ) @JsonDeserialize( using  = LongJsonDeserializer. class ) private  Long id;

　　

四、效果展示

接下来，我们看看前端看到的json数据效果，如图示：

js处理长整形 精度问题有什么好的解决方式吗
alert(10214734953631045); 
alert(10214734953631046);
输出分别是
10214734953631044
10214734953631046
后端数据中有大量的数据都是涉及到长整形的数据
服务端的数据本来就保存的是json格式
这个数据中本身含有很多其他对象，对象的唯一id基本都是long类型
现在js通过json反序列化为对象时，这些id就乱套了

关注者

60

被浏览

7,857

关注问题写回答

​添加评论

​分享

​邀请回答

​

收起

6 个回答

默认排序 ​

贺师俊

JavaScript、 前端开发、 CSS 等 4 个话题的优秀回答者

18 人赞同了该回答

js内置有32位整数，而number类型的安全整数是53位。如果超过53位的，你不能用json传递，需要用其他数据类型，比如字符串，或拆分成两个数据字段。

发布于 2015-08-15

18 ​4 条评论

​分享

​收藏 ​感谢

知乎用户

9 人赞同了该回答

！！！简单的解决方法，让服务器传给你string类型
但是服务器的人说了：

你们前端怎么显示个long都搞不定

－－－－－－－－－－
复杂的方法，拿到JSON字符串以后用正则表达式替换一下，将可能溢出的数字转化为string
在其他语言中,long类型可以达到的最大值为

而在JS中,整形的最大的值为 Number.MAX_SAFE_INTEGER

如果溢出就会发生如下诡异的语句

9007199254740993==9007199254740992;//true

我们需要找到一个检测数字是否可能溢出的方法，想法是将类似于‘123’的数字字符串化为Number再将它转化成String，如果和之前的String不相同那么就发生了溢出

//false
String(Number('18446744073709551616'))=='18446744073709551616' 

//true
String(Number('123'))=='123'

//诡异的结果们
//true
Number('18446744073709551616')=='18446744073709551616' 

//true
String(18446744073709551616)=='18446744073709552000' 

//true
18446744073709551616=='18446744073709552000' 

所以最后的正则替换还是比较简单的，此方法只适用于long

JSON.parse(jText.replace(/\b\d+\b/g,replaceOverflow));
function replaceOverflow(yytext){
   return String(Number(yytext))==yytext ? yytext:`"${yytext}"`
}

－－－－－－－更新－－－－
其实上面的方法并不是一个很好的解决方案，会替换掉不该替换的数字

｛
  "id":123
  "des":"this is a long:999999999999999999999999999999"
｝

String中的数字是不能被替换的，为了避免这样的情况，需要完全实现JSON字符的转化，如果手写parser的话，工作量十分巨大，事实上只需要在前人的轮子上稍稍改进即可。推荐一个开源项目JISON （ zaach/jison · GitHub）
也许你从来没听过把JS作为runtime来实现其他语言，但是JS真的可以，你可能需要回忆一下编译原理的课程才能正确使用JISON。接下来，我们把JS作为runtime来翻译JSON字符串，语法文件在这里（ jsonlint/jsonlint.y at master · zaach/jsonlint · GitHub），源文件中，遇到数字时直接将其转化为Number

JSONNumber
    : NUMBER   {$$ = Number(yytext);}
    ;

我们需要对其进行溢出验证

JSONNumber
    : NUMBER  
     {$ = yytext== String(Number(yytext))? Number(yytext):yytext;}
    ;

使用JISON－CLI生成相应的JS Parser文件即可。
综上，通过自定义JSON转化避免long溢出，实现long在前端正常显示。
如果有对JISON项目感兴趣的同学，欢迎交流！这个项目的强大之处在于＃你永远想不到JS不可以干啥＃

文章出处：https://www.cnblogs.com/lvgg/p/7475140.html

posted @  2017-09-04 19:18  那家那人那小伙 阅读( 2030) 评论( 1)  编辑  收藏