JavaScript - How to Pad a String to Get the Determined Length?

Last Updated : 26 Nov, 2024

Here are different ways to pad a stirng to get the specified length in JavaScript.

1. Using padStart() Method

The padStart() method can be used to pad a string with the specified characters to the specified length. It takes two parameters, the target length, and the string to be replaced with. If a number is to be padded, it has to be first converted into a string by passing it to the String constructor, then the padStart() method can be used on the string.

Syntax

String(strToPad).padStart(padLength, padChar)

JavaScript

str = "abcdefg";
// Padded string
output = String(example1).padStart(10, '*');

// Display output
console.log(output);

Output

abcdefg
1234
***abcdefg
^#^#^#1234

2. Using repeat() and slice() Methods

The string.repeat() is an inbuilt method in JavaScript that is used to build a new string containing a specified number of copies of the string on which this method has been called.

JavaScript

function padStr(padChar, padLength, originalString) {

    // Convert the pad character and original
    // string to String
    padChar = String(padChar);
    originalString = String(originalString);

    // Calculate the length of padding characters
    padLeft = padLength - originalString.length;

    // Create the pad string
    padString = padChar.repeat(padLeft);

    // Add the pad string to the original string
    // slice it to the padLength if it exceeds
    // the pad length specified
    newString = (padString +
        originalString).slice(-padLength);
    return newString;
}

str = "abcdefg";
// Display input
console.log(str);
// Padded string
output = padStr('*', 10, str);
// Display output
console.log(output);

Output

abcdefg
1234
***abcdefg
^#^#^#1234

3. Using JavaScript Loop

A while loop is a control flow statement that allows code to be executed repeatedly based on a given Boolean condition. The while loop can be thought of as a repeating if statement.

Syntax

while (boolean condition) {
    loop statements...
}

JavaScript

function padStr(padChar, padLength, originalString) {
    newString = originalString;

    // Loop until desired length is reached
    while (newString.length < padLength) {

        // Add padChar each time
        paddedString = padChar + paddedString;
    }
    return newString;
}


// Input string
str = "abcdefg";
console.log(str);
// Padded string
output = String(str).padStart(10, '*');
// Display output
console.log(output);

Output

abcdefg
1234
***abcdefg
^#^#^#1234

4. Using padEnd() Method

The padEnd() method pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the end (right) of the current string. Similar to padStart(), it takes two parameters: the target length and the pad string.

JavaScript

function pad() {
    // Input string
    let example1 = "abcdefg";
    let example2 = 1234;
     
    // Display input string
    console.log(example1);
    console.log(example2);
 
    // Padded string
    let appended_out = String(example1).padEnd(10, '*');
    let appended_out2 = String(example2).padEnd(10, '^#');
     
    // Display output
    console.log(appended_out);
    console.log(appended_out2);
}
 
// Function Call
pad();