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 相关文章推荐
javascript hasFocus使用实例
Jun 29 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 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
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
详解js异步文件加载器
2016/01/24 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
JS面向对象编程详解
2016/03/06 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
在Python中使用next()方法操作文件的教程
2015/05/24 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
python实现最长公共子序列
2018/05/22 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
市场部专员岗位职责
2013/11/30 职场文书
汉语言文学职业规划
2014/02/14 职场文书
个人委托书怎么写
2014/04/04 职场文书
ktv好的活动方案
2014/08/17 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
质检员岗位职责范本
2015/04/07 职场文书
社会实践活动总结格式
2015/05/11 职场文书