保姆级Decimal.js使用教程(解决js精度问题)

目录

• 精度问题控制台图样
• 01.引入Decimal.js
• 02.使用
• 加减乘除全上
• 附：Vue项目完整例子
• 总结 

精度问题控制台图样

如果银行的业务你这样做，不知道要损失多少钱，这样是不行的，计算的不准确是需要背锅的，我们给后端去做吧，其实我们前端也是可以做的，引入Decimal.js

01.引入Decimal.js

decimal.js是使用的二进制来计算的，所以可以更好地实现格化式数学运算，对数字进行高精度处理；使用decimal类型处理数据可以保证数据计算更为精确，还可以节省储存空间。

$ 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类创建了两个Decimal对象，并使用plus()方法执行加法运算。最后，通过toNumber()方法将结果转换为JavaScript原生的Number类型，并绑定到Vue组件的result数据属性上，以在模板中显示计算结果。

总结