Add Leading Zeros to a Number in TypeScript

Add Leading Zeros to a Number in TypeScript #

To add leading zeros to a number in TypeScript:

1. Convert the number to a string.
2. Call the padStart() method to add zeros to the start of the string.
3. The padStart method returns a new string with the specified pad string applied from the start.

Copied!
function addLeadingZeros(num: number, totalLength: number): string {
  return String(num).padStart(totalLength, '0');
}

console.log(addLeadingZeros(5, 2)); // 👉️ "05"
console.log(addLeadingZeros(5, 3)); // 👉️ "005"
console.log(addLeadingZeros(5, 4)); // 👉️ "0005"
console.log(addLeadingZeros(100, 2)); // 👉️ "100"

// ✅ or use the Addition (+) operator
const num = '00' + 3;
console.log(num); // 👉️ "003"

We passed the following 2 parameters to the String.padStart method.

1. the target length for the string - the string gets padded with the pad string up to this length. This also takes into consideration decimal characters or a minus sign.
2. the pad string - the substring that should be applied to the beginning of the string.

To be able to use the padStart method, we had to convert the number to a string.

This is why we explicitly set the function's return type to string.

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

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

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

console.log(addLeadingZeros(5, 2)); // 👉️ "05"
console.log(addLeadingZeros(-5, 3)); // 👉️ "-005"

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.

An alternative and perhaps simpler approach is to use the addition (+) operator.

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

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

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