JavaScript如何实现对数字保留两位小数一位自动补零


Posted in Javascript onDecember 18, 2015

本章节介绍一下如何实现对数字保留两位小数效果,如果数字的原本小数位数不到两位,那么缺少的就自动补零,这个也是为了统一的效果,先看代码实例:

function returnFloat(value){
 var value=Math.round(parseFloat(value)*100)/100;
 var xsd=value.toString().split(".");
 if(xsd.length==1){
 value=value.toString()+".00";
 return value;
 }
 if(xsd.length>1){
 if(xsd[1].length<2){
 value=value.toString()+"0";
 }
 return value;
 }
}
var num=3.1;
console.log(returnFloat(num));

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

1.function returnFloat(value){},参数是要被转换的数字。

2.var value=Math.round(parseFloat(value)*100)/100,这个应该是函数的核心之处,parseFloat(value)将参数转换为浮点数,因为参数有可能是字符串,乘以100是因为要保留两位小数,先将小数点向右移动两个位数,然后再利用Math.round()方法实行四舍五入计算,最后除以100,这样就实现了保留保留两位小数,并且还具有四舍五入效果,但是这个并不完美,如果参数数字本身的小数位数大于等于2是可以的,如3.1415,但是如3或者3.0这样的还是没有完美的实现,继续看下面。

3.var xsd=value.toString().split("."),使用点"."value分隔成一个数组。

4.if(xsd.length==1){value=value.toString()+".00";return value;},如果数组的长度是1,也就是说不存在小数,那么就会为这个数字添加两个0,例如3会被转换成3.00。

5.

if(xsd.length>1){
 if(xsd[1].length<2){
 value=value.toString()+"0";
 }
 return value;
 }

if(xsd.length>1)用来判断数字的长度是否大于1,也就是数字是否具有小数,如有小数,但是小数的位数小于2,也就是类似3.1这样的,就会在后面加一个0,也就是会转换为3.10。

二.相关学习教程:

1.Math.round()可以参阅javascript的Math.round()方法一章节。

2.parseFloat()函数可以参阅javascript的parseFloat()方法一章节。

3.toString()函数可以参阅javascript的Number对象的toString()方法一章节。 

4.split()函数可以参阅javascript的String对象的split()方法一章节。

Javascript 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
js格式化时间的方法
Dec 18 #Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 #Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 #Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 #Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 #Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 #Javascript
jQuery Validate表单验证深入学习
Dec 18 #Javascript
You might like
浅析is_writable的php实现
2013/06/18 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
小程序如何构建骨架屏
2019/05/29 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
override和overload的区别
2016/03/09 面试题
班组长岗位职责范本
2014/01/05 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
岗位聘任协议书
2015/09/21 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技