前端常见场景、JS计算精度丢失问题(Decimal.js 介绍)

目录

一. Decimal.js 介绍

二. 常用方法

1. 创建 Decimal 实例

 2.加法  add 或 plus

3.减法 sub 或 minus

4.乘法 times 或 mul

5.除法 div 或 dividedBy

6.取模

7.幂运算

8.平方根

9.保留小数位 toFixed方法(四舍五入)

三.项目应用


前端精度丢失问题通常由以下原因导致:

  1. 浮点数表示:由于IEEE 754标准,某些小数无法精确表示。
  2. 运算顺序:计算机内部的运算顺序可能影响结果。
  3. 舍入误差:除法或乘法可能需要舍入到最近的可表示浮点数。
  4. 累积误差:连续运算可能累积小误差,导致大偏差。
  5. 类型转换:自动类型转换可能引入精度问题。
  6. 大数溢出:超出Number类型范围的数字可能导致精度丢失。
  7. 第三方库误差:第三方库可能存在精度问题。
  8. 平台差异:不同浏览器或JavaScript引擎可能处理浮点数不同。

解决策略:

  • 使用高精度库(如decimal.js,big.js
  • 使用Math对象方法进行精确舍入
  • 尽可能用整数运算 ( 先乘以x倍数进行计算, 计算完再整除x倍数回来 )

一. Decimal.js 介绍

官网: decimal.js ( 提供十进制类型的任意精度数值 )

Decimal.js 是一个小型库,用于解决浮点数计算的不精确问题

安装 decimal.js

npm install decimal.js  

在代码中引入 ,两种方式二选一

  • require 是CommonJS模块系统的语法
  • import  是ES6模块系统的语法

 const Decimal = require('decimal.js');  

 import Decimal from 'decimal.js'

二. 常用方法

1. 创建 Decimal 实例
const a1 = new Decimal(0.1);   // 从数字创建
const a2 = new Decimal('0.2'); // 从字符串创建
 2.加法  add 或 plus
const result = a1.add(a2).toNumber();
console.log(result); // 0.3
3.减法 sub 或 minus
const result = a1.sub(a2).toNumber();
console.log(result); // -0.1
4.乘法 times 或 mul
const result = a1.times(a2).toNumber();
console.log(result); // 0.02
5.除法 div 或 dividedBy
const result = a1.div(a2).toNumber();
console.log(result); // 0.5
6.取模
const result = a1.mod(a2).toNumber();
console.log(result); // 0.1
7.幂运算
const result = a1.pow(2).toNumber();
console.log(result); // 0.01
8.平方根
const result = a1.sqrt(2).toNumber();
console.log(result); // 0.31622776601683794
9.保留小数位 toFixed方法(四舍五入)
const b1 = new Decimal('0.1546');
const b2 = new Decimal('0.1556');
const result1 = b1.toFixed(2);
const result2 = b2.toFixed(2);
console.log(result1); //0.15
console.log(result2); //0.16

三.项目应用

项目需求: 后端约定 返回的金额展示上需要除以100, 发送后台的值乘以 100,并要求为数字类型, 如果常规运算, 有可能出现精度丢失问题, 通过使用 Decimal.js库解决 ( new Decimal() 或 Decimal() 一个意思)

import Decimal from 'decimal.js';... // 先转换为Decimal对象, 进行乘法运算, 再转化为数字类型
const price = '100';
const res = Decimal(price ).mul(Decimal(100)).toNumber();
console.log(res); // 返回结果: 10// 其他运算写法大差不差
...

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Kubernetes】kubeadmu快速部署k8s集群

目录 一.组件部署 二.环境初始化 三.所有节点部署docker,以及指定版本的kubeadm 四.所有节点安装kubeadm,kubelet和kubectl 五.高可用配置 六.部署K8S集群 1.master01 节点操作 2.master02、master03节点 3.master01 节点 4.master02、master…

C语言 ——— 学习、使用 strcmp函数 并模拟实现

目录 strcmp函数的功能 学习strcmp函数​编辑 使用strcmp函数 模拟实现strcmp函数 strcmp函数的功能 strcmp函数的功能是字符串比较,两个字符串的对应位置的字符进行比较,直到字符不同或达到终止的 \0 字符为止 举例说明: 字符串1&am…

leetcode-二叉树oj题1(共三道)--c语言

目录 a. 二叉树的概念以及实现参照博客: 一、三道题的oj链接 二、每题讲解 1.单值二叉树 a. 题目: b. 题目所给代码 c. 思路 d. 代码: 2. 相同的树 a. 题目 b. 题目所给代码 c. 思路 d. 代码 3. 二叉树的前序遍历 a. 题目 b.…

前端-05-VSCode自定义代码片段console.log(js/ts配置)、代码段快捷提示放在首位

目录 配置VSCode自定义代码片段console.log()log代码段快捷提示放在首位 配置VSCode自定义代码片段console.log() 点击VSCode左下角设置图标,点击用户代码片段 点击用户代码片段后,VSCode上方出现弹窗如下图(没有显示这两个文件的话搜索一下…

Redis结合Lua脚本的简单使用

我们就拿购物车举例子 现在有5个东西免费送&#xff0c;我们只能选择1个 例如 可乐 美年达 香蕉 苹果 薯片 我们选择后就放进redis里面 然后我们不能选重复&#xff0c;只能选不同 Lua脚本 我们redis使用lua脚本的时候&#xff0c;会传两个参数进去 一个是List<Strin…

MySQL:数据库权限与角色

权限 MySQL 的权限管理系统是保障数据库安全性的关键组件之一。它允许数据库管理员精确控制哪些用户可以对哪些数据库对象执行哪些操作。 自主存取控制 DAC&#xff08;DiscretionaryAccess Control)&#xff1a;用户对于不同的数据库对象有不同的存取权限&#xff0c;不同的…

fatal: Could not read from remote repository. 解决方法

问题描述&#xff1a; Git : fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists。 解决方法&#xff1a; 当在网上尝试大量方法仍然失败的时候&#xff0c;不妨试试这个方法。 在 github 上&…

thinkphp框架远程代码执行

一、环境 vulfocus网上自行下载 启动命令&#xff1a; docker run -d --privileged -p 8081:80 -v /var/run/docker.sock:/var/run/docker.sock -e VUL_IP192.168.131.144 8e55f85571c8 一定添加--privileged不然只能拉取环境首页不显示 二、thinkphp远程代码执行 首页&a…

鸿蒙媒体开发【拼图】拍照和图片

拼图 介绍 该示例通过ohos.multimedia.image和ohos.file.photoAccessHelper接口实现获取图片&#xff0c;以及图片裁剪分割的功能。 效果预览 使用说明&#xff1a; 使用预置相机拍照后启动应用&#xff0c;应用首页会读取设备内的图片文件并展示获取到的第一个图片&#x…

2024关于日本AI 领域TOP12 的大学介绍

1.东京大学 &#xff08;The University of Tokyo&#xff09; 位于&#xff1a;日本东京都文京区本郷七丁目3 番1 号 网址&#xff1a;東京大学 东京大学也被称为UTokyo 或东大&#xff0c;是日本第一所国立大学。作为领先的研究型 大学&#xff0c;东京大学提供基本所有…

8月17日|广州|Cocos开发者沙龙不见不散!

6月底举行的Cocos成都沙龙吸引了近200位开发者和10多家发行&#xff0c;得到了大家的一致好评。 Cocos广州沙龙即将到来&#xff0c;会邀请更多KOL和头部发行、渠道嘉宾分享行业经验&#xff0c;让大家实现技术干货、游戏合作、行业信息多丰收。 活动主题&#xff1a;小游戏与出…

vscode+git解决远程分支合并冲突

1&#xff09;远程分支和远程分支不复杂情况合并 例如readme的冲突 可直接在github上解决 删到只剩下 #supergenius002 合并冲突测试1/合并测试冲突1合并测试冲突2/合并测试冲突2就行 《《《/》》》也要删掉 2&#xff09;但如果是复杂的冲突&#xff0c;让我们回到vscod…

C++进阶:设计模式___适配器模式

前言 在C的基础语法的学习后,更进一步为应用场景多写代码.其中设计模式是有较大应用空间. 引入 原本在写容器中适配器类有关的帖子,发现适配模式需要先了解,于是试着先写篇和适配器模式相关的帖子 理解什么是适配器类,需要知道什么是适配器模式.适配器模式是设计模式的一种.笔…

剪画小程序:致敬奥运举重冠军:照片变成动漫风格!

在巴黎奥运会的赛场上&#xff0c;那些奥运冠军们的身影如同璀璨星辰&#xff0c;闪耀着无尽的光芒&#xff01; 看&#xff0c;举重冠军力拔山兮气盖世&#xff0c;那坚定的眼神中透露出无畏的勇气&#xff0c;爆发的力量更是震撼人心。 借助剪画&#xff0c;将这令人心潮澎湃…

LabVIEW激光主动探测系统

开发了一种基于LabVIEW的高性能激光主动探测控制与处理系统的设计与实现。该系统充分利用了LabVIEW的多线程和模块化设计优势&#xff0c;提供了一套功能完整、运行高效且稳定的解决方案&#xff0c;适用于高精度激光探测领域。 项目背景 激光主动探测技术利用激光作为主动光源…

基于SpringBoot+Vue的汽车服务管理系统(带1w+文档)

基于SpringBootVue的汽车服务管理系统(带1w文档) 基于SpringBootVue的汽车服务管理系统(带1w文档) 在开发系统过程中采用Java语言、MySQL数据库存储数据。系统以B/S为基础&#xff0c;实现管理一体化、规范化&#xff0c;为用户提供一个高效快捷的交流系统[5]。利用springboot架…

JSONP跨域

1 概述 定义 json存在的意义&#xff1a; 不同类型的语言&#xff0c;都能识别json JSONP(JSON with Padding)是JSON的一种“使用模式”&#xff0c;可用于解决主流浏览器的跨域数据访问的问题。由于同源策略&#xff0c;一般来说位于 server1.example.com 的网页无法与不是 s…

深度学习(1)--机器学习、人工智能、深度学习的关系

1956 年提出 AI 概念&#xff0c;短短3年后&#xff08;1959&#xff09; Arthur Samuel 就提出了机器学习的概念&#xff1a; Field of study that gives computers the ability to learn without being explicitly programmed. 机器学习研究和构建的是一种特殊算法&#xff0…

谷粒商城实战笔记-122~124-全文检索-ElasticSearch-分词

文章目录 一&#xff0c;122-全文检索-ElasticSearch-分词-分词&安装ik分词二&#xff0c;124-全文检索-ElasticSearch-分词-自定义扩展词库1&#xff0c;创建nginx容器1.1 创建nginx文件夹1.2 创建nginx容器获取nginx配置1.3 复制nginx容器配置文件1.4 删除临时的nginx容器…

力扣-200.岛屿数量

刷力扣热题–第二十四天:200.岛屿数量 新手第二十四天 奋战敲代码&#xff0c;持之以恒&#xff0c;见证成长 1.题目描述 2.题目解答 这道题刚开始想的确实想的绞尽脑汁的&#xff0c;看了相关解答才明白的&#xff0c;三种方法&#xff0c;这里想先用两种方法进行实现&#…