JS精度问题终结者--math.js之Vue中使用心得

女爷i 2022-05-20 22:08 346阅读 0赞

大家有没有遇到过很奇怪的问题在js中0.1+0.2却不等于0.3

0.1+0.2
    0.30000000000000004

这尼玛很尴尬了就，原来是二进制搞的鬼。。（具体原因不说了，想了解的自行百度就好了）  
出现问题就要想解决办法的，这就是math.js出场的原因。

**首先**  
引入math.js

npm install mathjs

**其次**  
在Vue组建中引入

let math = require('mathjs');

**最后**  
当然是使用了  
其中最强大的就是链式写法  
UI层

<ul>
 <li v-for="(item,index) in (this.accountList)" :key="index">
 {
 {item.coin_type | coinType}}
 <div class="useFreeze">
 {
 {useable(item) | toFix}} 可用
 {
 {item.frozen_amount | toFix}} 冻结
 </div>
 </li>
 </ul>

逻辑层

methods{ 
    	useable(item){ 
    	  return math.format(math.chain(math.bignumber(item.amount)).subtract(math.bignumber(item.frozen_amount)).done());
    	}
    }

这是我自己写的方法，是解决减法中出现的精度问题。  
**这里做一些说明**  
math.format()的作用是类似toString()的作用，文章出自于  
详见http://mathjs.org/docs/core/chaining.html （在文章的最下边有提到）

math.chain(math.bignumber()).subtract(math.bignumber()).done();

math.bignumber()转换成四舍五入的数或者将字符串转换成数字。  
详见http://mathjs.org/docs/datatypes/bignumbers.html （在文章的下部）

还要说一下 add（加）、 subtract（减）、multiply（乘）、divide（除）

举个小栗子

0.1＋0.2
    math.format(math.chain(math.bignumber(0.1)).add(math.bignumber(0.2)).done());
    
    0.2-0.1
    math.format(math.chain(math.bignumber(0.2)).subtract(math.bignumber(0.1)).done());
    
    0.1*0.2
    math.format(math.chain(math.bignumber(0.1)).multiply(math.bignumber(0.2)).done());
    
    0.1/0.2
    math.format(math.chain(math.bignumber(0.1)).divide(math.bignumber(0.2)).done());

如果大家想深如了解，具体大家就可以自行访问github和官网即可。

另附链接

[ gitHub][gitHub]  
[官网][Link 1]

[gitHub]: https://github.com/josdejong/mathjs
[Link 1]: http://mathjs.org/index.html