json-bigint的介绍和使用-解决Javascript的有关大整数问题

摘要:
JavaScript可以精确表示的整数范围在-2^53和2^53之间。超出这个范围,就不可能精确表示这个值,这使得JavaScript不适合科学和金融领域的精确计算。幸运的是,axios在内部使用JSON来帮助我们使用数据。Parse()将后端返回的数据转换为JavaScript对象。Json bigint是一个第三方软件包,可以帮助我们解决这个问题。Npmijson bigint以下是使用它的一个简单示例。

JavaScript 能够准确表示的整数范围在-2^53到 2^53之间(不含两个端点),超过这个范围,无法精确表示这个值,这使得 JavaScript 不适合进行科学和金融方面的精确计算。

先举个例子

Math.pow(2, 53) // 9007199254740992

9007199254740992  // 9007199254740992
9007199254740993  // 9007199254740992

Math.pow(2, 53) === Math.pow(2, 53) + 1
// true

上面代码中,超出 2 的 53 次方之后,一个数就不精确了。

ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量,用来表示这个范围的上下限。

Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
// true
Number.MAX_SAFE_INTEGER === 9007199254740991
// true

Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
// true
Number.MIN_SAFE_INTEGER === -9007199254740991
// true

上面代码中,可以看到 JavaScript 能够精确表示的极限。

后端返回的数据一般都是 JSON 格式的字符串。

'{ "id": 9007199254740995, "name": "Jack", "age": 18 }'

如果这个字符不做任何处理,你能方便的获取到字符串中的指定数据吗?非常麻烦。所以我们要把它转换为 JavaScript 对象来使用就很方便了。

幸运的是 axios 为了方便我们使用数据,它会在内部使用 JSON.parse() 把后端返回的数据转为 JavaScript 对象。

// { id: 9007199254740996, name: 'Jack', age: 18 }
JSON.parse('{ "id": 9007199254740995, "name": "Jack", "age": 18 }')

可以看到,超出安全整数范围的 id 无法精确表示,这个问题并不是 axios 的错。

了解了什么是大整数的概念,接下来的问题是如何解决?

json-bigint 是一个第三方包,它可以帮我们很好的处理这个问题。

使用它的第一步就是把它安装到你的项目中。

npm i json-bigint

下面是使用它的一个简单示例。

const jsonStr = '{ "art_id": 1245953273786007552 }'

console.log(JSON.parse(jsonStr)) // 1245953273786007600
// JSON.stringify()

// JSONBig 可以处理数据中超出 JavaScript 安全整数范围的问题
console.log(JSONBig.parse(jsonStr)) // 把 JSON 格式的字符串转为 JavaScript 对象

// 使用的时候需要把 BigNumber 类型的数据转为字符串来使用
console.log(JSONBig.parse(jsonStr).art_id.toString()) // 1245953273786007552

console.log(JSON.stringify(JSONBig.parse(jsonStr)))

console.log(JSONBig.stringify(JSONBig.parse(jsonStr))) // 把 JavaScript 对象 转为 JSON 格式的字符串转

json-bigint的介绍和使用-解决Javascript的有关大整数问题第1张

json-bigint 会把超出 JS 安全整数范围的数字转为一个 BigNumber 类型的对象,对象数据是它内部的一个算法处理之后的,我们要做的就是在使用的时候转为字符串来使用。

解决方法:(案例)
通过 Axios 请求得到的数据都是 Axios 处理(JSON.parse)之后的,我们应该在 Axios 执行处理之前手动使用 json-bigint 来解析处理。Axios 提供了自定义处理原始后端返回数据的 API:transformResponse 。

import axios from 'axios'

import jsonBig from 'json-bigint'

var json = '{ "value" : 9223372036854775807, "v2": 123 }'

console.log(jsonBig.parse(json))

const request = axios.create({
  baseURL: '你接口的基础路径', // 接口基础路径

  // transformResponse 允许自定义原始的响应数据(字符串)
  transformResponse: [function (data) {
    try {
      // 如果转换成功则返回转换的数据结果
      return jsonBig.parse(data)
    } catch (err) {
      // 如果转换失败,则包装为统一数据格式并返回
      return {
        data
      }
    }
  }]
})

export default request

更多内容请参见:

https://www.teqng.com/2021/07/29/node-js-%E4%B8%AD%E9%81%87%E5%88%B0%E5%A4%A7%E6%95%B0%E5%A4%84%E7%90%86%E7%B2%BE%E5%BA%A6%E4%B8%A2%E5%A4%B1%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%EF%BC%9F/#JavaScript_zui_da_an_quan_zheng_shu

免责声明:文章转载自《json-bigint的介绍和使用-解决Javascript的有关大整数问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ES检索分组统计异常: ElasticsearchStatusException [Elasticsearch exception [type=illegal_argument_exception【操作系统】《计算机操作系统》汤小丹 第1章 操作系统引论下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS/jQuery刷新iframe的方法

一、js 页面刷新1.  reload 方法,该方法强迫浏览器刷新当前整个页面。  语法:location.reload([bForceGet])  参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") <script lang...

从V8引擎编程理解javascript执行环境

一、V8简介 google code上对它的解释如下: V8 is Google's open source JavaScript engine. V8 is written in C++ and is used in Google Chrome, the open source browser from Google. V8 implements...

js刷新页面方法 -- (转)

1,reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法,该方法通过指定URL替换当前缓存在...

C#操作JSON学习

JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript语法标准的一个子集。 JSON采用完全独立于语言的文本格式,可以很容易在各种网络、平台和程序之间传输。JSON的语法很简单,易于人阅读和编写,同时也易于机器解析和生成。 JSON与XML的比较◆可读性JSON和XML的可读性相比较...

JavaScript位移运算多个大于号的使用方法

JavaScript中的无符号位移运算符是用三个大于号来表示的 计算方法 例 100>>>2 100的二进制是 01100100 向右移2位后为 00011001 最后结果为25 100>>>2==25 无符号位移(>>>)和有符号位移(>>)的区别是 有符号位移运算时如果数字为正数时位移后...

一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect

       在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表,         特别是数据项比较多的时候,用户筛选起来就会很容易。         如果考虑多选的场景,我想以下的实现方式很多时候是能够满足要求的: 带复选框(checkbox)...