String.prototype.padEnd()
Pads a string on the right with a repeated filler until it reaches a target length.
padEnd(targetLength)
padEnd(targetLength, padString)- Added in JavaScript ES2017
Parameters
| Parameter | Type | Description |
|---|---|---|
$targetLength | number | The length of the resulting string once padded. If it is less than or equal to the string's current length, no padding is added. |
$padStringoptional | string= " " (U+0020) | The string used as filler. It is repeated as needed and truncated from the end if it would overshoot targetLength. An empty string leaves the value unpadded. |
Return value
stringA new string of at least targetLength characters, with padString appended until that length is reached. If targetLength is less than or equal to the string's length, the string is returned unchanged.
padEnd() makes a string reach a minimum width by appending filler to its right side. It never truncates: if the string is already at or past targetLength, you get it back untouched. That one-directional behaviour is the whole design — it guarantees a floor on length, not a ceiling.
When to reach for it
Use it when you are laying out fixed-width text: console tables, log prefixes, receipt lines, or any place where a column of labels should line up. Pair it with padStart() to left-align labels and right-align numbers in the same row.
What trips people up
Length is measured in UTF-16 code units, not visible characters. An emoji counts as two, and a letter followed by a combining accent counts as two, so padded columns containing them will look one character short. Normalize first, or measure with [...str].length and pad manually when the text may be non-ASCII.
The second trap is a multi-character padString: it is cut off mid-pattern rather than dropped, so "abc".padEnd(6, "123456") yields "abc123". Filler is truncated from the end, which surprises people expecting a whole number of repetitions.
Example
When to use it
- Align a label column in console-printed report rows
- Build fixed-width records for a legacy flat-file export
- Pad a short field so a status indicator always starts at the same column
Frequently asked questions
What is the difference between padEnd and padStart?
padEnd appends filler to the right of the string, while padStart prepends it to the left. Both take the same arguments and both refuse to shorten a string that already meets the target length; the only difference is which side the filler lands on.
Why does padEnd not truncate long strings?
By specification padEnd only guarantees a minimum length, so a string at or beyond targetLength is returned unchanged. If you need an exact width, chain slice: str.slice(0, n).padEnd(n).
Why is my emoji column misaligned after padEnd?
padEnd counts UTF-16 code units, and astral characters such as emoji count as two while occupying one visual cell. Measure with [...str].length and append the filler yourself when the text may contain emoji or combining marks.
More examples
Filler is truncated, not dropped
With no padString you get spaces. "foo" repeats and is cut mid-word to give "abcfoofoof". A padString longer than the gap is truncated from its end, so only "123" is used. A targetLength below the current length is a no-op, and an empty padString adds nothing at all.
console.log("abc".padEnd(10)); // default filler is a space
console.log("abc".padEnd(10, "foo"));
console.log("abc".padEnd(6, "123456"));
console.log("abc".padEnd(1, "*"));
console.log("abc".padEnd(10, ""));Code units, not characters
The emoji occupies two UTF-16 code units, so padEnd counts the five-glyph string as six and adds only two dots. Visually the second row is a character shorter than the first even though both report length 8.
const plain = "cafe";
const emoji = "café\u{1F389}";
console.log(`[${plain.padEnd(8, ".")}]`);
console.log(`[${emoji.padEnd(8, ".")}]`);
console.log(emoji.length, [...emoji].length);
Discussion