String.prototype.padEnd()
str.padEnd(targetLength[, padString]) String.prototype.padEnd() pads the current string with a given character (or characters) until it reaches the specified length, appending the padding to the end (right side). This method is essential for creating fixed-width columns in tables, CLI output, and formatted text displays.
Syntax
str.padEnd(targetLength)
str.padEnd(targetLength, padString)
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
targetLength | number | — | The length the resulting string should have |
padString | string | " " (space) | The string to pad with |
Return Value
A new string of the specified length, with the padding appended to the end.
Examples
Basic padding
By default, padEnd() uses spaces:
"hello".padEnd(10);
// "hello "
"test".padEnd(6);
// "test "
Space padding is the default and covers simple alignment needs, but you often want something more visible. Dots make placeholder text obvious, zeros fill numeric fields, and any character you choose becomes the padding material — the second argument accepts a string of any length.
Custom padding characters
You can specify any character or string to use for padding:
// Pad with zeros
"42".padEnd(5, "0");
// "42000"
// Pad with dots (useful for readability)
"loading".padEnd(10, ".");
// "loading..."
Custom characters are fine for one-off formatting, but padEnd() earns its place in real applications when you need uniform column widths across multiple rows of data. The following example applies padEnd() inside a loop to produce a clean table from structured data — each cell is padded to the same width so columns stay aligned regardless of how long each value is.
Formatting table data and CLI output
This is where padEnd() shines—creating aligned columns:
const data = [
{ name: "Alice", role: "Admin" },
{ name: "Bob", role: "User" },
{ name: "Charlie", role: "Moderator" }
];
// Print a formatted table
console.log("NAME | ROLE");
console.log("----------|----------");
data.forEach(({ name, role }) => {
console.log(`${name.padEnd(10)}| ${role.padEnd(9)}`);
});
// Output:
// NAME | ROLE
// ----------| ----------
// Alice | Admin
// Bob | User
// Charlie | Moderator
The table example uses single-character padding, which covers most use cases. But padEnd() accepts any string as the padding material — not just a single character. When the pad string has more than one character, the method repeats it in a cycle to fill the remaining space, truncating the final repetition if it would overshoot the target length.
Multi-character padding strings
When the padString is longer than needed, it’s truncated:
// Only uses first character if padString has multiple chars
"ab".padEnd(5, "XYZ");
// "abXYZ"
// padString is truncated to fit
"hi".padEnd(6, "ABC");
// "hiABCA" (only first 4 chars used to reach length 6)
// Useful pattern: cycle through characters
"x".padEnd(8, "ab");
// "xabababa" (repeats and truncates)
The examples above assume you control both the string and the target length. In real code, you do not always know how long the input will be, and you may pass a string that already meets or exceeds the target. The edge cases below show what happens in those situations — no errors, just sensible defaults that keep your formatting logic from breaking.
Edge Cases
// If targetLength <= string length, returns original
"hello".padEnd(3);
// "hello"
// Empty padString repeats nothing (returns original)
"test".padEnd(8, "");
// "test"
// Unicode characters count as single units
"👍".padEnd(4, "x");
// "👍" + 2 x's (emoji has length 2, so 2 chars added to reach length 4)
These edge cases mean you can call padEnd() without wrapping it in length checks. If the string is already long enough, it comes back unchanged. If the pad string is empty, no padding is appended. The method degrades cleanly in every scenario, which makes it safe to use in formatting pipelines where you do not control the input length up front.
Browser Compatibility
padEnd() was introduced in ES2017 (ECMAScript 8) and is supported in:
- Chrome/Edge 57+
- Firefox 48+
- Safari 11+
- Node.js 8.0+
For older environments, use a polyfill:
if (!String.prototype.padEnd) {
String.prototype.padEnd = function(targetLength, padString) {
targetLength = targetLength >> 0;
padString = String(padString || ' ');
if (this.length > targetLength) return String(this);
return String(this) + padString.repeat(targetLength - this.length);
};
}
The polyfill follows the same logic as the native implementation: it checks the current length, then uses repeat() to build the padding string. In modern codebases you can rely on native support everywhere, but understanding the polyfill helps clarify what padEnd() does under the hood — it is just a length check plus a string repeat.
padEnd() vs padStart()
Both methods pad a string to a target length, but they add padding in opposite directions. padStart() prepends characters to the left — used for right-aligning numbers and IDs. padEnd() appends characters to the right — used for left-aligning text in tables.
const label = "Price";
const value = "9.99";
// Right-align value, left-align label
label.padEnd(10) + value.padStart(8);
// "Price 9.99"
When both values would fit on a line, pairing padEnd() with padStart() gives you clean two-column output without any external dependencies.
Unicode and multi-byte characters
padEnd() counts characters by their JavaScript string length, not by visual width. Emoji and some Unicode characters have a string length of 1 but render as double-width in many terminals. This can break visual alignment when mixing ASCII and emoji:
"👍".length; // 2 (UTF-16 surrogate pair)
"👍".padEnd(5, "x"); // "👍" + 3 x's — 5 JS chars but may display as 6 columns
For precise terminal alignment with emoji or CJK characters, use a library that measures display width. For plain ASCII content, padEnd() is perfectly reliable.
Return value when already long enough
If the string is already equal to or longer than targetLength, padEnd() returns the original string unchanged — it never truncates:
"hello world".padEnd(5); // "hello world" — not truncated
"hi".padEnd(2, "xyz"); // "hi" — already at target length
This means padEnd() is safe to call defensively without checking lengths first.
When padEnd() is the better fit
padEnd() is the right choice when you want the text on the left to stay visually aligned and the extra space to grow on the right. That is exactly what you need for tables, logs, and side-by-side labels where each row should end at the same column.
It is also a useful formatting helper when the content itself should remain untouched. Instead of manually counting spaces or building padding loops, you can say what width you want and let padEnd() do the rest.
See Also
- String.prototype.padStart() — Pad from the beginning (left side)
- String.prototype.repeat() — Repeat a string
- String.prototype.trimEnd() — Remove padding from end