Preserve Leading 0 with JavaScript Numbers

In this tutorial, we will learn how to preserve leading 0 with JavaScript numbers.

Sometimes we need to sort strings that are similar to numbers. For example, 10 comes before 2, but after 02 in the alphabet. Leading zeros are used to align numbers in ascending order with alphabetical order.

Following are the methods used to preserve leading zero with JavaScript numbers.

Using the Number as a String

The number is converted into a string using string manipulation, and the leading zero is preserved.

Syntax

myFunc2('Neel', 27, '0165')

The function myFunc2() is called, and the values are passed as arguments. The id is taken as a string which is printed as shown above.

Example

In this example, we have made two forms. One is for Employee 1, whose age, name, and id number are taken as arguments for the myFunc1() function. The next form is for Employee 2, whose same name, age, and id number are taken as inputs in the myFunc2() function. The id number of both employees has a number with a leading zero. That number is entered as a string to preserve the leading zero in this program.


<html>
<body>
   <p>Preserve leading 0 by converting the number to a string</p>
   <p id="root"></p>
   <form>
      <input type="button" onclick="myFunc1('Raghav', 26, '0186')" Value="Display Employee 1 Info">
   </form>
   <form>
      <input type="button" onclick="myFunc2('Neel', 27, '0165')" Value="Display Employee 2 Info">
   </form>
   <script>
      function myFunc1(name, age, id) {
         let root = document.getElementById("root");
         root.innerHTML = name + " is " + age + " years old, with id = " + id;
      }
      function myFunc2(name, age, id) {
         let root = document.getElementById("root");
         root.innerHTML = name + " is " + age + " years old, with id = " + id;
      }
   </script>
</body>
</html>

Using the padStart() Method

In JavaScript, the padStart() method pads a string with another string until it reaches the specified length. Padding is applied from the string's left end. A String of the specified length, starting with a padded string, is returned.

Syntax

String(num).padStart(5, "0");

Here, num is the number whose leading zeroes need to be preserved. 5 is the number's target length, and the "0" needs to be padded at the front using the padStart() method.

Example

In this example, we see that two numbers are taken as input, and zeroes are added to the number according to the inputs given by the user. The target length is specified, and the digits are shifted to the left, adding the zeroes in front of it. The first number takes a target length of five. In this case, the original number is three digits. Two zeroes are added to the front of this number. The second number takes a target length of four. One zero is added to its front, and other numbers are to the shifted left.


<html>
<body>
   <h3>Preserve leading 0 by using <i> padStart()</i>method</h3>
   <p>Click the buttons to call the functions:</p>
   <p id = "root"></p>
   <p>Output for "999" with "0":
      <span class = "output1" ></span>
   </p>
   <button onclick = "myFunc1()" >
      Click To see first number
   </button>
   <p> Output for "666" with "0":
      <span class = "output2" ></span>
   </p>
   <button onclick = "myFunc2()" >
      Click To see second number
   </button>
   </body>
   <script>
      function myFunc1() {
         num1 = 999;
         var1 = String(num1).padStart(5, "0");
         document.querySelector('.output1').textContent = var1;
      }
      function myFunc2() {
         num2 = 666;
         var2 = String(num2).padStart(4, "0");
         document.querySelector('.output2').textContent = var2;
      }
   </script>
</html>

In this tutorial, we saw how to preserve the leading zero with JavaScript numbers. The first method is to change the number to a string. The second method is to pad the number with zeroes in front.

Updated on: 2022-10-20T08:23:14+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements