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

news2024/9/9 1:23:33

前言:

针对于小数精度问题,本次我们主要推荐两种方式,一种是简单的函数封装,一种是使用第三方库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.3

handleDecimalPrecision(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.6000000000000001

Big(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.30000000000000004

Big(0.3).minus(Big(0.2)) //0.1

乘法精度问题 - times

19.9 * 100 //1989.9999999999998
0.8 * 3 //2.4000000000000004
35.41 * 100 //3540.9999999999995

Big(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.coloradmin.cn/o/1959068.html

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

相关文章

Java面试八股之简述spring的自动装配

简述spring的自动装配 Spring框架的自动装配&#xff08;Autowiring&#xff09;是一种机制&#xff0c;它允许Spring IoC容器自动满足Bean的依赖关系&#xff0c;而无需显式指定依赖注入的方式。这极大地简化了配置&#xff0c;并有助于减少配置错误。 Spring支持多种自动装…

硅纪元视角 | 苹果AI训练数据大曝光,坚持用户隐私第一

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…

鲁迅曾经说过?现在没有中间派!以后也没有!——早读(逆天打工人爬取热门微信文章解读)

今天用了AI的风格模方&#xff0c;鲁迅的&#xff0c;开头那一小段改写&#xff0c;大家觉得如何&#xff1f; 引言Python 代码第一篇 续上第二篇 十点读书 “新型不孝”正在蔓延&#xff0c;很多父母浑然不知&#xff0c;还逢人就炫耀子女有出息结尾 引言 最近 我发觉自己的作…

手摸手教你撕碎西门子S7通讯协议02--socket连接

1、S7协议通讯流程回顾 1&#xff09;建立Socket连接&#xff1a;进行TCP三次握手 这里是指要建立socket的tcp连接&#xff0c;是tcp连接而不是udp连接&#xff0c;tcp连接是可靠连接&#xff0c;tcp连接就是要有稳定的IP地址&#xff0c;它是通过字节方式进行通讯&#xff…

OpenSSL SSL_connect: Connection was reset in connection to github.com:443

OpenSSL SSL_connect: Connection was reset in connection to github.com:443 目录 OpenSSL SSL_connect: Connection was reset in connection to github.com:443 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&…

云计算 华为云服务

配置虚拟私有云 云平台架管理 跳板机配置 ansible 管理主机 dnf install -y ansible-core glibc-langpack-zh ssh-keygenchmod 0400 /root/.ssh/id_rsa ssh-copy-id -i /root/.ssh/id_rsa.pub 192.168.1.125 ansible --version 代理 Yum 仓库 dnf install -y nginx vim /et…

MySQL使用教程 最最最实用的零基础教程 直接从安装开始教!!!!

数据构成了我们日益数字化的社会基础。想象一下&#xff0c;从移动应用和银行系统到搜索引擎&#xff0c;再到如 ChatGPT 这样的先进人工智能聊天机器人&#xff0c;这些工具若没有数据支撑&#xff0c;将寸步难行。你有没有好奇过这些海量数据都存放在哪里呢&#xff1f;答案正…

虚拟现实辅助工程技术在电气安全培训中的变革力量

近年来&#xff0c;随着数字化进程的不断加快&#xff0c;虚拟现实辅助工程&#xff08;VAE&#xff09;技术在各行各业中的应用愈发广泛。在电气安全培训领域&#xff0c;虚拟现实辅助工程技术正逐渐成为一种具有变革力量的工具。这项技术的引入不仅为电气工作者提供了更为安全…

会计财务公司代理小程序源码系统 带手机端 完整的源代码包以及搭建部署教程

系统概述 会计财务公司代理小程序源码系统是一款专为会计财务公司量身定制的小程序解决方案。该系统结合了财务管理、代理记账、税务筹划等核心功能&#xff0c;旨在帮助企业提高工作效率&#xff0c;优化客户服务体验。通过这款小程序&#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支持标准版高可…

【EasyAi】一个开箱即用,每一个Java开发者都可以使用的人工智能AI框架

前言 EasyAi对于Java的用处&#xff0c;等同于在JavaWeb领域spring的意义一样——做一个开箱即用&#xff0c;让每一个开发者都可以使用EasyAi&#xff0c;来开发符合自己人工智能业务需求的小微模型&#xff0c;这就是它的使命&#xff01; EasyAi介绍 EasyAi无任何依赖&…

【无标题】web+http协议+nginx搭建+nginx反向代理(环境准备)

一&#xff0e;Web 为用户提供互联网上浏览信息的服务&#xff0c;web服务是动态的&#xff0c;可交互的。 1.安装httpd yum -y install httpd 2.启动 systemctl start httpd 3.关闭防火墙 systemctl stop firewalld [rootrs html]# echo "我手机号是" > …

一篇文章掌握Python爬虫的80%

转载&#xff1a;一篇文章掌握Python爬虫的80% Python爬虫 Python 爬虫技术在数据采集和信息获取中有着广泛的应用。本文将带你掌握Python爬虫的核心知识&#xff0c;帮助你迅速成为一名爬虫高手。以下内容将涵盖爬虫的基本概念、常用库、核心技术和实战案例。 一、Python 爬虫…

昇思 25 天学习打卡营第 21 天 | MindSpore CycleGAN图像风格迁移互换

1. 背景&#xff1a; 使用 MindSpore 学习神经网络&#xff0c;打卡第 21 天&#xff1b;主要内容也依据 mindspore 的学习记录。 2. CycleGAN 介绍&#xff1a; MindSpore 的 CycleGAN 的图像风格迁移互换 论文地址 论文中文翻译地址 主要流程&#xff1a; 我们有一个转换…

做前端4年了,才明白技术的本质不过是工具而已

四年前&#xff0c;我踏上了前端开发的道路&#xff0c;从HTML和CSS到JavaScript&#xff0c;从jQuery到React&#xff0c;每一步都走得踏实而坚定。随着经验的积累&#xff0c;技术的进步&#xff0c;我逐渐认识到&#xff0c;所谓的“技术”&#xff0c;无非是实现目标的一种…

[C++探索]初始化列表,static成员,友元函数,内部类,匿名对象

&#x1f496;&#x1f496;&#x1f496;欢迎来到我的博客&#xff0c;我是anmory&#x1f496;&#x1f496;&#x1f496; 又和大家见面了 欢迎来到C探索系列 作为一个程序员你不能不掌握的知识 先来自我推荐一波 个人网站欢迎访问以及捐款 推荐阅读 如何低成本搭建个人网站…

Docsify:快速用Markdown文档搭建网站的利器

Github官方地址&#xff1a;Docsify 什么是Docsify&#xff1f; 对于经常写博客的人来说&#xff0c;markdown大家都不陌生。今天介绍一个在最近需求中碰到的软件Docsify&#xff0c;通过它能够将Markdown直接转换为网页。话不多说&#xff0c;下面直接介绍它的快速用法。 D…

(二)延时任务篇——通过redis的key监听,实现延迟任务实战

前言 本节内容是关于使用redis的过期key&#xff0c;通过开启其监听失效策略&#xff0c;模拟订单延迟任务的执行流程。其核心原理是通过使用redis订阅与发布的方式&#xff0c;将过期失效的key通过广播的方式&#xff0c;发布给客户端&#xff0c;客户端可以监听此消息进而消…

如何将旧电脑的数据迁移到新电脑?旧电脑数据迁移技巧

随着科技的不断发展&#xff0c;电脑硬件的更新换代速度也越来越快。当我们购买了一台新电脑时&#xff0c;如何将旧电脑的数据迁移到新电脑&#xff0c;成为了我们必须面对的问题。本文将详细介绍几种数据迁移的方法&#xff0c;帮助您顺利完成数据迁移&#xff0c;确保重要资…

【已解决】ERROR: No matching distribution found for torch.安装torch一次性解决方法

文章目录 环境异常原因直接解决方案成功 环境 python 安装 torch 异常 (base) ➜ ComfyUI git:(master) pip install -i https://pypi.mirrors.ustc.edu.cn/simple torch Looking in indexes: https://pypi.mirrors.ustc.edu.cn/simple ERROR: Could not find a version tha…