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

 更新时间:2019年01月03日 11:29:52   作者:司马懿字仲达  
这篇文章主要介绍了JavaScript实现数字前补“0”的五种方法,结合具体实例形式分析了javascript数字前补0的相关操作技巧,涉及javascript字符串遍历、迭代、截取、构造等操作,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试运行上述代码。

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

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

相关文章

  • 通过sails和阿里大于实现短信验证

    通过sails和阿里大于实现短信验证

    本篇文章主要介绍了通过sails和阿里大于实现短信验证的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript实现扯网动画效果的示例代码

    JavaScript实现扯网动画效果的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript语言实现扯网动画效果,文中的示例代码讲解详细,对我们学习JS有一定的帮助,需要的可以参考一下
    2022-06-06
  • javascript动态创建链接的方法

    javascript动态创建链接的方法

    这篇文章主要介绍了javascript动态创建链接的方法,涉及javascript动态操作页面元素的技巧,需要的朋友可以参考下
    2015-05-05
  • js 中 document.createEvent的用法

    js 中 document.createEvent的用法

    用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息,请参阅 Event 对象参考。
    2010-08-08
  • JavaScript实现弹窗效果代码分析

    JavaScript实现弹窗效果代码分析

    本文主要介绍了JavaScript实现弹窗效果的代码分析,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • postcss安装和使用示例详解

    postcss安装和使用示例详解

    这篇文章主要介绍了postcss安装和使用,通过这些深度集成,PostCSS不仅仅是一个简单的CSS处理工具,而是一种贯穿整个前端开发流程的技术手段,大大提升了CSS开发效率和产出质量,随着前端社区的发展,PostCSS的功能和应用场景也会更加丰富多元,需要的朋友可以参考下
    2024-03-03
  • js字符串替换所有的指定字符或文字(推荐replaceAll方法)

    js字符串替换所有的指定字符或文字(推荐replaceAll方法)

    要实现js字符串替换所有的某个字符,推荐大家使用replaceAll方法,默认不是所有浏览器都兼容,所以这里给出一个解决方案,需要的朋友可以参考下
    2014-07-07
  • javascript中的异步调用机制

    javascript中的异步调用机制

    这篇文章主要介绍了javascript中的异步调用机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • 悄悄用脚本检查你访问过哪些网站的代码

    悄悄用脚本检查你访问过哪些网站的代码

    YouPorn是YouTube的成人自拍版,Alexa排名61。如果你登陆YouPorn主页,它会悄悄用脚本检查你访问过哪些色情网站。
    2010-12-12
  • JavaScript实现的圆形浮动标签云效果实例

    JavaScript实现的圆形浮动标签云效果实例

    这篇文章主要介绍了JavaScript实现的圆形浮动标签云效果,涉及javascript字符串与数组的遍历、排序操作以及元素样式动态操作与数学运算等相关技巧,是非常实用的一段代码,需要的朋友可以参考下
    2015-08-08

最新评论