padEnd String Method in JavaScript

padEnd String Method 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 ๐Ÿน

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. *

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

<strong>padEnd</strong>

'hello '.padEnd(10, '๐Ÿ‘‹'); 
// 'hello ๐Ÿ‘‹๐Ÿ‘‹' 

<strong>padStart</strong>

' hello'.padStart(10, '๐Ÿ‘‹'); 
// '๐Ÿ‘‹๐Ÿ‘‹ hello ' 

Watch out! padEnd 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.

javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

ย  ย  You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.