String.padStart, String.padEnd

By thevirtuoid on September 28, 2021 • ( Leave a comment )

Hi everyone, and welcome to another exciting edition of Boring JavaScript! Today, we talk about the String.padStart() and String.padEnd() methods. Each one let’s you pad characters (like spaces) to the beginning of a string (padStart) or the ending of a string (padEnd). This let’s you easily accomplish things like justifying text.

Don’t like to read? Then watch the video.

Clowns to the Left of Me, Jokers to the Right

Both String.padStart() and String.padEnd() work the same way. Given the length of your string and the length of the string in which you want to copy your string, padStart() and padEnd() inserts the string in such a way that extra characters will be filled at the very beginning or the very end.

Let’s look at padStart() first. Consider the following code:

const myString = "myString";
const rightJustifiedString = myString.padStart(12);
console.log(`-->${rightJustifiedString}<--`);

/* output should be 4 spaces then the string
-->    myString<--
*/

Line 2 contains the padStart() method. It takes two arguments (we’ll cover the second optional argument later). The first one is the size of the target string. What JavaScript will do is copy the source string (Line 1) into the target string, then insert characters (spaces in this case) at the beginning of the string to fill in the string up to the size you specify in the padStart() argument. In our case, we want the target string to be 12 characters long, and our source string is 8 characters in length, so we can expect 4 spaces to be inserted at the beginning of the string.

What if the number of characters requested is less than the length of our source string? Then the string is copied as-is without padding (and without truncating).

What about padEnd()?

const myString = "myString";
const leftJustifiedString = myString.padEnd(12);
console.log(`-->${leftJustifiedString}<--`);

/* output should be the string then 4 spaces. I know you can't see it, but s
-->myString    <--
*/

It works the exact same way as padStart(), except that the extra characters are placed at the end of the string.

Cast of Characters

What about that second optional argument? That tells you what string to pad the new string with. By default, that is a single space character. It can be any string you wish – it even doesn’t have to be a single character!

For example, suppose we want to pad with an asterisk (*). It’s easy:

const myString = "myString";
const rightJustifiedString = myString.padStart(12, '*');
console.log(`-->${rightJustifiedString}<--`);

/* output should be 4 asterisks then the string
-->****myString<--
*/

Line 2 shows the second argument is now an asterisk. That tells JavaScript to now pad with an asterisk instead of a space (as shown in the output).

But it can be any string:

const myString = "myString";
const rightJustifiedString = myString.padStart(12, 'FOOBAR');
console.log(`-->${rightJustifiedString}<--`);

/* output should be 4 asterisks then the string
-->FOOBmyString<--
*/

Notice that although our replacement string is six characters long, it only could display four characters, since all we needed was four characters to be inserted at the beginning.