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 Tools tab(幻灯片)
Jul 14 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
js实现日期级联效果
Jan 23 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
yii操作session实例简介
2014/07/31 PHP
linux中cd命令使用详解
2015/01/08 PHP
php解析xml方法实例详解
2015/05/12 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
JS实现图片切换效果
2018/11/17 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
Nest.js 授权验证的方法示例
2021/02/22 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python实现处理管道的方法
2015/06/04 Python
Python打包可执行文件的方法详解
2016/09/19 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
函授自我鉴定
2013/11/06 职场文书
教师自我评价范文
2013/12/16 职场文书
优秀毕业生求职信
2014/06/05 职场文书
安全生产宣传标语
2014/06/06 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
学生检讨书怎么写
2014/10/09 职场文书
个人党性分析总结
2015/03/05 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL