vue项目解决计算后浮点数精度问题

1.1 问题描述

计算出的结果本来应该为13.8386，但是这里因为js精度问题，导致后边多了一串的0000001。

1.2 使用场景

• 求和，每个物品的单价*数量

1.3 解决办法

• 引入第三方库Decimal

1.4 vue项目中Decimal安装步骤

1.4.1 安装Decimal

npm install decimal.js

1.4.2 引入Decimal

import Decimal from 'decimal.js';

1.4.3 使用Decimal解决精度问题

// 这里一定要用Decimal来初始化
this.totalPrice = new Decimal(0)
// 循环遍历数组
this.medicine.map(item => {
   
  // 数量
  const num = new Decimal(item.num);
  // 单价
  const price = new Decimal(item.price);
  // 数量*单价
  const product = num.times(price);
  // 只有用Decimal初始化后，才会有plus这个方法
  // 求总价
  this.totalPrice = this.totalPrice.plus(product);
})
// 把totalPrice转为数字类型
this.totalPrice = this.totalPrice.toNumber();

1.5 最终效果