JavaScript实现数字前补“0”的五种方法示例


Posted in Javascript onJanuary 03, 2019

本文实例讲述了JavaScript实现数字前补“0”的五种方法。分享给大家供大家参考,具体如下:

众所周知JavaScript中的数字是没有前置0的,因此需要我们自己进行操作来添加前置0,而且还得转换成字符串。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript 数字前补“0”</title>
<body>
<script>
 //迭代方式实现
 function padding1(num, length) {
  for(var len = (num + "").length; len < length; len = num.length) {
   num = "0" + num;
  }
  return num;
 }
 //递归方式实现
 function padding2(num, length) {
  if((num + "").length >= length) {
   return num;
  }
  return padding2("0" + num, length)
 }
 //转为小数
 function padding3(num, length) {
  var decimal = num / Math.pow(10, length);
  //toFixed指定保留几位小数
  decimal = decimal.toFixed(length) + "";
  return decimal.substr(decimal.indexOf(".")+1);
 }
 //填充截取法
 function padding4(num, length) {
  //这里用slice和substr均可
  return (Array(length).join("0") + num).slice(-length);
 }
 //填充截取法
 function padding5(num, length) {
  var len = (num + "").length;
  var diff = length - len;
  if(diff > 0) {
   return Array(diff).join("0") + num;
  }
  return num;
 }
 function test(num, length) {
  document.write(padding1(num, length));
  document.write("<br>");
  document.write(padding2(num, length));
  document.write("<br>");
  document.write(padding3(num, length));
  document.write("<br>");
  document.write(padding4(num, length));
  document.write("<br>");
  document.write(padding5(num, length));
  document.write("<br>");
 }
 test(123, 10);
 test(1234567890123, 10);
</script>
</body>
</html>

输出

0000000123
0000000123
0000000123
0000000123
000000123
1234567890123
1234567890123
4567890123
4567890123
1234567890123

感兴趣的朋友还可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行上述代码。

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
35个最好用的Vue开源库(史上最全)
Jan 03 #Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 #Javascript
发布一款npm包帮助理解npm的使用
Jan 03 #Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 #Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 #Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 #Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 #Javascript
You might like
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python 中的with关键字使用详解
2016/09/11 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
好邻里事迹材料
2014/01/16 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
入伍通知书
2015/04/23 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
2016年感恩节寄语
2015/12/07 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书