How to pad a number with leading zeros in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to pad a number with leading zeros in JavaScript.

Padding a number can be done in different ways in JavaScript. In this tutorial, we will see the two most popular ways of doing it −

Using the String padStart() method
Using the Array object constructor and join() method

Using the String padStart() Method

In JavaScript, the String object’s padStart() method is useful to pad a number with leading zeros. It takes two parameters, the first one is the total length of the targeted or desired string, and the other one is the string or character the user wants to use for padding. The number the user wants to pad must be converted to a string first to use this method.

Users can follow the syntax below to pad a number with leading zeros in JavaScript using the padStart() method.

Syntax

let number = 2
let result = number.toString().padStart(5, '0')
console.log(result); // 00002

In the above syntax, the padStart() method takes 5 as the targeted string length, and “0” is the string or character by which the number should be padded.

Parameters

Targeted Length − It takes the length of the targeted string.
Pad String − It is the string by which the padding will be performed.

Return Type

A string with the targeted length padded with the pad string.

Example

In the below given an example, we have used the String padStart() method to pad a number with leading zeros. We have made use of a button click event to pad the number.


<html>
<body>
   <h3>
      Padding a number with leading zeros in JavaScript using
   <i> padStart() </i> method </h3>
   <h4> Pad the number 12 with leading zeros and the total length should be 5 </h4>
   <button onclick = "padNumber()"> Pad Number </button>
   <h4 id = "root"> </h4>
   <script>
      let root = document.getElementById('root')
      let number = 12
      function padNumber(){
         let result = number.toString().padStart(5, '0')
         root.innerHTML = "Result: " + result
      }
   </script>
</body>
</html>

Using the Array Object Constructor and join() Method

It is an alternative approach to pad a number. In this approach, we use the Array object constructor of JavaScript to make an array with the same number of elements as required zeros to pad the number. Then we join it with “0” to make a padding string and add it with the number.

Syntax

let number = 24
let strNumber = number.toString()
let targeted_length = 5
let result = ''
// padding zeros
if(strNumber.length < targeted_length){
   let padding = new Array(targeted_length - strNumber.length +
   1).join('0')
   result = padding + strNumber
}else{
   result = strNumber
}

In the above syntax, the “result” variable stores the value of the padded number, leading with zeros.

Algorithm

Step-1 − Declare a variable that stores the string of the number and also declare the targeted string length

Step-2 − If the length of the number string is less than the targeted length then,

Step-2.1 − Use the Array object constructor to make an array of length targeted_length – string number’s length + 1, and join the array elements with the character “0” using the join() method. It will be the padded string.

Step-2.2 − Concatenate the padded string and the number. It will be the result.

Step-3 − If the length of the number string is not less than the targeted length, then the number doesn’t need any padding.

Example

In the below given an example, we have used the Array object constructor and join() method to pad a number with leading zeros. We have made use of a button click event to pad the number.


<html>
<body>
   <h3>
   Padding a number with leading zeros in JavaScript using
   <i> Array object constructor and join() </i> method </h3>
   <h4> Pad the number 24 with leading zeros and the total length should be 5 </h4>
   <button onclick = "padNumber()"> Pad Number </button>
   <h4 id = "root"> </h4>
   <script>
      let root = document.getElementById('root')
      let number = 24
      let targeted_length = 5
      function padNumber(){
         let strNumber = number.toString()
         if(strNumber.length < targeted_length){
            let padding = new Array(targeted_length - strNumber.length +
            1).join('0')
            let result = padding + strNumber
            root.innerHTML = "Result: " + result
         }
      }
   </script>
</body>
</html>

We have learned how to pad a number with leading zeros in JavaScript using two different methods. The first approach uses the String padStart() method, which is also recommended. The second approach uses the Array object constructor and the join method to make the padding. The first approach is the standard approach, and the second is recommended if the users don’t want to use the String padStart() method.