When working with strings, it often requires removing leading and trailing whitespace. In this article, we will learn how to trim whitespace in a JavaScript string using the trim() method, with examples.
How to Trim Whitespace in JavaScript?
We commonly need to eliminate whitespaces in a string when working with user input. Users might unintentionally enter data with extra spaces when filling out a form or survey. Trimming whitespace will make the data more clean. It is also useful when we need to compare strings, we might want to ignore leading and trailing whitespaces.
JavaScript has a built-in trim() method to trim whitespaces from a string. This method belongs to the string class in JavaScript and allows us to remove leading and trailing whitespace characters from a given string.
The syntax for the trim() method is:
myString.trim()It’s important to note that the trim() method does not modify the original string. Instead, it returns a new string with the whitespace removed. This ensures that our data is intact and provides a clean, trimmed string to work with. Whitespace characters can include spaces, tabs, line feeds, carriage returns, and other similar characters.
Examples of using the trim() method
Let’s explore different kinds of examples to demonstrate how the trim() function works.
1) String with Leading and Trailing Whitespace
Suppose we have a string that has whitespace both at the starting as well as at the end. We can simply use the trim() method and get a clean string without whitespace. Let’s see an example:
// Define a string with leading and trailing whitespaces let myString = " Hello Favtutor Readers "; // Use the trim() method to remove leading and trailing whitespaces let trimmedString = myString.trim(); // Display the result in the console console.log(trimmedString);
Output:
"Hello Favtutor Readers"Here we can see, that the trim() method successfully removes whitespace from both ends.
2) String Contains Only Whitespace
In this case, the trim() method effectively removes all the whitespace from the string, leaving us with an empty string. It shows an input with all the whitespace is equivalent to an empty string. Here’s the demonstration:
// Define a string consisting of only whitespaces let whitespaceString = " "; // Use the trim() method to remove leading and trailing whitespaces let trimmedWhitespaceString = whitespaceString.trim(); // Display the result in the console console.log(trimmedWhitespaceString);
Output:
""3) String with No Whitespace
When there is no whitespace to remove, the trim() method returns our input string unchanged. Sometimes we are not sure whether our string contains whitespace or not. Let’s see the demonstration:
// Define a string without leading or trailing whitespaces let noWhitespaceString = "Favtutor"; // Use the trim() method to remove any potential leading or trailing whitespaces (in this case, none) let trimmedNoWhitespaceString = noWhitespaceString.trim(); // Display the result in the console console.log(trimmedNoWhitespaceString);
Output:
"Favtutor"Additional trim() Methods
While the trim() method removes whitespace from both ends of a string, we have two more methods i.e. trimStart() and trimEnd(). These methods were introduced in ECMAScript 2019 (ES10). They provide more specific control when we only need to trim spaces from one end of a string, by keeping the other part intact.
The trimStart() method is useful when we want to remove extra whitespace only from the start of the string. It keeps all the other spaces as it is.
There is also another method trimLeft(). These methods can be used interchangeably, as they both serve the same function. Let’s see an example:
// Define a string with leading and trailing whitespaces let myString = " Favtutor "; // Use the trimStart() method to remove leading whitespaces let trimmedStartString = myString.trimStart(); // Display the result in the console console.log(trimmedStartString);
Output:
"Favtutor "Here we can see only leading whitespaces are removed, while the ending whitespaces are unchanged.
The trimEnd() method removes all the whitespaces present at the end of a string and does not affect leading spaces. It is the counterpart to trimStart and focuses on ending whitespace characters.
It also has a similar method, trimRight(). They both keep leading whitespace untouched. Here’s the code:
// Define a string with leading and trailing whitespaces let myString = " Hello Favtutor Readers! "; // Use the trimEnd() method to remove trailing whitespaces let trimmedEndString = myString.trimEnd(); // Display the result in the console console.log(trimmedEndString);
Output:
" Hello Favtutor Readers!"Also, learn how to remove the last character from a string in JavaScript.
Conclusion
In this article, we learned about the built-in method provided by JavaScript to trim whitespaces from a string. We also learned about trimStart() and trimEnd() which provide more targeted solutions, enabling the selective removal of leading or trailing whitespaces.
