Menu Home

String.padStart, String.padEnd

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.

The Video

Here is a video I did on the subject.

Shameless Plug

Check us out everywhere!

Check out all our videos at: https://www.boringjavascript.com

Check out everything at: https://www.thevirtuoid.com

Facebook: https://www.facebook.com/TheVirtuoid

Twitter: https://twitter.com/TheVirtuoid

YouTube: https://www.youtube.com/channel/UCKZ7CV6fI7xlh7zIE9TWqgw

Categories: Boring JavaScript Javascript

Tagged as:

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: