JS String Methods
In this page:
Changing Case
toUpperCase() converts every letter in a string to uppercase, and toLowerCase() converts every letter to lowercase, both returning a brand new string rather than changing the original.
Note: Converting both sides of a comparison to the same case, with toLowerCase(), is a common trick for case-insensitive matching.
Warning: Since strings are immutable, calling toUpperCase() without storing its result does nothing useful, you must capture the returned value.
Example: Changing Case
const text = "Hello World";
console.log(text.toUpperCase());
console.log(text.toLowerCase());trim
trim() removes whitespace from the beginning and end of a string, which is especially useful for cleaning up user-typed input that might contain accidental leading or trailing spaces.
Note: Always trim user input from a form field before validating it, extra spaces are easy for a visitor to type without noticing.
Warning: trim() only removes whitespace from the edges of a string, spaces in the middle of the text are left untouched.
Example: trim
const input = " hello ";
console.log(`"${input.trim()}"`);slice and substring
slice(start, end) and substring(start, end) both extract a portion of a string based on index positions, slice supports negative indexes counting from the end, while substring treats negative values as zero.
Note: For most cases, slice() is the more flexible and predictable choice, especially when working with positions relative to the end of a string.
Warning: Both methods extract up to, but not including, the end index, forgetting this off-by-one detail is a common source of bugs.
Example: slice and substring
const text = "JavaScript";
console.log(text.slice(0, 4));
console.log(text.slice(-6));
console.log(text.substring(0, 4));replace and replaceAll
replace() swaps the first match of a specified text or pattern with new text, while replaceAll() swaps every matching occurrence throughout the entire string.
Note: If you only want to replace one specific occurrence deliberately, replace() is correct, otherwise reach for replaceAll() to be thorough.
Warning: Using replace() when you actually needed every occurrence changed is a common bug, since only the first match gets updated.
Example: replace and replaceAll
const text = "cat cat cat";
console.log(text.replace("cat", "dog"));
console.log(text.replaceAll("cat", "dog"));split, includes, startsWith, and endsWith
split() breaks a string into an array of pieces based on a separator, while includes(), startsWith(), and endsWith() each check for the presence of specific text at any position, the start, or the end of a string.
Note: split() is especially handy for turning a comma-separated list, like tags or categories, into a usable array.
Warning: includes(), startsWith(), and endsWith() are all case sensitive by default, normalize casing first if that matters for your check.
Example: split, includes, startsWith, and endsWith
const tags = "html,css,js";
console.log(tags.split(","));
console.log(tags.includes("css"));
console.log(tags.startsWith("html"));
console.log(tags.endsWith("js"));- Forgetting that string methods return a brand new string rather than modifying the original, strings in JavaScript are immutable.
- Confusing slice() and substring(), they behave similarly but handle negative indexes differently.
- Using replace() when you meant replaceAll(), replace() only changes the first matching occurrence by default.
- toUpperCase, toLowerCase, and trim adjust a string's casing or remove surrounding whitespace.
- slice, substring, split, and includes/startsWith/endsWith let you extract or search within a string.
- replace and replaceAll swap out matched text, with replaceAll affecting every occurrence.
All core string methods, including replaceAll, are supported in every current browser version.
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: