How to add Leading Zeros to a Number in JavaScript

# Add Leading Zeros to a Number in JavaScript

To add leading zeros to a number:

1. Use the String() object to convert the number to a string.
2. Call the padStart() method to add zeros to the start of the string.
3. The padStart method will return a new string, padded with leading zeros.

Copied!
function padWithLeadingZeros(num, totalLength) {
  return String(num).padStart(totalLength, '0');
}

console.log(padWithLeadingZeros(3, 2)); // 👉️ "03"
console.log(padWithLeadingZeros(3, 3)); // 👉️ "003"
console.log(padWithLeadingZeros(3, 4)); // 👉️ "0003"
console.log(padWithLeadingZeros(100, 2)); // 👉️ "100"

// 👇️ Alternatively, simply use the Addition (+) operator
const num = '00' + 3;
console.log(num); // 👉️ "003"

The padWithLeadingZeros() function takes a number and its desired total length as parameters and pads the number with leading zeros if necessary.

The String.padStart method pads the current string with the provided string until the resulting string reaches the given length.

The padStart method takes the following 2 arguments:

The targetLength argument also takes into consideration decimal characters or a minus sign.

An easy way to think about the method is that it pads the original string to a target length with a supplied string.

Copied!
const num = 3;

console.log(String(num).padStart(2, '0')); // 👉️ 03
console.log(String(num).padStart(3, '0')); // 👉️ 003
console.log(String(num).padStart(4, '0')); // 👉️ 0003

If you have a string of length 2 and you set the target length argument to 4, the string will get padded with 2 leading zeros.

Copied!
// 👇️ "0022"
console.log(String(22).padStart(4, '0'));

Make sure to convert the number to a string before using the padStart() method.

Copied!
const num = 123;

const str = String(num);

// ✅ pad number with 2 leading zeros
console.log(str.padStart(str.length + 2, '0'));

// ✅ pad number with 3 leading zeros
console.log(str.padStart(str.length + 3, '0'));

By adding n to the length of the number to determine the target length, we always add n leading zeros to the number.

If you convert the padded string back to a number, any of the leading zeros will automatically get dropped.

Copied!
const num = 3;

const result = Number(String(num).padStart(5, '0'));
console.log(result); // 👉️ 3

If the length of the number exceeds the provided target length, the entire string gets returned from the padStart method.

Copied!
function padWithLeadingZeros(num, totalLength) {
  return String(num).padStart(totalLength, '0');
}

const num = 123456;

console.log(padWithLeadingZeros(num, 3)); // 👉️ "123456"

# Padding negative numbers with leading zeros

If you need to handle negative numbers, you need to add an if statement that adds the minus sign after the leading zeros have been added.

Copied!
function addLeadingZeros(num, totalLength) {
  if (num < 0) {
    const withoutMinus = String(num).slice(1);
    return '-' + withoutMinus.padStart(totalLength, '0');
  }

  return String(num).padStart(totalLength, '0');
}

console.log(addLeadingZeros(3, 2)); // 👉️ "03"
console.log(addLeadingZeros(-3, 3)); // 👉️ "-003"

We added an if statement to check if a negative number is provided to the function.

Note that we deliberately don't include the minus sign in the target length for the new string.

# Pad a number with leading zeros using the addition (+) operator

The addition (+) operator will convert the number to a string and will add the specified number of leading zeros to the beginning of the string.

Copied!
const positive = '00' + 5;
console.log(positive); // 👉️ "005"

const negative = '-' + '00' + String(-5).slice(1);
console.log(negative); // 👉️ "-005"

When using the addition operator with a number and a string, the number gets converted to a string and the two strings get concatenated.

We used the same approach to handle negative numbers as we did with the padStart method.

If you have to pad a number with leading zeros often, define a reusable function.

Copied!
function padWithLeadingZeros(num, n) {
  const char = '0';

  return char.repeat(n) + num;
}

const num = 123;

console.log(padWithLeadingZeros(num, 2)); // 👉️ 00123
console.log(padWithLeadingZeros(num, 3)); // 👉️ 000123
console.log(padWithLeadingZeros(num, 4)); // 👉️ 0000123

The padWithLeadingZeros function takes a number and how many leading zeros should be added to the number as parameters.

The function uses the String.repeat method to repeat the zero n times and adds it to the beginning of the string.

Copied!
console.log('0'.repeat(3)); // 👉️ "000"
console.log('0'.repeat(2)); // 👉️ "00"

You can also use a while loop to add leading zeros to a number.

# Pad a number with Leading Zeros using a while loop

This is a three-step process:

1. Convert the number to a string.
2. Use a while loop to iterate for as long as the string hasn't reached the target length.
3. Pad the string with leading zeros until it reaches the target length.

Copied!
function padWithZero(num, targetLength) {
  let str = String(num)

  while (str.length < targetLength) {
    str = '0' + str
  }

  return str
}

const num = 5;

// ✅ pad with 2 leading zeros
console.log(padWithZero(num, String(num).length + 2)); // 👉️ '005'

// ✅ pad with 3 leading zeros
console.log(padWithZero(num, String(num).length + 3)); // 👉️ '0005'

// ✅ pad with 4 leading zeros
console.log(padWithZero(num, String(num).length + 4)); // 👉️ '00005'

The padWithZero() function is very similar to the padStart method.

It takes a number and the desired target length as parameters and pads the number with leading zeros to the specified length.

The first step is to convert the number to a string.

The while loop iterates for as long as the string's length is less than the desired target length.

On each iteration, we use the addition (+) operator to add a leading zero to the string.

Once the string reaches the desired target length, the condition in the while loop is no longer met.