JavaScript String padEnd() Method

What You’ll Learn

String.prototype.padEnd() pads a string from the end until it reaches a target length (same API as MDN String.prototype.padEnd()). Learn the default space pad, how padString repeats or truncates, when the original string is returned unchanged, how it compares to padStart(), five examples, and try-it labs.

Introduction

Need a string of a fixed width — for example dotted leaders, fixed-width columns, or short codes padded with spaces? padEnd() adds characters after your text until the result reaches targetLength.

The filler is optional. Omit it and JavaScript uses a single space. Provide a longer filler and it is repeated (and trimmed) to fill the gap. If the string is already long enough, nothing is added.

This page is part of JavaScript String Methods. Related topics include length and localeCompare().

Understanding the padEnd() Method

str.padEnd(targetLength, padString) builds a new string whose length is at least targetLength, by appending filler after str.

• Padding is applied at the end of the string.
• Default padString is " " (one space).
• If padString is too long for the remaining slots, it is truncated.
• If targetLength <= str.length, the original contents are returned as-is.
• An empty padString cannot fill space — the original string is returned.

📝 Syntax

General forms of String.prototype.padEnd:

str.padEnd(targetLength)
str.padEnd(targetLength, padString)

Parameters

• targetLength — desired length of the result. If less than or equal to str.length, str is returned unchanged.
• padString (optional) — string used to fill the end. Truncated if longer than needed. Default: " ".

Return value

A string of length targetLength (or the original length when no padding is needed):

Common patterns

"abc".padEnd(10);              // "abc       "
"abc".padEnd(10, "foo");       // "abcfoofoof"
"abc".padEnd(6, "123456");     // "abc123"
"abc".padEnd(1);               // "abc"

"Title".padEnd(12, ".");       // "Title......."
"200".padEnd(5);               // "200  "

Examples Gallery

Examples follow MDN String.padEnd() patterns. Use View Output or Try It Yourself for each case.

const str1 = "Breaded Mushrooms";

str1.padEnd(25, ".");
// "Breaded Mushrooms........"

const str2 = "200";

str2.padEnd(5);
// "200  "

Breaded Mushrooms........
200  

"abc".padEnd(10);          // "abc       "
"abc".padEnd(10, "foo");   // "abcfoofoof"
"abc".padEnd(6, "123456"); // "abc123"
"abc".padEnd(1);           // "abc"

abc       
abcfoofoof
abc123
abc

"hi".padEnd(10, "*-");
// "hi*-*-*-*-"

"ID".padEnd(8, "0123456789");
// "ID012345"

"ok".padEnd(5, "xyz");
// "okxyz"

hi*-*-*-*-
ID012345
okxyz

const rows = [
  ["Name", "Ada"],
  ["Role", "Engineer"],
  ["City", "London"]
];

const lines = rows.map(([label, value]) =>
  label.padEnd(8, " ") + value
);

lines.join("\n");
// Name    Ada
// Role    Engineer
// City    London

Name    Ada
Role    Engineer
City    London

"ready".padEnd(5, ".");   // "ready"  (already long enough)
"ready".padEnd(3, ".");   // "ready"

"x".padEnd(8, "");        // "x"      (empty filler cannot pad)

const padded = "Go".padEnd(6, "*");
padded.length;            // 6
padded;                   // "Go****"

ready
ready
x
6
Go****

🚀 Common Use Cases

• Dotted leaders — title.padEnd(40, ".") for menus or receipts.
• Fixed-width logs — align labels before values in console output.
• Table-like text — pad cells so columns line up in monospace fonts.
• Display formatting — fill short codes or tags to a shared width.
• Not for visual width — emoji / wide glyphs may look uneven; length is code units.
• Left padding — use padStart() for leading zeros and right-aligned numbers.

📝 Notes

• padEnd() pads on the right; padStart() pads on the left.
• Default filler is one space character.
• If targetLength <= str.length, the string is returned unchanged.
• Long fillers are truncated; short fillers are repeated.
• Empty padString cannot add characters.
• Length uses UTF-16 code units — same as str.length.

💡 Best Practices