JavaScript Number精度丟失問(wèn)題的解決方案
問(wèn)題描述
JavaScript 的 Number 類(lèi)型的最大安全整數(shù)是 9007199254740991，超過(guò)這個(gè)值的數(shù)字會(huì)出現(xiàn)精度丟失。例如，1234567890123456789 會(huì)被轉(zhuǎn)為 1234567890123456700，導(dǎo)致錯(cuò)誤。
問(wèn)題的根源
Long 類(lèi)型是許多后端語(yǔ)言（如 Java）用于表示大整數(shù)的類(lèi)型，而 JavaScript 的 Number 類(lèi)型不能正確表示如此大的數(shù)字。
// 后端：Java Long longId = 1234567890123456789L;
前端接收到該 ID 后，會(huì)出現(xiàn)精度丟失：
// 前端：JavaScript let itemId = 1234567890123456789; // 錯(cuò)誤，精度丟失 console.log(itemId); // 輸出：1234567890123456700
解決方案
將 Long 類(lèi)型 ID 轉(zhuǎn)為字符串，并確保前后端都使用字符串形式傳遞 ID，避免精度丟失。
- 后臺(tái)：將
Long類(lèi)型 ID 轉(zhuǎn)為字符串。 - 前端：接收 ID 時(shí)保持字符串類(lèi)型，避免轉(zhuǎn)換為
Number。
實(shí)施方案
后端（Java 示例）：
@RestController
public class ItemController {
@GetMapping("/items/{id}")
public ResponseEntity<ItemVO> getItem(@PathVariable Long id) {
Item item = itemService.getItemById(id);
?
ItemVO itemVO = new ItemVO();
itemVO.setId(String.valueOf(id));
?
return ResponseEntity.ok(itemVO);
}
}
前端（JavaScript 示例）：
// 使用 axios 請(qǐng)求 API
axios.get('/api/items/1234567890123456789')
.then(response => {
const itemId = response.data.id; // 保持為字符串
console.log(itemId); // 輸出原始字符串
})
.catch(error => {
console.error('Error:', error);
});
到此這篇關(guān)于JavaScript Number精度丟失問(wèn)題的解決方案的文章就介紹到這了,更多相關(guān)JavaScript Number精度丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
cocos2dx骨骼動(dòng)畫(huà)Armature源碼剖析(二)
本篇主要給大家介紹cocos2dx骨骼動(dòng)畫(huà)Armature源碼剖析之flash中數(shù)據(jù)與xml中數(shù)據(jù)關(guān)系，需要的朋友一起來(lái)學(xué)習(xí)吧2015-09-09
js實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成背景顏色
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成背景顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
超詳細(xì)小程序定位地圖模塊全系列開(kāi)發(fā)教學(xué)
這篇文章主要介紹了超詳細(xì)小程序定位地圖模塊全系列開(kāi)發(fā)教學(xué)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
純HTML+CSS+JS實(shí)現(xiàn)優(yōu)雅的Popup彈窗功能(附完整代碼與最佳實(shí)踐)
在互聯(lián)網(wǎng)時(shí)代,彈窗是一種常見(jiàn)的交互方式,它可以用于顯示重要信息、廣告、登錄表單等,這篇文章主要介紹了純HTML+CSS+JS實(shí)現(xiàn)優(yōu)雅的Popup彈窗功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-02-02
本文為大家詳細(xì)介紹下js如何替換字符串中所有，肯定包含了你所想要的，具體的實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片
關(guān)于javascript隨機(jī)數(shù)的，很早以前的文章了，不過(guò)內(nèi)容還是不錯(cuò)的，如果想要更多的效果，可以去腳本之家搜下。2009-12-12
JS中call()和apply()的功能及用法實(shí)例分析
這篇文章主要介紹了JS中call()和apply()的功能及用法,結(jié)合實(shí)例形式詳細(xì)分析了JS中call()和apply()的功能、區(qū)別、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
javascript dom 操作詳解 js加強(qiáng)
javascript dom 操作詳解 js加強(qiáng)操作實(shí)現(xiàn)代碼。2009-07-07
根據(jù)分辨率不同，調(diào)用不同的css文件...2006-07-07
通過(guò)js解析URL參數(shù)，本文創(chuàng)建了一個(gè)js類(lèi)，并引用Request.QueryString，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08