JSON.parse 数值类型精度丢失

问题

工作中发生这样一个问题,后台返回的json数据到前端经过序列号化后,数值类型数据精度丢失了
客户端,即浏览器上的只要是数值类型,超过15位之后就会出现精度丢失问题

解决

经多方沟通,后台不方便改,那就只能是前端自己找办法了,害

一开始处理方式是前端对字符串通过正则匹配,超过15位的数值转成字符串,但后面发现会有其它情况下也会匹配上,导致最后替换的数据不是一个正常的JSON数据

谷歌找到有个插件库,哈哈,早就有人给出了比较好的方案

方式一
import { parse, stringify } from 'lossless-json';

const text = '{"decimal":2.370,"long":9123372036854000123,"big":2.3e+500}';
console.log(JSON.stringify(JSON.parse(text)))
// {"decimal":2.37,"long":9123372036854000000,"big":null}
console.log(stringify(parse(text)))
// {"decimal":2.370,"long":9123372036854000123,"big":2.3e+500}
方式二

对深层次的数据,上面的方式好像有些问题。

// 对number值进行转换,如果不用这个方法,Number类型就变成LosslessNumber
function reviver(key, value) {
  if (value && value.isLosslessNumber) {
    if (Number.isSafeInteger(parseInt(value.value))) {
      return parseInt(value.value)
    }
    return value.value
  } else {
    return value
  }
}

const text = '{"decimal":2.370,"long":9123372036854000123,"big":2.3e+500}';
const LosslessJSON = require('lossless-json');
console.log(LosslessJSON.parse(text, reviver));
// {decimal: 2, long: '9123372036854000123', big: 2}

这样就可以解决了

参考链接:
https://github.com/josdejong/lossless-json
https://www.jianshu.com/p/96ea92489398

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容