Loading...

JavaScript String Methods

You can already write a string. This session is about methods: small tools you call on that text to change case, cut a piece, clean spaces, swap words, or ask “does this phrase appear inside?” Deeper search patterns and every method in the language can wait — start with a short everyday set.

How do string methods work in JavaScript?

A string method is a function attached to a string value. You call it with a dot, the method name, and parentheses: "hi".toUpperCase(). Most of these tools return a new string. The original stays as it was unless you store the result (let clean = raw.trim()). Common starters: toUpperCase / toLowerCase for case, slice to cut a piece, trim to drop edge spaces, replace to swap one match, includes for a yes/no search, and indexOf for a starting position (or -1 if missing).

String method toolkit

📊 Everyday string methods beginners use first

Idea Example Result / note
Uppercase "hi".toUpperCase() "HI"
slice "JavaScript".slice(0, 4) "Java" (end index not included)
trim " hi ".trim() "hi"
replace "a-a".replace("-", "/") "a/a" (first match)
includes "hello".includes("ell") true
indexOf "hello".indexOf("l") 2 (first index; -1 if missing)

Change letter case

toUpperCase() and toLowerCase() build a new string with all letters upper or lower. Handy before comparing text the user typed.

Upper and lower case

javascript 
let city = "Tehran";
console.log(city.toUpperCase());
console.log(city.toLowerCase());
console.log(city);

Cut a piece with slice

slice(start, end) copies from start up to (but not including) end. Omit end to go through the last character. Indexes start at 0.

Slice a string

javascript 
let word = "JavaScript";
console.log(word.slice(0, 4));
console.log(word.slice(4));
console.log(word);

Clean edge spaces with trim

User input often has spaces at the start or end. trim() removes those edge spaces and returns a cleaner string. Spaces in the middle stay.

Trim spaces

javascript 
let raw = "  hello  ";
let clean = raw.trim();
console.log(raw.length);
console.log(clean.length);
console.log(clean);

Swap text with replace

replace(old, new) swaps the first match of old with new. The rest of the string stays. (Replacing every match is a later topic.)

Replace first match

javascript 
let line = "red-blue-red";
console.log(line.replace("-", "/"));
console.log(line);

Search with includes and indexOf

includes(piece) answers yes/no (true / false). indexOf(piece) returns the index of the first match, or -1 if the piece is not found.

includes and indexOf

javascript 
let msg = "Welcome guest";
console.log(msg.includes("guest"));
console.log(msg.includes("admin"));
console.log(msg.indexOf("come"));
console.log(msg.indexOf("x"));

Clean a title on the page

Trim input, fix case, then put the result on the page with textContent.

Page shows a cleaned title

html 
<!DOCTYPE html>
<html>
<head>
<title>String methods — clean title</title>
</head>
<body>
<p id="out">…</p>
<script>
let raw = "  javaScript methods  ";
let title = raw.trim().toUpperCase();
document.getElementById("out").textContent = title;
</script>
</body>
</html>

The paragraph shows the cleaned title. Change only raw, refresh, and confirm trim + case both applied.

Try it yourself

  1. Log "Tehran".toUpperCase() and "Tehran".toLowerCase(); also log the original variable if you store it first.
  2. From "JavaScript", slice the first four characters, then slice from index 4 to the end.
  3. Trim " hi " and compare .length before and after.
  4. On "a-b-c", replace the first "-" with "/" and log both the result and the original.
  5. On a short sentence, check includes for a word that is present and one that is not; log indexOf for a letter.
  6. In the HTML demo, change only raw, refresh, and read the new title.

Common mistakes

  • Writing toUpperCase without () — you need a call: .toUpperCase()
  • Expecting "hi".toUpperCase() to change the original string — it returns a new one; assign if you need it
  • Thinking slice(0, 4) includes index 4 — the end index is excluded
  • Assuming replace changes every match — by default it changes the first match only
  • Using only indexOf when you need a clear yes/no — includes is easier to read for that

Summary

  • Call methods with . + name + ()
  • toUpperCase / toLowerCase change case; slice cuts a piece; trim cleans edges
  • replace swaps the first match; includes / indexOf search inside the string
  • Methods usually return a new value — store it when you want to keep the result
  • Next: Booleans — true and false for yes/no decisions

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 11 of 16
Javascript Tutorial