保姆級Decimal.js使用教程(解決js精度問題)
精度問題控制臺圖樣
如果銀行的業(yè)務你這樣做,不知道要損失多少錢,這樣是不行的,計算的不準確是需要背鍋的,我們給后端去做吧,其實我們前端也是可以做的,引入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的結果', 8.12*100) console.log('打印9.12*100的結果', 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()方法將結果轉換為JavaScript原生的Number類型,并綁定到Vue組件的result數(shù)據(jù)屬性上,以在模板中顯示計算結果。
總結
到此這篇關于保姆級Decimal.js使用的文章就介紹到這了,更多相關Decimal.js解決精度問題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
javascript將DOM節(jié)點添加到文檔的方法實例分析
這篇文章主要介紹了javascript將DOM節(jié)點添加到文檔的方法,對比分析了javascript的兩種節(jié)點創(chuàng)建的方法,涉及javascript節(jié)點操作及運行時間計算的相關技巧,需要的朋友可以參考下2015-08-08