A good practice when using string values from form fields is to remove the whitespaces from the start and end of the strings — i.e. trim the string.
Plus, you'll read how to trim strings, aka remove whitespaces and line terminator characters from the start and/or end of the string.
1. The whitespaces and line terminators
Before diving into the actual trim functions, let's first agree what special characters the trim functions are removing from strings.
First, the whitespace is any character from the following list:
- SPACE (
- CHARACTER TABULATION (
- LINE TABULATION (
- FORM FEED (FF) (
- NO-BREAK SPACE (
- ZERO WIDTH NO-BREAK SPACE (
- Any other character from Space Separator category
In simple words, the whitespaces are characters that rendered on the screen create an empty white space.
Common whitespace characters are space
' ' and tab
Secondly, the line terminator is also a special set of characters consisting of:
- LINE FEED (
- CARRIAGE RETURN (
- LINE SEPARATOR (
- PARAGRAPH SEPARATOR (
The line terminator represents a character that exists at the end of a text line and has some special purpose.
A common line terminator character is the line feed
'\n', which means moving one line forward.
There are situations when you want to clean strings entering from the application input. For example, you'd definitely want to trim strings from the form fields representing a username, first name, last name, phone number, etc.
string.trim() removes sequences of whitespaces and line terminators from both the start and the end of the string.
Let's see a few examples:
const name = ' Kate ';name.trim(); // => 'Kate'const phoneNumber = '\t 555-123\n ';phoneNumber.trim(); // => '555-123'
name.trim() removes the spaces from the start and end of the string.
' Kate ' becomes
phoneNumber.trim() also cleans boths ends:
'\t 555-123\n ' becomes
The trim function removes from both ends of the string sequences of consecutive white spaces and line terminals. But if a whitespace is found in between two letters, then, of course, this whitespace is preserved:
const fullName = ' Kate Smith ';fullName.trim(); // => 'Kate Smith'
fullName.trim() removes the spaces from both the start and end of the string, however keeps the space between
string.trimStart() removes sequences of whitespaces and line terminators only from the start of the string.
const name = ' Jane ';name.trimStart(); // => 'Jane 'const phoneNumber = '\t 555-123 \n';phoneNumber.trimStart(); // => '555-123 \n'
name.trimStart() removes the spaces only from the start of the string, and doesn't touch the space at the end.
' Jane ' becomes
phoneNumber.trimStart() removes the sequence of whitespaces and line terminals from the start only.
'\t 555-123 \n' becomes
string.trimEnd() removes sequences of whitespaces and line terminators only from the end of the string.
const name = ' Jim ';name.trimEnd(); // => ' Jim'const phoneNumber = '\t 555-123 \n';phoneNumber.trimEnd(); // => '\t 555-123'
name.trimEnd() removes the one space from the end, and doesn't touch the leading part.
' Jim ' becomes
phoneNumber.trimEnd() trims the end of the string too.
'\t 555-123\n ' becomes
The whitespaces, like a space or tab, are special characters that create empty space when rendered.
Also the line terminals, like the line feed, you may find at the end of lines in a multiline string.
string.trim() removes sequences of white spaces and line terminators from both the start and end of the string,
string.trimStart() removes them from start, and finally
string.trimEnd() removes them from the end.