一行程式碼解決JS數字大於2^53精度錯誤的問題

KevinCC發表於2021-05-15
行程JS

    服務端使用長整型（Int64）的數字，在瀏覽器端使用JS的number型別接收時，當這個實際值超過 （2^53-1）時，JS變數的值和實際值就會出現不相等的問題。常見場景比如使用雪花演算法生成Id。

    在服務端，數字長整型有64位（bit），第一位為符號位，後邊為數字位。

　JS引擎中第一位為符號位，第二位到第十二位為指數位，數字位只剩最後52位，如圖:

    52位能表示的最大值為2的53次方-1，所以當服務端返回的值超過這個值時，js端就會出現位數丟失的問題，造成實際值和變數值錯誤的問題。

 

這個問題解決的方式有兩種：

第一種：服務端處理

    將數字轉為字串返回到瀏覽器端，可以通過全域性的序列化配置設定，但這種方式增加了服務端的負擔，同時在服務端和服務端介面對接時容易帶來小麻煩。這種方式直接略過，感興趣的同學可以自己研究。

第二種：瀏覽器端處理

    瀏覽器在從服務端接收資料時，需要先獲取請求的響應報文，再根據資料型別將報文序列化，常見的如json格式。

   這裡介紹的方式就是在http請求拿到報文，序列化為具體資料型別之前，用正則將報文裡的大數字（字元長度超過15）替換處理。 所幸當前基本所有js的http請求元件都提供了原始報文的處理擴充套件，得以讓我們能用一行程式碼就解決這個問題。

 正則使用示例：

使用此正則，在瀏覽器拿到報文還未序列化之前處理即可，以下是兩種不同控制元件的使用示例：

Axios 使用示例：

axios({
      method: method, 
     url: url,
     data: data, 
     transformResponse: [function (data) {
           data = data.replace(/"(\s*):(\s*)(\d{15,})/g, '":"$3"');
        return JSON.parse(data);
      }],
 })

　　

umi-request 使用示例（配置Interceptors）：

responseInterceptors: [(res: Response, options: any) => {
    return res.text().then(textBody => {
    var resData = textBody.replace(/"(\s*):(\s*)(\d{15,})/g, '":"$3"');              
    return new Response(resData, options)
    });
}]

　　

如果你已經看到這裡，並且感覺還行的話可以在下方點個贊，或者也可以關注我的公總號（見二維碼），如需轉載請註明出處

 _________________________________________



相關文章