js小数相加精度不准确的解决方案

news2024/12/24 8:47:41

目录

一、发现问题

二、为什么会出现精度误差

三、精度误差的原因

 四、如何解决精度出现误差的情况

1.使用toFixed()

2. 使用库,如decimal.js或bignumber.js


一、发现问题

在项目中总会出现数字需要相加的情况,但发现整数相加没问题,小数相加就出现问题了。

let add1 = 0.1+0.2;
let add2 = 0.11+0.22;
console.log(add1)
console.log(add2)

运行结果:

这结果肉眼可见的不对。

二、为什么会出现精度误差

0.1+0.2打眼一看就是0.3,但结果却是0.30000000000000004。

用if语句判断一下。

if(0.1+0.2==0.3){
	console.log('等于')
}else{
	console.log('不等于')
}

运行结果:

这是究竟为什么呢?
其实在JavaScript中,计算可能出现误差的原因通常是由于浮点数的精度问题。JavaScript 中的Number类型采用IEEE 754标准来表示浮点数,这个标准定义的是双精度浮点数,它能够表示的数值范围非常广泛,而这个标准在处理一些特别大或特别小的数时会出现舍入错误,所以计算机无法准确表示的小数有 0.1、0.2 或 0.3 这样的数字,因为它使用的是二进制浮点格式。

例如,当你尝试表示分数1/3时,由于3不是2的幂次方,JavaScript 无法精确地用双精度浮点数表示这个数值,结果会有舍入误差。

三、精度误差的原因

在JavaScript中的所有数字,无论是整数还是小数,都是以64位浮点数(double)形式存储。

浮点数的表示包括三部分:

  • 符号位(Sign):0表示正数,1表示负数。
  • 指数位(Exponent): r用科学计数法表示时的指数部分,即2的幂次方。
  • 尾数位(Mantissa): r用科学计数法表示时的尾数部分。

浮点数的计算过程大致为:

  1. 先将两个浮点数转换成同一个表示形式(即同一个指数)。
  2. 将两个数的尾数相加。
  3. 处理可能出现的溢出和下溢情况。

背后的原理
其实在我们日常生活中通常使用10进制来进行计算,我们会发现当10除以2或者5的倍数时才可以被精确的表示,例如1/2、1/4、1/5、1/8 和 1/10等。因为2和5是10的质因数。但是 1/3、1/6 和 1/7 则是无限循环的小数。

同理,在计算机系统中使用的是二进制。只有一个分数使用基数2的质因数来表示时,它才可以被精确地表示,因为2是2的唯一质因数。

当我们尝试表示像 0.1 这样的十进制小数时,计算机会使用一个近似值。这个近似值是通过将无限循环的二进制小数转换为有限位数的浮点数表示来实现的。

因此,当我们在计算机中进行浮点数运算时,结果可能会有微小的误差。

例如,0.1 在二进制中的近似表示可能是 0.000110011001100…,但在计算机的浮点数表示中,它可能被截断或舍入为 0.00011001100110,这就导致了 0.1 + 0.2 在计算机中可能不等于 0.3,而是略微有所偏差。

 四、如何解决精度出现误差的情况

1.使用toFixed()

保留小数点后几位

let add1 = 0.1+0.2;
let add2 = 0.11+0.22;
console.log(add1.toFixed(1))
console.log(add2.toFixed(2))

运行结果:

不足之处在于你能知道加的数字小数点后有多少位,不然就会四舍五入或者多出来点。

2. 使用库,如decimal.js或bignumber.js

// 使用npm安装
npm install decimal.js
// 在HTML中引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/decimal.js/10.2.0/decimal.min.js"></script>
// 创建两个Decimal对象
let a = new Decimal('0.1');
let b = new Decimal('0.2');
			
// 进行加法运算
let sum = a.plus(b);
			
// 输出结果
console.log(sum.toString()); // 输出: 0.3

运行结果;

自我感觉这个好用。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1988211.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【实现100个unity特效之17】在unity中使用shader和ShaderGraph分别实现模糊特定层,高斯模糊效果

最终效果 Unity通过Shader来模糊场景画面 参考&#xff1a;【游戏开发小技】Unity通过UI全屏图来模糊场景画面&#xff08;Shader | 模糊 | 滤镜 | Blur&#xff09; ShaderGraph实现图片的高斯模糊 参考&#xff1a;【游戏开发实战】Unity ShaderGraph实现图片的高斯模糊效…

Cyberchef实用功能之-URL/IP地址无害化操作

网络安全领域会共享URL&#xff0c;IP&#xff0c;domain等威胁情报信息&#xff0c;尤其是在攻防演练&#xff0c;重保活动&#xff0c;护网hvv的场景及时的威胁情报共享至关重要。这些IP/domain/URL 可能来自于沙箱的报告&#xff0c;pcap的提取&#xff0c;恶意软件的提取&a…

Zabbix模板监控:MySQL性能尽在掌握,智能高效,守护数据库安全稳定!

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 座右铭&#xff1a;云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 目录 前言&#xff1…

Html+CSS小米官网实例练习全部代码

跟随B站视频和GitHub的分享学习复刻小米商城网站&#xff0c;参考的网站如下所示&#xff1a; GitHub分享&#xff1a; https://github.com/0033-Vec/mishopping https://github.com/ldwwwwww/ldwwwwww.github.xiaomi https://github.com/hysmdd/xiaomi-mall B站视频&#xff…

用这6款AI绘图工具,秒变艺术大师!

人工智能正在悄悄地改变创造力的过程。从去年流行的虚拟人物到今年热门的人工智能绘画&#xff0c;人工智能可以以新的创造性形式重塑艺术&#xff0c;如人工智能音乐、人工智能诗歌和人工智能绘画。毫无疑问&#xff0c;人工智能正在给艺术带来巨大的变化。人工智能绘画听起来…

pnpm和npm的区别

pnpm 和 npm 都是用于管理 Node.js 项目中依赖包的工具&#xff0c;但它们有一些关键的不同点。 npm&#xff08;Node Package Manager&#xff09; 安装和管理依赖&#xff1a; npm 是 Node.js 官方的包管理工具&#xff0c;用于安装和管理项目的依赖包。工作原理&#xff1a…

LED显示屏技术背后的隐患

你知道LED显示屏技术背后隐患分析吗?在户外媒体市场&#xff0c;凭借本身发光亮度强且支持自动亮度调节&#xff0c;在可视距离内阳光直射屏幕表面时显示内容依然清晰可见等优势&#xff0c;LED显示屏成为备受青睐的显示终端&#xff0c;然而&#xff0c;“成也亮度&#xff0…

深度学习入门(五):有监督学习

一、逻辑回归 逻辑回归&#xff08;Logistic Regression&#xff09;是一种广泛使用的分类算法&#xff0c;以作者的理解&#xff0c;它是在线性回归【线性回归&#xff1a;拟合一条最接近自变量X与因变量Y关系的直线&#xff0c;线性回归可预测连续值】的基础上添加了一个逻辑…

朵拉朵尚:不断探索与尝试 创新营销模式

朵拉朵尚&#xff1a;不断探索与尝试 创新营销模式 如今是传统国货和新锐品牌的崛起,其中以朵拉朵尚为代表的国货美妆品牌,从原料、配方、生产等多个维度发力,提升产品质量与品牌口碑,成为国货品质的代表。随着实体销售逐渐走低,在百年不遇之大变局时代下,朵拉朵尚创始人李海珍…

未来已来:全方位掌握【人工智能】的系统学习路线

目录 前言 第一部分&#xff1a;基础知识 1. 数学基础 1.线性代数 2.微积分 3.概率与统计 4.离散数学 2. 计算机基础 1.编程语言 2.数据结构和算法 3.计算机体系结构 第二部分&#xff1a;核心技术 1. 机器学习 1.监督学习 2.无监督学习 3.强化学习 2. 深度学…

大模型对任务型对话的作用

大模型的多轮&#xff0c;我们一般想到的方案都是比较大胆地把历史记录都交给大模型让大模型来做生成&#xff0c;这个在比较自由、开放的聊天中&#xff0c;肯定是有效的&#xff0c;但是在实际场景中&#xff0c;我们往往希望模型能够在一定程度控制对话的流程&#xff0c;我…

深度学习入门(三):一些需要多加复习的知识

正负样本 在机器学习和特别是在分类任务中&#xff0c;正样本和负样本是相对于某一分类目标而言的&#xff0c;通常在二分类问题&#xff08;yes or no&#xff09;中&#xff0c;分类后想要的类别就是正样本&#xff0c;其他均为负样本&#xff01;&#xff01;&#xff01; …

Java学习笔记(十八):实现多线程、线程同步、阻塞队列基本使用、线程池、多线程综合练习、原子性、并发工具类

目录 一、实现多线程 1.1简单了解多线程【理解】 1.2并发和并行【理解】 1.3进程和线程【理解】 1.4实现多线程方式一&#xff1a;继承Thread类【应用】 1.5实现多线程方式二&#xff1a;实现Runnable接口【应用】 1.6实现多线程方式三: 实现Callable接口【应用】 1.7设…

选择一家正规的指挥中心控制台厂家有多重要?

在当今信息化高速发展的时代&#xff0c;指挥中心作为各类应急响应、调度管理、监控预警的核心枢纽&#xff0c;其高效运行与决策能力直接关系到社会安全、城市管理乃至国家战略的顺利实施。而指挥中心控制台作为这一体系中的关键基础设施&#xff0c;其设计、制造与安装显得尤…

成都跃享未来教育咨询抖音小店成为领域的新锐力量

在数字化浪潮席卷全球的今天&#xff0c;教育行业也迎来了前所未有的变革与机遇。成都&#xff0c;这座历史悠久而又充满活力的城市&#xff0c;正以其独特的魅力和创新的精神&#xff0c;孕育着教育咨询行业的新篇章。其中&#xff0c;成都跃享未来教育咨询凭借其敏锐的洞察力…

密码学基础 -- RSA加密、签名填充模式解析(终极图解版)

目录 1. OAEP 1.1 加密过程 1.2 解密过程 2 PSS 2.1 签名流程 2.2 验签流程 3.小结 1. OAEP 填充模式OAEP(Optimal Asymmetric Encryption Padding)&#xff0c;仅用于加解密。 1.1 加密过程 使用该填充模式进行加密总共分为三大步骤&#xff1a; &#xff08;1&…

21世纪中国思想家姓名学大师颜廷利:世界最具影响力的华人之一

21世纪中国思想家姓名学大师颜廷利&#xff1a;世界最具影响力的华人之一 在2024年的世界姓名学界&#xff0c;颜廷利教授无疑是一颗耀眼的星星。他的名字频繁出现在各大排行榜上&#xff0c;被誉为网上最靠谱的改名大师之一。这位来自山东济南的文化名人&#xff0c;凭借其深…

TVS管(瞬态电压抑制二极管)的了解

TVS即Transient Volatge Suppressor&#xff0c;中文名称&#xff1a;瞬态电压抑制二极管&#xff0c;又称雪崩击穿二极管。但在通常情况下&#xff0c;我们称之为TVS二极管。其在电路中的作用主要是保护敏感电路&#xff0c;免受高电压瞬变损坏的组件。其中&#xff0c;大部分…

【python】Django运行报错分析:ImproperlyConfigured 错误解决办法

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

docker安装及使用

一、docker优点及作用 优点&#xff1a; 基础镜像MB级别创建简单隔离性强启动速度秒级移植与分享放便 作用&#xff1a;资源隔离 cpu、memory资源隔离与限制访问设备隔离与限制网络隔离与限制用户、用户组隔离限制 二、docker安装 2.1.配置yum源 yum install -y yum-uti…