保姆级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解决精度问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • webpack使用及如何搭建cesium三维地球环境

    webpack使用及如何搭建cesium三维地球环境

    这篇文章主要介绍了webpack快速上手之搭建cesium三维地球环境,本文使用的是webpack5,webpack5 升级后默认是不支持polyfill的,编译时会报错,本文主要介绍了Cesium以及Webpack的使用,如何将Cesium一步步地集成到Webpack中,需要的朋友可以参考下
    2023-11-11
  • JS实现动态无缝轮播

    JS实现动态无缝轮播

    这篇文章主要为大家详细介绍了JS实现动态无缝轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript如何判断对象有某属性

    JavaScript如何判断对象有某属性

    这篇文章主要介绍了JavaScript如何判断对象有某属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS设置cookie、读取cookie、删除cookie

    JS设置cookie、读取cookie、删除cookie

    Js操作Cookie总结(设置,读取,删除),工作中经常会用到的哦!下面是详细代码,如有错误,请留言指正!
    2015-04-04
  • Markdown与Bootstrap相结合实现图片自适应属性

    Markdown与Bootstrap相结合实现图片自适应属性

    Markdown 是一种轻量级的标记语言,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。接下来通过本文给大家介绍Markdown与Bootstrap相结合实现图片自适应属性,感兴趣的朋友一起学习吧
    2016-05-05
  • 详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)

    详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)

    最近项目需求要生成一个倒数7天的数组,下面小编把我的实现思路和代码整理分享给大家,供大家参考,需要的朋友可以参考下
    2015-10-10
  • JavaScript 中问号的三种用法 ??和?.以及?:

    JavaScript 中问号的三种用法 ??和?.以及?:

    本文主要介绍了JavaScript 中问号的三种用法 ??和?.以及?: ,分别是空值合并操作符、可选链操作符和三目运算,具有一定的参考价值,感兴趣的可以了解一下
    2025-04-04
  • 十分钟教你上手ES2020新特性

    十分钟教你上手ES2020新特性

    这篇文章主要介绍了十分钟教你上手ES2020新特性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript实现无阻塞加载的常用方式

    JavaScript实现无阻塞加载的常用方式

    在 JavaScript 中,无阻塞加载(Non-blocking Loading)是优化网页性能的关键技术,通过避免脚本阻塞页面渲染和其他资源的加载,提升用户体验,以下是实现无阻塞加载的常用方法及示例,需要的朋友可以参考下
    2025-03-03
  • Bootstrap 网站实例之单页营销网站

    Bootstrap 网站实例之单页营销网站

    这篇文章主要介绍了Bootstrap 网站实例之单页营销网站的相关资料,本文给大家介绍的非常详细具有一定的参考借鉴价值,需要的朋友可以参考下
    2016-10-10

最新评论