JS String Methods Part 11

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

In this post, skip to:

• padStart()
• padEnd()
• Padding right-to-left languages
• Practice!

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

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!"

string.length
//output: 19

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

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

string.padStart(25)
//output: "      We're scuba diving!"

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

padEnd

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!"

string.length
//output: 19

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

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

string.padEnd(25)
//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!