Skip to content
the words 'string' in retro style and 'methods' in neon style over a synthwave background

JS String Methods Part 11

Covering padStart() and padEnd()

Tags that this post has been filed under. Links open in the same window.

padStart() and padEnd(), sworn rivals of the trim() family.

In this post, skip to:

In case you're interested in a little bit of back-history, there's always the (old) news related to the npm left pad incident. Warning: you can spent quite a while browsing tweets, reddit posts and posts about the subject.

Well, thankfully we now can just use padStart() and padEnd() to add padding to our strings!


padStart() will concatenate a new string to the start of an existing string until a certain length is reached, then return the result as a new string.

It takes two parameters: the length you want your new string to be, and what you want to use as "filling" to make the existing string reach that length.

  • If your target length is less than the original string's length, no changes will be made
  • If you don't specify a target length, the string will be returned with no changes
  • If you don't specify a filling/padding string, then padStart() will default to using a space (" ")
  • In case the filling/padding string is too long to fit the target length, then it will be truncated from the end - that is, characters will be removed from the end of the padding string to make it fit
  • On the other hand, if the padding string is too short to reach the target length, then it will be repeated until it does reach the length

See it in action:

const string = "We're scuba diving!"

//output: 19

string.padStart(10, 'Glub-glub')
//output: "We're scuba diving!"

string.padStart(25, 'Glub-glub')
//output: "Glub-gWe're scuba diving!"

//output: " We're scuba diving!"

string.slice(-8).padStart(25, 'Glub-glub')
//output: 'Glub-glubGlub-glu diving!'


padEnd() will also concatenate a string, this time to the end of another, until a target length is reached.

It also takes two parameters: target length and string to use as padding. It follows the same general rules as padStart(), with the only change being where the padding string is added.

const string = "We're scuba diving!"

//output: 19

string.padEnd(10, 'Glub-glub')
//output: "We're scuba diving!"

string.padEnd(25, 'Glub-glub')
//output: "We're scuba diving!Glub-g"

//output: "We're scuba diving! "

string.slice(-8).padEnd(25, 'Glub-glub')
//output: ' diving!Glub-glubGlub-glu'

Padding right-to-left languages

Do note that the positioning of the padded strings remains consistent across left-to-right and right-to-left languages, regardless of where the language considers the string to begin/end.

const rtlText = '   ەركىنلىك'

const ltrText = ' freedom'

rtlText.padStart(21, 'ABC')
//output: 'ABCABCABCA ەركىنلىك'

ltrText.padStart(21, 'ABC')
//output: 'ABCABCABCAB freedom'

rtlText.padEnd(21, 'ABC')
//output: ' ەركىنلىكABCABCABCA'

ltrText.padEnd(21, 'ABC')
//output: ' freedomABCABCABCAB'

A little practice

Try adding a Credit Card Mask in this 7-kyu CodeWars kata!