Strings & String Methods
EasyStrings 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
let str = "hello";
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