JS String Methods Part 10

trim(), trimEnd() and trimStart(), side-eyeing the pad*() family!

In this post, skip to:

• trim()
• trimEnd()
• trimStart()
• Practice!

trim

trim() is very straightforward: it will remove whitespace from the beginning and end of a string, leaving whitespace in the middle intact!

If there's nothing to be removed, then a copy of the original string will be returned.

const rtlText = '   ەركىنلىك   '
rtlText.trim()
//output: 'ەركىنلىك'

const noWhitespace = "It's a Liopleurodon, Charlie."
noWhitespace.trim()
//output: "It's a Liopleurodon, Charlie."

const stringWithSpaces = '     It has spoken! '
stringWithSpaces.trim()
//output: 'It has spoken!'

const stringWithTabs = '\t\t\tIt has shown us the way!\t\t'
stringWithTabs.trim()
//output: 'It has shown us the way!'

const stringWithCRLF = '\r\nThe vortex is open! '
stringWithCRLF.trim()
//output: 'The vortex is open!'

"!  Ride the candy train to town    ".trim()
//output: '!  Ride the candy train to town'

trimEnd

trimEnd() will leave whitespace on the left and along the string intact, remove whitespace from the right only, and then return the new string.

To keep the trim() family consistent with the pad family, this method is named trimEnd().

You may, however, choose to use its alias trimRight() for web compatibility reasons. It will, after all, affect the right side of the string.

Do take into account that there are right-to-left strings! This method will remove whitespace from the right side of the string, which could actually be the beginning depending on the language.

Let's use the same examples as above to further illustrate the differences between trim() and trimEnd():

const rtlText = '   ەركىنلىك   '
rtlText.trimEnd()
//output: '   ەركىنلىك'

const noWhitespace = "It's a Liopleurodon, Charlie."
noWhitespace.trimEnd()
//output: "It's a Liopleurodon, Charlie."

const stringWithSpaces = '     It has spoken! '
stringWithSpaces.trimEnd()
//output: '     It has spoken!'

const stringWithTabs = '\t\t\tIt has shown us the way!\t\t'
stringWithTabs.trimEnd()
//output: '\t\t\tIt has shown us the way!'

const stringWithCRLF = '\r\nThe vortex is open! '
stringWithCRLF.trimEnd()
//output: '\r\nThe vortex is open!'

"!  Ride the candy train to town    ".trimEnd()
//output: '!  Ride the candy train to town'

trimStart

trimStart() is the other twin.

It will leave whitespace on the right and along the string alone, remove whitespace from the left side, and return a copy of the string.

It also has an alias, trimLeft(), which is very welcome particularly when we're dealing with RLT strings. In the case of an RTL string the end would be altered rather than the beginning, and this alias helps keep things clearer.

Time for trimStart() to shine in our examples:

const rtlText = '   ەركىنلىك   '
rtlText.trimStart()
//output: 'ەركىنلىك   '

const noWhitespace = "It's a Liopleurodon, Charlie."
noWhitespace.trimStart()
//output: "It's a Liopleurodon, Charlie."

const stringWithSpaces = '     It has spoken! '
stringWithSpaces.trimStart()
//output: 'It has spoken! '

const stringWithTabs = '\t\t\tIt has shown us the way!\t\t'
stringWithTabs.trimStart()
//output: 'It has shown us the way!\t\t'

const stringWithCRLF = '\r\nThe vortex is open! '
stringWithCRLF.trimStart()
//output: 'The vortex is open! '

"!  Ride the candy train to town    ".trimStart()
//output: '!  Ride the candy train to town    '

Some practice

This 8-kyu kata from the Training JS series is a nice exercise!

If you're feeling like clearing some tests, try opening the Katas at trimStart and trimEnd