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
@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
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数据效果，如图示：
关注者
60
被浏览
7,857
6 个回答
默认排序
贺师俊
JavaScript、 前端开发、 CSS 等 4 个话题的优秀回答者
18 人赞同了该回答
js内置有32位整数，而number类型的安全整数是53位。如果超过53位的，你不能用json传递，需要用其他数据类型，比如字符串，或拆分成两个数据字段。
发布于 2015-08-15
18
4 条评论
收藏
感谢
分享
知乎用户
9 人赞同了该回答
！！！简单的解决方法，让服务器传给你string类型
但是服务器的人说了：
我们需要找到一个检测数字是否可能溢出的方法，想法是将类似于‘123’的数字字符串化为Number再将它转化成String，如果和之前的String不相同那么就发生了溢出
所以最后的正则替换还是比较简单的，此方法只适用于long
－－－－－－－更新－－－－
其实上面的方法并不是一个很好的解决方案，会替换掉不该替换的数字
String中的数字是不能被替换的，为了避免这样的情况，需要完全实现JSON字符的转化，如果手写parser的话，工作量十分巨大，事实上只需要在前人的轮子上稍稍改进即可。推荐一个开源项目JISON （ zaach/jison · GitHub）
也许你从来没听过把JS作为runtime来实现其他语言，但是JS真的可以，你可能需要回忆一下编译原理的课程才能正确使用JISON。接下来，我们把JS作为runtime来翻译JSON字符串，语法文件在这里（ jsonlint/jsonlint.y at master · zaach/jsonlint · GitHub），源文件中，遇到数字时直接将其转化为Number
我们需要对其进行溢出验证
使用JISON－CLI生成相应的JS Parser文件即可。
综上，通过自定义JSON转化避免long溢出，实现long在前端正常显示。
如果有对JISON项目感兴趣的同学，欢迎交流！这个项目的强大之处在于＃你永远想不到JS不可以干啥＃
但是服务器的人说了：
你们前端怎么显示个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'
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"
｝
也许你从来没听过把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;}
;
综上，通过自定义JSON转化避免long溢出，实现long在前端正常显示。
如果有对JISON项目感兴趣的同学，欢迎交流！这个项目的强大之处在于＃你永远想不到JS不可以干啥＃
文章出处：https://www.cnblogs.com/lvgg/p/7475140.html
posted @
2017-09-04 19:18 那家那人那小伙 阅读(
2030) 评论(
1) 编辑 收藏