前端JavaScript处理小数精度问题(最佳实践)

前言:

针对于小数精度问题,本次我们主要推荐两种方式,一种是简单的函数封装,一种是使用第三方库big.js。

方法一:

自封装函数搭配parseFloat和toFixed解决小数精度问题,仅适用于解决一般性小数精度问题,适用于项目中小数问题比较少的项目。 

  /*** @description: 处理小数精度* @param {*} value 需要格式化的数字* @param {*} fixedNum 保留的小数位数,默认为2* @param {*} multiple 乘数,默认为1* @return {*} */export const handleDecimalPrecision = (value, fixedNum = 2, multiple = 1) => {return parseFloat((value * multiple).toFixed(fixedNum))}

测试用例:

(传倍数multiple 是为了展示成百分比,比如30%)

0.1 + 0.2 //0.30000000000000004
handleDecimalPrecision(0.1 + 0.2) //0.3handleDecimalPrecision(0.1 + 0.2,1,100) //30 传倍数multiple 是为了展示成百分比,比如30%

方法二:

使用第三方库big.js 。适用于精度问题比较多的项目,长期性解决精度问题。以下我们将展示一些常见的使用范围的场景,其他的深冷需求可移步至官方文档查看。

big.js特点

  • 简单的API
  • 比Java的BigDecimal更快、更小、更易于使用
  • 复制JavaScript数字的toExponential、toFixed和toPrecision方法
  • 可以访问的十进制浮点格式存储值
  • 全面的文档和测试集
  • 没有依赖关系,相对独立
  • 仅使用ECMAScript 3,无兼容性问题

安装big.js

npm install big.js -S

引入big.js

<script>
import Big from 'big.js'
</script>

示例(以vue为例):

code:

<template><div class="app-container"><div>小数精度</div><div>未处理 : 0.1 + 0.2 = {{sum_orgin}}</div><div>bigjs处理 : 0.1 + 0.2 = {{sum_bigjs}}</div></div>
</template><script setup>
import Big from 'big.js'const num1 = 0.1
const num2 = 0.2
const sum_orgin = num1.value + num2.value
const sum_bigjs = Big(num1.value).plus(Big(num2.value))
</script>

效果图:

创建Big number数据

const num1 = Big(0.1)
或者
const num2 = new Big(0.2)

加法精度问题处理 - plus

0.1 + 0.2 //0.30000000000000004
0.7 + 0.1 //0.7999999999999999
0.2 + 0.4 //0.6000000000000001Big(0.1).plus(Big(0.2)) //0.3
Big(0.1).plus(Big(0.24)) //0.34

减法精度问题 - minus

0.3 - 0.2 //0.09999999999999998
1.5 - 1.2 //0.30000000000000004Big(0.3).minus(Big(0.2)) //0.1

乘法精度问题 - times

19.9 * 100 //1989.9999999999998
0.8 * 3 //2.4000000000000004
35.41 * 100 //3540.9999999999995Big(19.9).times(Big(100)) //1990

除法精度问题 - div

0.3 / 0.1 //2.9999999999999996
0.69 / 10 //0.06899999999999999
Big(0.3).div(Big(0.1)) //3

保留小数位数(四舍五入) - round

1 / 3 //0.3333333333333333
Big(1).div(Big(3)).round(3) //0.333

big.js运算符说明

运算符

说明

abs

取绝对值

cmp

compare的缩写,即比较函数

div

除法

eq

equal的缩写,即相等比较

gt

大于

gte

小于等于,e表示equal

lt

小于

lte

小于等于,e表示equal

minus

减法

mod

取余

plus

加法

pow

次方

prec

按精度舍入,参数表示整体位数

round

按精度舍入,参数表示小数点后位数

sqrt

开方

times

乘法

toExponential

转化为科学计数法,参数代表精度位数

toFied

补全位数,参数代表小数点后位数

toJSON/toString

转化为字符串

toPrecision

按指定有效位数展示,参数为有效位数

toNumber

转化为JavaScript中number类型

valueOf

包含负号(如果为负数或者-0)的字符串

bigjs官网文档 

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

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

相关文章

【云原生】Kubernetes----k8s免密使用harbor私有仓库

目录 引言 一、搭建Harbor仓库 &#xff08;一&#xff09;关闭防护 &#xff08;二&#xff09;安装docker &#xff08;三&#xff09;安装docker-compose &#xff08;四&#xff09;安装harbor-offline 1.获取安装包 2.修改配置文件 3.启动服务 4.登录仓库验证 二…

营销人看巴黎奥运会,看到了什么?

不同的人眼中的巴黎奥运会是不一样的&#xff1a;环保人士关注奥运场馆的绿色设计&#xff0c;以及赛事期间对可再生能源的利用&#xff1b;旅游博主用镜头捕捉巴黎奥运会每一个精彩瞬间&#xff1b;社会学家在巴黎奥运会看到多元文化的交流与融合…… 那么营销人在巴黎奥运会…

聚观早报 | OPPO Find X8系列电池曝光;小米15 Pro更多影像细节

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 7月30日消息 OPPO Find X8系列电池曝光 小米15 Pro更多影像细节 KeeTa平台已开放便利店入驻 比亚迪方程豹将扩大…

大模型面试之LoRA

LoRA的解释&#xff1a;一种高效微调预训练神经网络的方法 LoRA 解决的问题&#xff1a; &#x1f538; 2021年初&#xff0c;微软与OpenAI合作探索GPT-3的商业可行性。 &#x1f538; 发现仅仅通过提示&#xff08;prompting&#xff09;不足以完成生产任务&#xff0c;例如…

EfficientNet-v2-s图像分类训练(简洁版)

使用torchvision集成的efficientnet-v2-s模型&#xff0c;调用torchvision库中的Oxford IIIT Pet数据集&#xff0c;对模型进行训练。 若有修改要求&#xff0c;可以修改以下部分&#xff1a; train_dataset OxfordIIITPet(root./data, splittrainval, downloadTrue, transfo…

loguru日志模块:简化Python自动化测试的日志管理!

引言 日志是软件开发中的关键组成部分&#xff0c;为开发和测试人员提供了调试和监控应用程序的重要手段。loguru 是一个第三方的 Python 日志库&#xff0c;以其简洁的 API 和自动化的功能脱颖而出。本文将探讨为什么项目中需要日志&#xff0c;loguru 为何受到青睐&#xff…

【Python机器学习】决策树的构造——递归构建决策树

我们可以采用递归的原则处理数据集&#xff0c;递归结束的条件是&#xff1a;程序遍历完所有划分数据集的属性&#xff0c;或者每个分支下的所有实例都具有相同的分类。如果所有实例具有相同的分类&#xff0c;则得到一个叶子节点或者终止块。任何到达叶子节点的数据必然属于叶…

年化27.9%,最大回撤-13.6%的可转债因子策略,结合机器学习特征筛选(附python代码)

原创文章第603篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 我们重新更新了可转债的全量数据&#xff0c;包含全量已经退市的转债。 ——这是与股票市场不一样的地方&#xff0c;股票退市相对少&#xff0c;而转债本身就有退出周期。 因此&…

x264 环路滤波原理系列:x264_frame_deblock_row 函数

x264_frame_deblock_row 函数 功能:该函数对视频帧中的一行宏块(Macroblock)进行去块滤波处理。去块滤波是视频编码中常用的一种技术,用于减少宏块之间的边界不连续性,从而提高视频质量。 函数关系与原理图: 函数原理流程梳理: 局部变量初始化;for 循环处理每个宏块:…

如何借助低代码 + BI 实现国央企数智化转型?

概要 在当前的软件开发时代&#xff0c;许多企业面临着核心技术缺失、专业人才短缺以及产品能力单一等问题&#xff0c;迫切需要加强技术实力&#xff0c;补充和扩展原有的业务和行业能力。将技术与业务需求深度结合&#xff0c;构建适应时代需求的技术业务模式&#xff0c;成…

容易发表的医学SCI期刊推荐,附投稿经验

常笑医学整理了适合医学生、医务工作者进行论文投稿的医学SCI期刊&#xff0c;附期刊详细参数与真实投稿经验&#xff0c;供大家参考。 1、ULTRASOUND IN MEDICINE AND BIOLOGY&#xff08;超声医学和生物学&#xff09; &#xff08;详细投稿信息请点击刊物名称查看&#xff…

MATLAB被360误杀的解决方案

前面被误杀&#xff0c;今天又被误杀。 前面误杀结果是缺少文件&#xff0c;重装MATLAB也不行。 结果重装了操作系统。 这次&#xff0c;看到了提示额外小心。 当时备份了“病毒”文件&#xff0c;结果备份的也被杀了。 解铃还须系铃人 在360安全卫士里面恢复&#xff0c;步骤…

数据库管理-第225期 Oracle DB 23.5新特性一览(20240730)

数据库管理225期 2024-07-30 数据库管理-第225期 Oracle DB 23.5新特性一览&#xff08;20240730&#xff09;1 二进制向量维度格式2 RAC上的复制HNSW向量索引3 JSON集合4 JSON_ID SQL函数5 优化的通过网络对NVMe设备的Oracle的原生访问6 DBCA支持PMEM存储7 DBCA支持标准版高可…

PPT图表制作

一、表格的底纹 插入→表格→绘制表格→表设计→选择单元格→底纹 二、把一张图片做成九宫格 1. 把一张图片画成九宫格&#xff08;处理过后还是一张图片&#xff0c;但是有框线&#xff09; 绘制33表格→插入图片→全选表格单元格→右键设置形状格式→填充→图片或纹理填充…

前后端分离开发遵循接口规范-YAPI

目前&#xff0c;网站主流开发方式是前后端分离。因此前后端必须遵循一套统一的规范&#xff0c;才能保证前后端进行正常的数据&#xff08;JSON数据格式&#xff09;请求、影响&#xff0c;这套规范即是 YAPI. 产品经理撰写原型&#xff1b; 前端或后端撰写接口文档。 YAPI…

一座山城如何打造教育“一张网”

教育新基建作为国家新基建的重要组成部分,是实现教育高质量发展的基础支撑。2021年,教育部等六部门印发相关部署意见时明确提出:到2025年,基本形成结构优化、集约高效、安全可靠的教育新型基础设施体系。 在此宏观导向下,山城重庆积极响应,立足本地情况,开启了其特色化的探索之…

K8s对接Ceph-csi配置手册(附带踩坑记录以及解决方法)

目录 Ceph CSI (Container Storage Interface) CSI 的作用&#xff1a; 前提配置 版本信息 获取Ceph认证信息 获取Ceph集群Monitor信息 下载并部署Ceph CSI 如果此时全部显示错误&#xff0c;那就代表镜像拉取错误&#xff0c;此时执行的yaml脚本&#xff0c;通过yaml脚…

进行良好的文献综述能否提高学术研究的可信度

VersaBot一键生成文献综述 进行良好的文献综述 对于从多个方面提高学术研究的可信度至关重要&#xff1b; 1. 展示专业知识&#xff1a; 全面的回顾表明您对您所在领域的现有知识和相关理论有深入的了解。这将使您成为权威&#xff0c;并将您的研究置于更广泛的背景下。 2.…

ValueError: invalid literal for int() with base 10: ‘a‘

ValueError: invalid literal for int() with base 10: ‘a‘ 目录 ValueError: invalid literal for int() with base 10: ‘a‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff…

【CodinGame】趣味算法(教学用) CLASH OF CODE -20240730

文章目录 正文转换单位观察模式数字处理字符串处理 写在最后END 正文 转换单位 import sys import math# Auto-generated code below aims at helping you parse # the standard input according to the problem statement.n int(input()) for i in range(n):e int(input())…