Add padding to a number in JavaScript

This post will discuss how to add padding to a number in JavaScript.

Adding padding to a number in JavaScript means adding some extra characters to the beginning of the number until it reaches a certain length. This can be useful for formatting numbers in a consistent way, such as date, time, IDs, etc. To add padding to a number in JavaScript, we can use one of the following functions:

1. Using `padStart()` function

The padStart() function returns a new string that is padded with a specified character at the start until it reaches a certain length. We can pass two arguments to this function: the target length and the padding character. If the padding character is not provided, it defaults to a space. For example, to pad the number 9 with three 'X', we can use something like this:

let num = 5;

// Convert the number to a string and pad it with 'X' until it has four digits

let paddedNum = num.toString().padStart(4, 'X');

console.log(paddedNum); // 'XXX5'

console.log(typeof paddedNum); // 'string'

Download Run Code

This will convert the number to a string and add 'X' to the start until it reaches the target length of 4. The padStart() function is part of the ES2017 standard and may not be supported by older browsers.

2. Using an `Array()` constructor and `join()` function

This method involves creating an array of a certain length and joining it with the desired padding character, then concatenating it with the number. We can use the Array() constructor to create an array of a given length, and the join() function to join the array elements with a separator, and the + operator to concatenate with the number. For example, using the same number as before, we can do this:

let num = 5;

// Create an array with desired length of 'X' and then join it with the number

let paddedNum = Array(4 - num.toString().length + 1).join('X') + num;

console.log(paddedNum); // 'XXX5'

console.log(typeof paddedNum); // 'string'

Download Run Code

3. Using `repeat()` function

The repeat() function takes a number as an argument and returns a new string containing the string repeated that many times. We can use this function to create a new string of repeated characters of the desired length and use the + operator to concatenate the resultant string with the number:

let num = 5;

// Create a string with desired length of 'X' and then join it with the number

let paddedNum = 'X'.repeat(4 - num.toString().length) + num;

console.log(paddedNum); // 'XXX5'

console.log(typeof paddedNum); // 'string'

Download Run Code

4. Using a custom function

Finally, we can create a custom function that takes three parameters: the number, the target length, and the padding character. This method works by converting the number to a string and checking its length. If it is less than the target length, it adds the padding character to the start until it reaches the target length. For example, using the same number as before, we can do this. This will create a custom function that pads the number with 'X' until it reaches the length of 4.

function pad(num, len, pad = 'X') {

let str = num.toString();

while (str.length < len) {

str = pad + str;

}

return str;

}

let num = 5;

let paddedNum = pad(num, 4);

console.log(paddedNum); // 'XXX5'

console.log(typeof paddedNum); // 'string'

Download Run Code

That’s all about adding padding to a number in JavaScript.

Add padding to a number in JavaScript

1. Using padStart() function

2. Using an Array() constructor and join() function

3. Using repeat() function

4. Using a custom function

Share this:

1. Using `padStart()` function

2. Using an `Array()` constructor and `join()` function

3. Using `repeat()` function