JavaScript Strings
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
javascript
const entered = " Ada ";
console.log(entered.trim());
console.log(entered.trim().length);The output is Ada then 3.
trim removes whitespace from both ends.
trimStart and trimEnd do one side only.
padStart and padEnd add characters to reach a length.
Syntax
javascript
text.trim();
text.padStart(length, character);Whitespace means spaces, tabs and newlines.
A box full of spaces should count as empty.
Example
javascript
const entered = " ";
console.log(entered === "");
console.log(entered.trim() === "");Only the trimmed check spots that it is really empty.
Occasionally you want to keep the spacing at one end.
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.
padStart is how you get a leading zero.
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.
Padding both parts keeps the display steady.
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.
padStart with a symbol hides the start of a card number.
Example
javascript
const last4 = "4242";
console.log(last4.padStart(12, "*"));The visible part stays at the end.
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>Run the above example in the Try It Editor.
Try only spaces:
Replace the value with spaces and see the empty check turn true.
trim removes whitespace from both ends.trimStart and trimEnd trim one side.padStart adds characters to the front.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.