js运算精度丢失,用这个库试试?

简述

js进行算术运算时,有时候会遇到以下几个问题:

arduino 复制代码
// 控制台可以尝试以下代码
0.1 + 0.2  // 0.30000000000000004
0.3 - 0.1  // 0.19999999999999998
19.9 * 100 // 1989.9999999999998

为什么会遇到这个问题呢?

由于在计算机运算过程中,十进制的数会被转化为二进制来运算,有些浮点数用二进制表示是无穷的,浮点数运算标准(IEEE 754)64位双精度的小数部分最多支持53位二进制位,运算过程中超出的二进制位会被截断。运算完后再转为十进制。所以产生了精度问题。

为了解决此问题,整理了一些第三方的js库。

相关js库推荐

js库名称 备注
Math.js JavaScript 和 Node.js 的扩展数学库
decimal.js javaScript 任意精度的库
big.js 一个轻量的任意精度库

big.js

版本介绍

本次用的big.js版本为6.2.1

页面引入

下载big.js:

访问以下页面,在网页中右键另存为即可

ruby 复制代码
// 因为作为本地测试,就不下载压缩版本了
https://cdn.jsdelivr.net/npm/big.js@6.2.1/big.js
​
// 若需要压缩版本
https://cdn.jsdelivr.net/npm/big.js@6.2.1/big.min.js

引入到html页面:

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Big js</title>
</head>
<body>
  <!-- 引入页面 -->
  <script src="./js/big.js"></script>
  <script>
    // 尝试Big构造方法
    console.log('Big', Big)
  </script>
</body>
</html>
工程化项目
复制代码
npm install big.js

在所需页面引入:

javascript 复制代码
// 现在一般用 es 模块引入
import Big from 'big.js';
使用

基本演示:

javascript 复制代码
// 加
let a = new Big(0.1)
a = a.plus(0.2)
​
// 由于运算结果是个对象,所以展示以下值
console.log('a', a) //  {s: 1, e: -1, c: Array(1)}
// 可以使用 Number || toNumber() 转为我们需要的数值
console.log('a', a.toNumber) || console.log('a', Number(a)) // 0.3

可以链式调用:

scss 复制代码
x.div(y).plus(z).times(9)
参考文档
arduino 复制代码
// big.js 项目 github地址
https://mikemcl.github.io/big.js
​
// big.js 官方文档地址
https://mikemcl.github.io/big.js/
​
// 这篇文档将api写的很全了
https://blog.csdn.net/a123456234/article/details/132305810
相关推荐
要加油哦~5 分钟前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
Q_Q51100828519 分钟前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
哆啦A梦15881 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫1 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
Q_Q5110082851 小时前
python基于web的汽车班车车票管理系统/火车票预订系统/高铁预定系统 可在线选座
spring boot·python·django·flask·node.js·汽车·php
yinuo1 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li2 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐2 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586542 小时前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊3 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php