JavaScript | Pad a number with leading zeros

20 May, 2019
The String prototype property is used to pad a number with leading zeros. This property allows for adding new properties and methods to existing object types.
Syntax:
object.prototype.name = value
Return value: It returns a reference to the String.prototype object.
Example 1: This example adds leading zeros to a number by creating a function and inside this function, if the number is less than the width provided then it adds the leading zeros.
<!DOCTYPE html> <html>     <head>         <title>             JavaScript | Pad a number with leading zeros        </title>    </head>           <body style = "text-align:center;" id = "body">               <h1 style = "color:green;" >             GeeksForGeeks         </h1>               <p id = "GFG_UP" style = "font-size: 16px;"></p>              <button onclick = "gfg_Run()">             click here        </button>                  <p id = "GFG_DOWN" style = "color:green;                    font-size: 20px; font-weight: bold;">        </p>                  <script>            var el_up = document.getElementById("GFG_UP");            var el_down = document.getElementById("GFG_DOWN");            var num = 2213;            el_up.innerHTML = 'Number = ' +num;            function pad(n, width) {                n = n + '';                return n.length >= width ? n :                     new Array(width - n.length + 1).join('0') + n;            }            function gfg_Run() {                                 el_down.innerHTML = pad(num, 7);             }         </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example adds leading zeros to a number by creating a prototype pad. In this example we can pass a string to the object, whatever we want to pad with the number.
<!DOCTYPE html> <html>     <head>         <title>             JavaScript | Pad a number with leading zeros        </title>    </head>       <body style = "text-align:center;" id = "body">                   <h1 style = "color:green;" >             GeeksForGeeks         </h1>                   <p id = "GFG_UP" style = "font-size: 16px;"></p>                  <button onclick = "gfg_Run()">             click here        </button>                  <p id = "GFG_DOWN" style = "color:green;                 font-size: 20px; font-weight: bold;">        </p>                  <script>            var el_up = document.getElementById("GFG_UP");            var el_down = document.getElementById("GFG_DOWN");            var num = '29213';            el_up.innerHTML = 'Number = ' + num;                          String.prototype.pad = function(String, len) {                var str = this;                while (str.length < len)                    str = String + str;                return str;            }            function gfg_Run() {                                 el_down.innerHTML = num.pad("0", 9);             }         </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?