JS解决加减乘除导致的精度问题

一张张li

于 2024-08-13 04:12:29 发布

阅读量62

点赞数

文章标签： javascript 前端开发语言 ecmascript vue.js

在JavaScript中，由于浮点数的存储方式，直接使用原生的加减乘除运算可能会遇到精度问题。下面是一个简单的示例

console.log(0.1 + 0.2); // 输出: 0.30000000000000004
console.log(1.23456789 - 0.23456789); // 输出: 0.9999999999999999
console.log(0.1 * 0.2); // 输出: 0.020000000000000004
console.log(1.23456789 / 0.23456789); // 输出: 5.263157894736842

解析

加法:

0.1 + 0.2 的结果不是预期的 0.3，而是 0.30000000000000004。
这是因为 0.1 和 0.2 都不能精确地表示为二进制浮点数。

减法:

1.23456789 - 0.23456789 的结果不是预期的 1，而是 0.9999999999999999。
类似地，这是因为两个数都不能精确表示为二进制浮点数。

乘法:

0.1 * 0.2 的结果不是预期的 0.02，而是 0.020000000000000004。
乘法同样受到浮点数表示不准确的影响。

除法:

1.23456789 / 0.23456789 的结果不是精确的 5.263157894736842，尽管看起来接近，但在某些情况下这种微小的差异可能导致错误。

问题解决

import Decimal from 'decimal.js';

// 使用Decimal.js的示例
console.log(new Decimal('0.1').plus('0.2')); // 输出: 0.3
console.log(new Decimal('1.23456789').minus('0.23456789')); // 输出: 1
console.log(new Decimal('0.1').times('0.2')); // 输出: 0.02
console.log(new Decimal('1.23456789').dividedBy('0.23456789')); // 输出: 5.263157894736842

使用Decimal.js 解决JS精度问题

Decimal.js 是一个精确的十进制算术库，非常适合处理金融计算等需要高精度的场景。它提供了丰富的API来处理各种数值运算，包括加减乘除、指数运算等。

安装

如果你使用的是Vue项目，可以通过npm安装decimal.js：

导入

在你的Vue组件或脚本中导入Decimal.js：

基本使用

初始化：在使用之前，可以设置一些全局配置，如小数点后的位数等。
创建Decimal对象：通过传递数字或字符串创建Decimal对象。
执行运算：使用提供的方法进行算术运算。

<template>
  <div>
    <p>{{ result }}</p>
  </div>
</template>

<script>
import Decimal from 'decimal.js';

export default {
  data() {
    return {
      result: '',
    };
  },
  created() {
    this.performCalculations();
  },
  methods: {
    performCalculations() {
      // 初始化Decimal.js的配置
      Decimal.set({ precision: 20 }); // 设置精度为20位

      // 创建Decimal对象
      const num1 = new Decimal('123.456');
      const num2 = new Decimal('789.123');

      // 执行运算
      const sum = num1.plus(num2); // 加法
      const difference = num1.minus(num2); // 减法
      const product = num1.times(num2); // 乘法
      const quotient = num1.dividedBy(num2); // 除法
      const power = num1.pow(2); // 幂运算

      // 输出结果
      this.result = `
        Sum: ${sum.toString()},
        Difference: ${difference.toString()},
        Product: ${product.toString()},
        Quotient: ${quotient.toString()},
        Power: ${power.toString()}
      `;
    },
  },
};
</script>