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

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

Number.MAX_SAFE_INTEGER  //值為9007199254740991

json-bigint：可以像JSON.parse一樣方便轉換

用法：

//導入
import JSONbig from 'json-bigint'

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

//axios在這里默認把響應體從json字符串轉成了js對象
axios.defaults.transformResponse = [function (data) {
console.log(data)//這里的data是字符串，在這個字符串的是沒有丟失精度的，所以需要在這里先把精度調好

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

//如果不寫這個方法，返回的數(shù)據(jù)是自動就轉為json對象的了，如果寫了，就要自己轉為對象，即return JSON.parse(data)

注意：

alert會自動調用了toString()方法

只要經過json-bigint轉換后的id，直接toString()，就能得到真實的id

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

1.json-bigint的作用和原理

json-bigint的作用：

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

情景：

• 后端服務器返回的文章id已經大大超過了js語言可以表達的最大整型范疇，因而直接使用的時候會發(fā)生變型:

例如：

• 本質id為：1215831343376629760
• 變型后為：1215831343376629800

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

• javascript中可以表達的最大整型可以通過如下代碼獲得：

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

json-bigint的原理：

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

github網站相關介紹： 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) // 字符串--->對象
console.log(obj.value) // 9223372036854775807(正確)

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

結論：

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

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

示例：

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

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

本質上：服務器返回信息的類型是“字符串”，要經過轉換器做JSONbig.parse()轉化處理，所以響應攔截器接收到的是對象。

步驟：

1.安裝工具依賴包：

npm i json-bigint

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

import JSONbig from 'json-bigint'

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

注意：

1.上述數(shù)據(jù)轉換一定要設置else，以便對空字符串做處理，因為服務器有時候會返回空字符串信息。

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論