JavaScript Strings
JavaScript String trim
trimremoves whitespace from both ends of a string.
Text typed by a person very often has stray spaces.
Trimming before checking or saving avoids a whole class of bugs.
Example
Example
javascript
const entered = " Ada ";
console.log(entered.trim());
console.log(entered.trim().length);The output is Ada then 3.
Trimming and Padding
trim removes whitespace from both ends.
trimStart and trimEnd do one side only.
padStart and padEnd add characters to reach a length.
Syntax
Syntax
javascript
text.trim();
text.padStart(length, character);Whitespace means spaces, tabs and newlines.
Validating Input
A box full of spaces should count as empty.
Example
Example
javascript
const entered = " ";
console.log(entered === "");
console.log(entered.trim() === "");Only the trimmed check spots that it is really empty.
Trimming One Side
Occasionally you want to keep the spacing at one end.
Example
Example
javascript
const text = " hi ";
console.log(text.trimStart().length);
console.log(text.trimEnd().length);The output is 4 then 4, each having lost two spaces.
Padding Numbers
padStart is how you get a leading zero.
Example
Example
javascript
const minutes = "5";
console.log(minutes.padStart(2, "0"));
console.log("12".padStart(2, "0"));The output is 05 then 12, already long enough.
Building a Clock
Padding both parts keeps the display steady.
Example
Example
javascript
const hours = 9;
const minutes = 5;
const time = String(hours).padStart(2, "0") + ":" + String(minutes).padStart(2, "0");
console.log(time);The output is 09:05.
Masking a Value
padStart with a symbol hides the start of a card number.
Example
Example
javascript
const last4 = "4242";
console.log(last4.padStart(12, "*"));The visible part stays at the end.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String trim</title>
</head>
<body>
<h1>String trim and pad</h1>
<input id="name" value=" Ada ">
<p id="out"></p>
<script>
const entered = document.getElementById("name").value;
const tidy = entered.trim();
document.getElementById("out").innerHTML =
"Raw length: " + entered.length +
"<br>Trimmed: [" + tidy + "]" +
"<br>Is empty: " + (tidy === "") +
"<br>Padded time: " + String(9).padStart(2, "0") + ":" + String(5).padStart(2, "0");
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try only spaces:
Replace the value with spaces and see the empty check turn true.
Important Points
trimremoves whitespace from both ends.trimStartandtrimEndtrim one side.- Always trim before checking whether input is empty.
padStartadds characters to the front.- Padding is how you get leading zeros.
Conclusion
Trimming input is one of the cheapest bug fixes there is.
Padding keeps numbers and times lined up.
Both return new strings, like every string method.