Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to pad a number with leading zeros in JavaScript?
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.
49K+ Views
