Summary

The padEnd method in JavaScript is used to add characters to the end of a string to reach a specified length, enhancing readability by aligning strings in a tabular format, and is particularly effective with monospace fonts.

Abstract

The JavaScript padEnd string method is designed to append characters to the end of a string until it meets a target length, which is beneficial for formatting strings in a tabular layout for better readability. The method accepts two parameters: the first is the required length of the resulting string, and the second, optional parameter is the character to be used for padding (defaulting to a space if omitted). This method is especially useful when working with monospace fonts, where each character has the same width, allowing for consistent alignment in text-based interfaces such as terminals. The article also contrasts padEnd with padStart, explains potential issues when padding with emojis, and provides examples and resources for further understanding.

Opinions

The author, Samantha Ming, expresses enthusiasm for the padEnd method, indicating it makes reading strings in tabular format much easier.
Community input from Twitter user @2alin highlights the importance of using monospace fonts for tabular styling and points out that HTML rendering may remove extra spaces, making the padEnd method particularly relevant for terminal displays.
Another Twitter user, @Cilly_Boloe, provides a practical example of using padEnd and padStart to demonstrate their utility in real-world applications.
The author cautions that when padding strings with emojis, one must account for the fact that emojis are typically composed of two characters, which can affect the desired output if not managed correctly.
The article concludes with a collection of resources from MDN Web Docs, codeburst, Exploring JS, and others, suggesting a comprehensive approach to learning and applying string padding methods in JavaScript.

padEnd String Method in JavaScript

With padEnd, it adds characters to the end of a string so it reaches a specified length. This is great for us to add some padding to display our strings in a tabular format. Isn’t it so much easier to read, yay 🍹

// Display String in Tabular Format with padEnd

// ❌
'Day: Monday' + 'Drink: 🍵'
'Day: Saturday' + 'Drink: 🍹'

// ✅
'Day: Monday'.padEnd(20) + 'Drink: 🍵'
'Day: Saturday'.padEnd(20) + 'Drink: 🍹'

padEnd Parameters

The padEnd accepts 2 parameters:

string.padEnd( <length>, <character>)

1st Parameter: Length

This is the final length of your result string. It is required.

Let’s say you begin with a string that has 3 characters. And you set the length to be 5 characters. That means, padEnd will pad it with 2 characters so the total length meets your target length of 5 characters.

Here’s an example. I’m denoting the space character with · to show you the padded space.

'abc'.padEnd(5);

// abc··

2nd Parameter: Character

This is an optional parameter. As you see from above, the default padded character is an empty space. However, you might want to pad it with a different character. No problem! Just pass it here.

'hi'.padEnd(10, '!');

// 'hi!!!!!!!!'

Tabular Format only works with Monospace Font

So in my example of using padEnd to create table formatted string. One thing to note is that it only works with Monospace Font.

A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space.

Wikipedia

By Garethlwalt — Own work, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=9110833

Fonts such as “Roboto” or “Monaco” are Monospace Font. Meaning each character will have the same width. Whereas fonts such as “Times New Roman” are not monospace. They are proportional, so each character will have different widths. And since each character has a different width, it would be hard to create the Table format using padEnd.

padEnd vs padStart

The purpose of string padding is to add characters to a string, so the outcome has a specific length.

padEnd adds characters at the end of the string. Whereas padStart adds characters at the start of the string

padEnd

'hello '.padEnd(10, '👋');

// 'hello 👋👋'

padStart

' hello'.padStart(10, '👋');

// '👋👋 hello '

Watch out! — padding with Emojis

If you’re padding with emojis, you might run into this issue.

'hello '.padEnd(11, '👋');

// 'hello 👋👋�'

Notice the last “👋” is not displayed. But instead “�” is shown. Well, that’s because emojis are typically made up of 2 characters.

'👋'.length === 2 // true

So if you’re padding with emojis, just be mindful that the emoji might be cut off if you don’t provide it enough length.

Community Input

@2alin: Just something to add: to have a tabular style use, the font should be mono-space and HTML render will remove any extra space; which makes such application important mainly in the information displayed in the terminal.
@Cilly_Boloe: padEnd and padStart example → link

Resources

Like this on Twitter
Like this on Instagram
Originally published at www.samanthaming.com

Thanks for reading ❤

Say Hello! Instagram | Facebook | Twitter | SamanthaMing.com | Blog