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

 更新时间:2024年05月07日 09:22:48   作者:码路老默007  
这篇文章主要给大家介绍了关于保姆级Decimal.js使用的相关资料,文中介绍的方法主要解决了js精度问题,decimal.js库它是一个强大的JavaScript库,用于解决浮点数计算精度不准确的问题,需要的朋友可以参考下

精度问题控制台图样

如果银行的业务你这样做,不知道要损失多少钱,这样是不行的,计算的不准确是需要背锅的,我们给后端去做吧,其实我们前端也是可以做的,引入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数据属性上,以在模板中显示计算结果。

总结 

到此这篇关于保姆级Decimal.js使用的文章就介绍到这了,更多相关Decimal.js解决精度问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • el-tree限制选中个数的实例

    el-tree限制选中个数的实例

    这篇文章主要介绍了el-tree限制选中个数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • 微信小程序 仿美团分类菜单 swiper分类菜单

    微信小程序 仿美团分类菜单 swiper分类菜单

    本文主要介绍了微信小程序仿美团分类菜单(swiper分类菜单)的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 一文详解preact的高性能状态管理Signals

    一文详解preact的高性能状态管理Signals

    这篇文章主要介绍了一文详解preact的高性能状态管理Signals,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的朋友可以参考一下
    2022-09-09
  • JS使用iView的Dropdown实现一个右键菜单

    JS使用iView的Dropdown实现一个右键菜单

    这篇文章主要介绍了JS使用iView的Dropdown实现一个右键菜单功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • IE iframe的onload方法分析小结

    IE iframe的onload方法分析小结

    在判断 iframe 是否加载完成的完美方法一文中,怿飞最后有如下两点补充。
    2010-01-01
  • javascript判断数组内是否重复的方法

    javascript判断数组内是否重复的方法

    这篇文章主要介绍了javascript判断数组内是否重复的方法,涉及javascript针对数组的相关操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 使用JavaScript计算当前时间前N个工作日的方法技巧

    使用JavaScript计算当前时间前N个工作日的方法技巧

    在Web开发中,处理日期和时间是常见的需求之一,特别是在金融、人力资源等领域,经常需要计算特定的日期范围或工作日,本文将深入探讨如何使用JavaScript计算当前时间前N个工作日,并提供详细的代码示例和实际开发中的技巧,需要的朋友可以参考下
    2025-02-02
  • JS继承之借用构造函数继承和组合继承

    JS继承之借用构造函数继承和组合继承

    这篇文章主要为大家详细介绍了JS继承之借用构造函数继承和组合继承,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JavaScript流程控制语句实例详解

    JavaScript流程控制语句实例详解

    JavaScript中的流程控制语句是编写复杂逻辑和控制程序执行顺序的关键元素,这篇文章主要介绍了JavaScript流程控制语句的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-12-12
  • js控制div及网页相关属性的代码

    js控制div及网页相关属性的代码

    js控制div及相关属性,对于需要控制页面内的元素的朋友可以参考下。
    2009-12-12

最新评论