vue3中,如何解决数字精度问题(big.js的使用)
1.安装big.js
npm install big.js --save
2.引入使用
<script setup>
import { ref, computed } from 'vue';
import Big from 'big.js';const sum = Big(0.1).plus(0.2); // 加法
const diff = Big(100).minus(25.5); // 减法
const product = Big(19.9).times(100); // 乘法
const quotient = Big(3).div(1); // 除法
console.log(sum.toString()); // "0.3"
console.log(diff.toString()); // "74.5"
console.log(product.toString()); // "1990"
console.log(quotient.toString()); // "3"</script>
3.说明
(1)需要先将数字格式化Big格式,也就是Big(数字)
(2)加法:.plus(数字)、减法:.minus(数字)、乘法:.times(数字)、除法:.div(数字)
(3)计算完后需要转换成字符串类型(.toString())或者数字类型(.toNumber())
(4)保留2位小数.round(2)
4.示例
使用Big.js前
function handleLineLength(){lineDetail.value.lineLength = 0;lineSonList.value.forEach(item=>{lineDetail.value.lineLength+=Number(item.segmentLength.toFixed(2));})
}
使用Big.js后
import Big from 'big.js';function handleLineLength() {lineDetail.value.lineLength = Big(0); // 初始化为 Big 类型的 0lineSonList.value.forEach(item => {// 将每个 segmentLength 转换为 Big 类型,并保留两位小数const segmentLength = Big(item.segmentLength).round(2);lineDetail.value.lineLength = lineDetail.value.lineLength.plus(segmentLength);});// 将最终结果转换为数字类型lineDetail.value.lineLength = lineDetail.value.lineLength.toNumber();
}