Strings & String Methods

Easy

Strings in JavaScript are immutable sequences of characters. They are primitives, but JS auto-boxes them to String objects so you can call methods. Every string method returns a new string — the original is never modified. Mastering string methods is essential for parsing, formatting, and manipulating text in real-world applications.

Interactive Visualization

String Immutability

Step 1: Create
let str = "hello";
Output
"hello"
1 / 4

Key Points

  • Strings are immutable — methods always return new strings
  • JS auto-boxes string primitives to String objects for method access
  • charAt(i) and bracket notation str[i] access individual characters
  • slice(start, end) extracts substrings (supports negative indices)
  • indexOf/includes/startsWith/endsWith for searching within strings
  • split(separator) converts string to array, join(separator) does the reverse

Code Examples

Immutability of Strings

const greeting = "Hello, World!";

// String methods return NEW strings
const upper = greeting.toUpperCase();
console.log(upper);     // "HELLO, WORLD!"
console.log(greeting);  // "Hello, World!" (unchanged!)

// You cannot mutate a string in place
greeting[0] = "h";      // Silently fails (no error!)
console.log(greeting);  // "Hello, World!" (still unchanged)

Strings are immutable. Every method returns a new string — the original is never modified.

Searching: indexOf, includes, startsWith, endsWith

const str = "JavaScript is awesome";

// indexOf - returns position or -1
console.log(str.indexOf("Script")); // 4
console.log(str.indexOf("python")); // -1

// includes - returns boolean
console.log(str.includes("awesome")); // true

// startsWith / endsWith
console.log(str.startsWith("Java"));    // true
console.log(str.endsWith("awesome"));   // true
console.log(str.startsWith("Script", 4)); // true (from index 4)

Use includes for presence checks, indexOf when you need the position, startsWith/endsWith for prefix/suffix checks.

Extracting and Transforming

const path = "  /users/alice/profile  ";

// trim - remove whitespace from both ends
console.log(path.trim()); // "/users/alice/profile"

// slice(start, end) - extract substring
console.log(path.trim().slice(1));       // "users/alice/profile"
console.log(path.trim().slice(7, 12));   // "alice"

// replace / replaceAll
const msg = "foo-bar-baz";
console.log(msg.replace("-", " "));     // "foo bar-baz" (first only!)
console.log(msg.replaceAll("-", " "));  // "foo bar baz" (all!)

// padStart / padEnd
console.log("5".padStart(3, "0"));  // "005"
console.log("hi".padEnd(5, "."));   // "hi..."

slice extracts substrings, replace/replaceAll for substitution, trim removes whitespace, padStart/padEnd for formatting.

split and repeat

// split - string to array
const csv = "apple,banana,cherry";
const fruits = csv.split(",");
console.log(fruits); // ["apple", "banana", "cherry"]

// Split into characters
const chars = "hello".split("");
console.log(chars); // ["h", "e", "l", "l", "o"]

// Split with limit
console.log("a-b-c-d".split("-", 2)); // ["a", "b"]

// repeat
console.log("ha".repeat(3));  // "hahaha"

// Round-trip: split then join
const words = "Hello World".split(" ");
console.log(words.join("-")); // "Hello-World"

split converts strings to arrays. Combine with join for transformations like changing delimiters.

Common Mistakes

  • Expecting string methods to mutate the original (they never do)
  • Using replace() and expecting all occurrences to be replaced (use replaceAll)
  • Confusing slice() with splice() (splice is for arrays and mutates)
  • Forgetting that string comparison is case-sensitive ("Hello" !== "hello")

Interview Tips

  • Emphasize immutability — every method returns a new string
  • Know the difference between slice, substring, and substr (substr is deprecated)
  • Be ready to reverse a string: str.split("").reverse().join("")
  • Understand that string primitives are auto-boxed to String objects

Related Concepts