How to add zeros before number in javascript

Adding leading zeros to a number is often necessary in scenarios where the representation of the number needs to have a fixed width or format.

• When dealing with dates and times (“09:05”)
• Serial numbers or identifiers need consistent length for sorting or display purposes.
• Numbers are often displayed in tables or lists with a fixed width to improve alignment.

In JavaScript, you can add leading zeros to a number by converting it to a string and then using string manipulation functions. These methods return strings, not numbers. If you need to perform mathematical operations, convert the padded string back to a number using parseInt() or parseFloat().

Using padStart() method

The padStart() method in JavaScript is a string method that adds another string (called the padding) to the beginning of the original string until it reaches a specified length.

For example, if you want to pad the number 5 with zeros until it has 3 digits, you can use the padStart() method like this:

var num = 5; // the number to pad
var paddedNum = num.toString().padStart(3, "0"); // convert to string and pad with zeros
console.log(paddedNum); // prints "005"

The padStart() method takes two arguments: the target length of the padded string, and the string to use as the padding. If the padding string is too long, it will be truncated. If the target length is less than or equal to the original string length, the original string will be returned without any changes.

Using slice() method

The string slice() method in JavaScript is a way to extract a part of a string and return it as a new string. The method takes two arguments: the start index and the end index of the part to extract. The start index is inclusive, but the end index is exclusive. You can use negative indexes to count from the end of the string.

You can pad leading zeros to a number by concatenating the number with a string of zeros, and then slicing the desired length from the end.

function addLeadingZeros(num, size) {
  // convert the number to a string
  var s = num + "";
  // add zeros until the string length is equal to size
  while (s.length < size) s = "0" + s;
  // return the padded string
  return s;
}

console.log(addLeadingZeros(5, 3)); // "005"

Using a loop

You can write a addLeadingZeros function takes two parameters: number (the number to which you want to add leading zeros) and width (the total width of the resulting string, including the original number and leading zeros).

The function converts the number to a string and then calculates the number of leading zeros needed to reach the specified width. Finally, it adds the leading zeros using a loop and returns the resulting string.

function addLeadingZeros(number, width) {
  // Convert the number to a string
  let numString = number.toString();

  // Calculate the number of leading zeros needed
  let zerosToAdd = width - numString.length;

  // Add leading zeros
  for (let i = 0; i < zerosToAdd; i++) {
    numString = "0" + numString;
  }

  return numString;
}

let number = 7;
let width = 3;
let result = addLeadingZeros(number, width);
console.log(result); // Output: "007"