使用bignumber.js在前端开发中解决IEEE 754数值格式带来的浮点数计算精度丢失问题

前言

本文主要介绍在vuecli3中如何引入bignumber.js，并用其解决浮点数精度丢失的问题，使得前端也能放心的进行浮点数的计算~~下面开始正文~

相关链接

API
GitHub地址
CDN引入地址

引入方式

1. CDN引入
   在vuecli3中，CDN引入插件主要分为四个步骤：

   // 第一步 在index.html中引入
   <script src="https://cdn.bootcdn.net/ajax/libs/bignumber.js/9.0.1/bignumber.min.js"></script>
   
   // 第二步 在vue.config.js文件中配置
   configureWebpack: {
       externals: {
           'bignumber': 'BigNumber'
       }
   }
   
   // 第三步 在main.js中应用
   const BigNumber = require('bignumber');
   Vue.use(BigNumber);
   
   // 第四步 在业务代码中使用
   test(){
       const n1 = new BigNumber(0.1);
       const n2 = n1.plus(0.2)
       return n2;
   },
   

2. 把包安装到本地

   // 第一步 npm install
   npm install bignumber.js
   
   // 引入 我是在全局的mixins.js文件中引入的
   // 关于mixins可以查看vue官网或者我的另一篇文章
   import BigNumber from 'bignumber.js';
   let mixins = Vue.mixin({
       methods: {
           $_count(arr, way) {
               // arr代表要进行计算的数值组成的数组 如[1,2,3];
               // way 代表要进行的运算，如times、plus
               let result = 0;
               arr = arr.map(item=>Number(item));
               // 取出第一项作为初始值，依次与后面各项进行运算
               result = arr.splice(0, 1)[0];
               arr.forEach(item=>{
                   // 此时的arr已经因为splice方法而失去了第一项
                   result = (new BigNumber(result))[way](item);
               })
               return result;
           }
       }
   })
   export default mixins;
   
   // 第三步 在业务代码中使用
   
   alert(this.$_count([0.1, 0.2], 'plus')); // '0.3'
   alert(this.$_count([22, 5, 10], 'minus')); // '7'
   alert(this.$_count([-1, 10, 88], 'times')); // '-880'

结语

在上面我们列举了bignumber.js的两种引入方式以及常用的方法，更多的方法大家也可以在官方文档中查阅，使用方法大体一致~~