保姆級Decimal.js使用教程(解決js精度問題)
精度問題控制臺圖樣
如果銀行的業(yè)務(wù)你這樣做,不知道要損失多少錢,這樣是不行的,計算的不準確是需要背鍋的,我們給后端去做吧,其實我們前端也是可以做的,引入Decimal.js
01.引入Decimal.js
decimal.js是使用的二進制來計算的,所以可以更好地實現(xiàn)格化式數(shù)學運算,對數(shù)字進行高精度處理;使用decimal類型處理數(shù)據(jù)可以保證數(shù)據(jù)計算更為精確,還可以節(jié)省儲存空間。
$ npm install --save decimal.js /** Node.js */ var Decimal = require('decimal.js') /** ES6 方式 */ import { Decimal } from 'decimal.js'
02.使用
<template> <div> test </div> </template> <script> import Decimal from 'decimal.js' export default { created() { console.log('打印8.12*100的結(jié)果', 8.12*100) console.log('打印9.12*100的結(jié)果', 9.12*100) let c = new Decimal(8.12).mul(new Decimal(100)) let d = new Decimal(9.12).mul(new Decimal(100)) console.log('c', c) console.log('d', d) } } </script>
加減乘除全上
const a = 9.98; const b = 8.03; // 加法 let c = new Decimal(a).add(new Decimal(b)) // 減法 let d = new Decimal(a).sub(new Decimal(b)) // 乘法 let e = new Decimal(a).mul(new Decimal(b)) // 除法 let f = new Decimal(a).div(new Decimal(b))
附:Vue項目完整例子
下面是一個完整的示例,展示了如何在Vue項目中使用decimal.js庫進行高精度計算:
<template> <div> <p>0.1 + 0.2 = {{ result }}</p> </div> </template> <script> import { Decimal } from 'decimal.js'; export default { data() { return { result: null, }; }, mounted() { const num1 = new Decimal(0.1); const num2 = new Decimal('0.2'); const sum = num1.plus(num2); this.result = sum.toNumber(); }, }; </script>
在上述示例中,我們通過Decimal類創(chuàng)建了兩個Decimal對象,并使用plus()方法執(zhí)行加法運算。最后,通過toNumber()方法將結(jié)果轉(zhuǎn)換為JavaScript原生的Number類型,并綁定到Vue組件的result數(shù)據(jù)屬性上,以在模板中顯示計算結(jié)果。
總結(jié)
到此這篇關(guān)于保姆級Decimal.js使用的文章就介紹到這了,更多相關(guān)Decimal.js解決精度問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
細品javascript 尋址,閉包,對象模型和相關(guān)問題
似乎某些程序員的集合是不相交的,就好像JS程序員和玩編譯原理和CPU指令的匯編程序員就幾乎沒有交叉。前些日子討論的火熱的“作用域鏈”問題,說白了就是尋址問題,不過,這個在C中十分簡單的問題卻被JS這個動態(tài)語言弄得很復雜。2009-04-04javascript將DOM節(jié)點添加到文檔的方法實例分析
這篇文章主要介紹了javascript將DOM節(jié)點添加到文檔的方法,對比分析了javascript的兩種節(jié)點創(chuàng)建的方法,涉及javascript節(jié)點操作及運行時間計算的相關(guān)技巧,需要的朋友可以參考下2015-08-08