【JS】toFixed()无法精准保留小数的解决方案
情景复现:
发现用 toFiexd() 四舍五入保留小数有时不是很精确,接下来用 a = 8.0345,b=8.045,举例如下:
var a = 8.035;
console.log(a.toFixed(2)) // 8.04
var b = 8.045;
console.log(b.toFixed(2)) // 8.04
不难看出 a 四舍五入保留两位小数为 8.04,正确;而 b 四舍五入保留两位小数应该为 8.05;
计算精度丢失的原因:
js采用64位浮点数表示法(几乎所有现代编程语言所采用),这是一种二进制表示法。二进制浮点数表示法并不能精确表示类似 0.1 这样简单的数字。
目前这个问题不只在js中才会出现,在任何使用二进制浮点数的编程语言中都会出现。
解决方案:
保留两位小数:
var a = 8.035;
var b = 8.045;
function number(data){var value = Math.round(parseFloat(data) * 100) / 100;var d = value.toString().split(".");if (d.length == 1) {value = value.toString() + ".00";return value;}if (d.length > 1) {if (d[1].length < 2) {console.log(d[1])value = value.toString() + "0";}return value;}
}
console.log(number(a)); // 8.04
console.log(number(b)); // 8.05
自定义封装:
方案一: 使用 big.js(如果有大量连续的计算推荐使用)
- 既解决了浮点数计算精度丢失问题,又解决了 toFixed() 四舍五入精度丢失问题。
big.js是big.js,bignumber.js,decimal.js三姐妹中功能最少的,但也是体积最小的,压缩版只有3k,对于处理js精度丢失已经足够用了。
import Big from 'big.js'// 运算const plus = Big(0.1).plus(0.2); // 加const minus = Big(0.3).minus(0.1); // 减const mul = Big(10.22).times(100); // 乘const div = Big(2.4).div(0.8); // 除// toFixedconst fixed = new Big(6.265).toFixed(2); // 6.27console.log(plus.toNumber(),minus.toNumber(),mul.toNumber(),div.toNumber())// 0.3 0.2 1022 3
方案二:有具体要求精确到第几位,用科学计数法对运算结果进行四舍五入
function round(number, precision) {return Math.round(+number + 'e' + precision) / Math.pow(10, precision);
}round(8.1234567, 5); // 8.12346
或者:
function number(data,n){var numbers = '';// 保留几位小数后面添加几个0for (var i = 0; i < n; i++) {numbers += '0';}var s = 1 + numbers;// 如果是整数需要添加后面的0var spot = "." + numbers;// Math.round四舍五入 // parseFloat() 函数可解析一个字符串,并返回一个浮点数。var value = Math.round(parseFloat(data) * s) / s;// 从小数点后面进行分割var d = value.toString().split(".");if (d.length == 1) {value = value.toString() + spot;return value;}if (d.length > 1) {if (d[1].length < 2) {value = value.toString() + "0";}return value;}
}// 例如:8.1235678 保留五位小数
number(8.12356,5);
相关文章:
【JS】toFixed()无法精准保留小数的解决方案
情景复现: 发现用 toFiexd() 四舍五入保留小数有时不是很精确,接下来用 a 8.0345,b8.045,举例如下: var a 8.035; console.log(a.toFixed(2)) // 8.04 var b 8.045; console.log(b.toFixed(2)) // 8.04 不难看出…...
vue3版本学习
1,响应式ref或者reactive const aa ref(hello) const bb reactive({ aa: hello, ss: workd }) 2,计算属性 响应式属性经过计算得到的值(ref),放到模板中,只会随着响应式author.books属性变化而变化 const autor …...
【WPF.NET开发】创建简单WPF应用
本文内容 先决条件什么是 WPF?配置 IDE创建项目设计用户界面 (UI)调试并测试应用程序 通过本文你将熟悉在使用 Visual Studio 开发应用程序时可使用的许多工具、对话框和设计器。 你将创建“Hello, World”应用程序、设计 UI、添加代码并调试错误。在此期间&#…...
视频智能分析国标GB28181云平台EasyCVR加密机授权异常是什么原因?
国标GB28181视频汇聚/视频云存储/集中存储/视频监控管理平台EasyCVR能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,实现视频资源的鉴权管理、按需调阅、全网分发、云存储、智能分析等。 近期有用户选择使用加密机进行EasyCVR授…...
Mysql安全之基础合规配置
一、背景 某次某平台进行安全性符合型评估时,列出了数据库相关安全选项,本文特对此记录,以供备忘参考。 二、安全配置 2.1、数据库系统登录时的用户进行身份标识和鉴别; 1)对登录Mysql系统用户的密码复杂度是否有要…...
前后端分离项目跨域请求
一、前端vue项目 在项目中创建request.js文件,添加以下内容 import axios from "axios"; const api axios.create({ //这里配置的是后端服务提供的接口baseURL: "http://localhost:8080/web-demo",timeout: 1000} ); export default api; …...
OpenEuler系统桌面终端设置字体
初始界面 终端的字体间距过大,阅读起来不方便。 调整终端字体 点击菜单,选择“配置文件首选项” 未命名 ---- 文本---- 勾选 自定义字体 ---- 选择 "DejaVu LGC Sans Mono"字体 你也可以根据自己的喜好,选择其他字体。 修改好了…...
repo常用命令解析(持续更新)
1 同步 1.1 将本地仓库更新到最新状态。它会从远程服务器下载最新的代码,并将本地仓库与之同步。如果本地仓库中已经存在某个项目,repo sync会自动检测本地仓库中该项目的版本,并将其更新到最新状态。 类似于git fetch和git merge命令组合使…...
关于小红书商单变现的一些答疑
AI小红书商单训练营也过去1个月了,今天给大家汇总几个常遇到的问题,希望对大家在运营过程中有所帮助。 1.账号封面是否要统一模版? 为了让账号主页呈现整洁美观的效果,建议统一封面设计,视频开头可以设置一个固定画面…...
使用 Kubernetes Agent Server 实现 GitOps
目录 温习 GitOps 极狐GitLab Kubernetes Agent 极狐GitLab GitOps workflow 极狐GitLab KAS 的配置 创建极狐GitLab agent 创建 agent token Kubernetes 上安装 agent(agentk) 极狐GitLab GitOps workflow 实践 写在最后 温习 GitOps GitOps …...
Day12 qt QMianWindow,资源文件,对话框,布局方式,常用ui控件
QMianWindow 概述 QMainWindow 是一个为用户提供主窗口程序的类,包含一个菜单栏( menu bar )、多 个工具栏 (tool bars) 、多个铆接部件 (dock widgets) 、一个状态栏 (status bar) 及 一个中心部件 (central widget) 许多应用程序的基础…...
Python实现广义线性回归模型(statsmodels GLM算法)项目实战
说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 广义线性模型(Generalized Linear Model,简称GLM)是一种广泛应用于回归分析和分类问题的统…...
GNSEC 2022年第8届全球下一代软件工程线上峰会-核心PPT资料下载
一、峰会简介 新一代软件工程是指利用新的理论、方法和技术,在软件开发、部署、运维等过程中,实现软件的可控、可预测、可维护的软件生产方式。它涵盖了多个领域,如软件开发、测试、部署、运维等,旨在提高软件生产效率和质量。 …...
nVisual能为数据中心解决什么问题?
nVisual通过可视化的管理方式,使数据中心管理者能够有效且高效地管理数据中心的资产、线缆、容量、变更;使数据中心管理者能够获得如下问题的答案,以便能够快速做出更好、更明智的决策: 1.资产管理 我们有什么&#x…...
Android--Jetpack--Databinding详解
不经一番寒彻骨,怎得梅花扑鼻香 一,定义 DataBinding, 又名数据绑定,是Android开发中非常重要的基础技术,它可以将UI组件和数据模型连接起来,使得在数据模型发生变化时,UI组件自动更新。是 MVVM 模式在 An…...
Node.js入门指南(完结)
目录 接口 介绍 RESTful json-server 接口测试工具 会话控制 介绍 cookie session token 上一篇文章我们介绍了MongoDB,这一篇文章是Node.js入门指南的最后一篇啦!主要介绍接口以及会话控制。 接口 介绍 接口是前后端通信的桥梁 ࿰…...
MySQL和Java通用加密解密方式
加密方式使用 AES 加密,再转成 Base64。 SQL -- 加密 update your_table set your_columnto_base64(aes_encrypt(your_column, "password"));-- 解密 select aes_decrypt(from_base64(your_column) ,"password") from your_table; 使用原生 …...
若依前端APP版使用教程
1 增加页面流程 新增Page>新增API>新增组件>新增样式>新增路径(page.json) {"path": "pages/mes/pro/feedback/index","style": {"navigationBarTitleText": "工单报工"}} <template><view class&quo…...
2023 年工程师不可错过的 AI 主要发展趋势
从对未来的好奇到关键的企业工具,人工智能的发展证明了它对工程师的价值。不久前,Gartner 预测,采用人工智能工程实践来构建和管理自适应人工智能系统的企业,在实施人工智能模型方面的表现将优于同行至少 25%,这为各组…...
记录 | 安装地平线工具链install_ai_toolchain.sh出现cython版本问题报错解决
安装地平线工具链 install_ai_toolchain.sh: cd ddk/package/host/ai_toolchain bash install_ai_toolchain.sh出现报错: Requirement already satisfied: packaging>20.0 in /root/.local/lib/python3.8/site-packages (from matplotlib>2.1.0-…...
别再只玩单机了!用AirSim+Python实现你的第一个无人机编队(附完整代码)
从单机到编队:用AirSim和Python打造你的第一支无人机小队 想象一下,当你第一次在AirSim中成功让无人机起飞时的兴奋感——现在,是时候将这份快乐乘以N倍了。本文将带你跨越单机操作的舒适区,进入无人机编队控制的新世界。不需要复…...
pg_textsearch:革新Postgres文本搜索的现代工具
【导语:GitHub上的pg_textsearch是一款适用于Postgres的现代排名文本搜索工具,具备简单语法、可配置参数等特性,目前已达v1.0.0版本可用于生产环境,对Postgres文本搜索领域带来新变革。】pg_textsearch:Postgres文本搜…...
如何永久保存微信聊天记录?WeChatMsg终极指南让你重获数据掌控权
如何永久保存微信聊天记录?WeChatMsg终极指南让你重获数据掌控权 【免费下载链接】WeChatMsg 提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trendin…...
translategemma-4b-it优化升级:Ollama部署后提升翻译质量的4个技巧
translategemma-4b-it优化升级:Ollama部署后提升翻译质量的4个技巧 你已经成功用Ollama部署了translategemma-4b-it,看着它把图片里的英文变成中文,是不是觉得挺神奇的?但用了几次后,你可能会发现一些问题:…...
如何在React Native应用中实现Material Design动画效果:Ripple波纹与状态切换完整指南
如何在React Native应用中实现Material Design动画效果:Ripple波纹与状态切换完整指南 【免费下载链接】react-native-material-kit xinthink/react-native-material-kit: 该库为React Native提供了一套Material Design风格的UI组件,帮助开发者轻松构建遵…...
终极Windows 11优化指南:Win11Debloat让你的系统重获新生
终极Windows 11优化指南:Win11Debloat让你的系统重获新生 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter and…...
SuperSplat部署完全指南:从开发到生产环境的终极教程
SuperSplat部署完全指南:从开发到生产环境的终极教程 【免费下载链接】super-splat 3D Gaussian Splat Editor 项目地址: https://gitcode.com/gh_mirrors/su/super-splat SuperSplat是一款基于Web的免费开源3D高斯泼溅编辑器,专为检查、编辑、优…...
图的存储方式详解(邻接矩阵 + 邻接表)| 算法入门必看
在算法学习中,图是仅次于树的核心数据结构,广泛应用于路径规划、网络拓扑、社交关系等场景。而图的存储是后续图论算法(DFS、BFS、最短路等)的基础——选择合适的存储方式,能直接影响算法的时间和空间效率。 本文将详细讲解图的两种最常用存储方式:邻接矩阵和邻接表,从…...
幻兽帕鲁存档迁移完全手册:告别数据丢失的终极解决方案
幻兽帕鲁存档迁移完全手册:告别数据丢失的终极解决方案 【免费下载链接】palworld-host-save-fix 项目地址: https://gitcode.com/gh_mirrors/pa/palworld-host-save-fix 你是否曾在更换幻兽帕鲁服务器时,眼睁睁看着自己辛苦培养的角色数据消失无…...
学习神经网络
一、神经网络概述:人工智能的核心基石(一)神经网络的定义与起源神经网络,全称为人工神经网络(Artificial Neural Network,ANN),是一种模仿生物神经网络(动物大脑神经元网…...
