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 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
基于vue、react实现倒计时效果
2019/08/26 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python 检测图片是否有马赛克
2020/12/01 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
电子商务专业推荐信范文
2013/12/02 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
党章学习心得体会2016
2016/01/14 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
如何写好竞聘报告
2019/04/03 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript