json-bigint處理大數(shù)字問(wèn)題

js里面的整數(shù)有安全范圍，即最大能顯示的范圍，超過(guò)了這個(gè)范圍可能會(huì)精度丟失

Number.MAX_SAFE_INTEGER  //值為9007199254740991

json-bigint：可以像JSON.parse一樣方便轉(zhuǎn)換

用法：

//導(dǎo)入
import JSONbig from 'json-bigint'

//可以通過(guò)axios的transformResponse方法，這個(gè)方法的作用是在傳遞給then/catch前，允許修改響應(yīng)數(shù)據(jù)

//axios在這里默認(rèn)把響應(yīng)體從json字符串轉(zhuǎn)成了js對(duì)象
axios.defaults.transformResponse = [function (data) {
console.log(data)//這里的data是字符串，在這個(gè)字符串的是沒(méi)有丟失精度的，所以需要在這里先把精度調(diào)好

	try {
	//作用1：把json字符串轉(zhuǎn)為js對(duì)象
	//作用2：把里面的大數(shù)字做安全處理
	 return JSONbig.parse(data)
	}catch(){
	return data;
	}
	//return data;
}]

//如果不寫這個(gè)方法，返回的數(shù)據(jù)是自動(dòng)就轉(zhuǎn)為json對(duì)象的了，如果寫了，就要自己轉(zhuǎn)為對(duì)象，即return JSON.parse(data)

注意：

alert會(huì)自動(dòng)調(diào)用了toString()方法

只要經(jīng)過(guò)json-bigint轉(zhuǎn)換后的id，直接toString()，就能得到真實(shí)的id

超大整型數(shù)字處理json-bigint的應(yīng)用

1.json-bigint的作用和原理

json-bigint的作用：

項(xiàng)目中如果使用一些超出javascript語(yǔ)言限制的超大整型數(shù)字信息，該數(shù)字會(huì)變形為其他信息，為了避免產(chǎn)生問(wèn)題，可以通過(guò)json-bigint做轉(zhuǎn)換，使得超大整型數(shù)字可以正常使用，這就是json-bigint的作用。

情景：

• 后端服務(wù)器返回的文章id已經(jīng)大大超過(guò)了js語(yǔ)言可以表達(dá)的最大整型范疇，因而直接使用的時(shí)候會(huì)發(fā)生變型:

例如：

• 本質(zhì)id為：1215831343376629760
• 變型后為：1215831343376629800

console.log(1215831343376629760)    // 輸出為：1215831343376629800

• javascript中可以表達(dá)的最大整型可以通過(guò)如下代碼獲得：

console.log( Number.MAX_SAFE_INTEGER )
// 輸出：9007199254740991

json-bigint的原理：

json-bigint會(huì)把超大整型的數(shù)字信息，拆分為小段信息存儲(chǔ)到數(shù)組的各個(gè)元素中，待使用的時(shí)候再拼接到一起變?yōu)樽址?/p>

github網(wǎng)站相關(guān)介紹： https://github.com/sidorares/json-bigint

json-bigint使用示例：

var JSONBig = require('json-bigint');  // 需要先安裝 npm i json-bigint
var str = '{ "value" : 9223372036854775807, "v2": 123 }';

var obj = JSONBig.parse(str) // 字符串--->對(duì)象
console.log(obj.value) // 9223372036854775807(正確)

var obj2 = JSON.parse(str) // 字符串--->對(duì)象
console.log(obj2.value) // 9223372036854776000(錯(cuò)誤)

結(jié)論：

• json-bigint會(huì)對(duì)一個(gè)包含超大整型信息的“字符串”做轉(zhuǎn)換處理變?yōu)閷?duì)象，這個(gè)對(duì)象可以獲得正確的超大整型數(shù)字信息。

2.超大整型數(shù)字的具體處理

示例：

• 應(yīng)用超大整型數(shù)字處理技術(shù)對(duì)接口返回的文章id信息做處理，使得可以被正確接收和使用。

• 服務(wù)器給客戶端返回?cái)?shù)據(jù)的第一手處理者是 “轉(zhuǎn)換器( transformResponse )”，轉(zhuǎn)換器處理完畢再交給響應(yīng)攔截器使用，故要對(duì)超大整型數(shù)字信息做處理，下手點(diǎn)是"轉(zhuǎn)換器"(響應(yīng)攔截器獲得數(shù)據(jù)已經(jīng)是變形后的內(nèi)容了)

本質(zhì)上：服務(wù)器返回信息的類型是“字符串”，要經(jīng)過(guò)轉(zhuǎn)換器做JSONbig.parse()轉(zhuǎn)化處理，所以響應(yīng)攔截器接收到的是對(duì)象。

步驟：

1.安裝工具依賴包：

npm i json-bigint

2.在src/utils/ax.js中引入json-bigint模塊，對(duì)服務(wù)器返回的信息做處理，具體通過(guò)axios的 “數(shù)據(jù)轉(zhuǎn)換” 機(jī)制實(shí)現(xiàn)：

import JSONbig from 'json-bigint'

// 服務(wù)器端返回，數(shù)據(jù)轉(zhuǎn)換器，應(yīng)用
axios.defaults.transformResponse = [function (data) {
  // data的返回形式有兩種
  // 1. 實(shí)體字符串
  // 2. 空字符串(不能轉(zhuǎn)的)
  // JSONbig.parse針對(duì)超大整型進(jìn)行處理，其他信息不給處理
  if (data) {
    return JSONbig.parse(data)
  }
  return data
}]

注意：

1.上述數(shù)據(jù)轉(zhuǎn)換一定要設(shè)置else，以便對(duì)空字符串做處理，因?yàn)榉?wù)器有時(shí)候會(huì)返回空字符串信息。

2. json-bigint處理的是字符串類型的信息，超大整型數(shù)字給處理，普通信息不給與處理。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論