String Methods
📚 What are JavaScript String Methods? JavaScript strings come packed with built-in methods for transforming, searching, and extracting text. Like Python, JS strings are immutable: methods always return a new string. Chain multiple methods together for powerful one-line transformations.
Appy Says…
Strings are everywhere in web apps — usernames, messages, URLs, search terms. JavaScript's string methods let you slice, search, replace, and transform text in one line. These are the tools you'll use in literally every project.
What are JavaScript String Methods?
JavaScript strings are objects with built-in methods. Like Python, they are immutable — methods return new strings, they don't change the original.
- •
.toUpperCase()/.toLowerCase() - •
.trim()— remove whitespace from both ends - •
.includes(str)→true/false - •
.startsWith(str)/.endsWith(str) - •
.indexOf(str)→ first index, or -1 - •
.slice(start, end)— extract substring - •
.replace(old, new)— replaces first match;.replaceAll(old, new) - •
.split(separator)→ array;array.join(sep)→ string - •
.padStart(len, char)/.padEnd()— pad with characters
Think of it like editing a TikTok caption
Before posting, TikTok trims your caption (.trim()), lowercases hashtags for matching (.toLowerCase()), splits them out (.split('#')), checks for banned words (.includes()), and replaces profanity (.replace()). One string, a chain of methods.
How It Works
- •1. Strings are primitives but JS auto-boxes them into String objects to access methods
- •2. Each method returns a new string — chain them:
str.trim().toLowerCase() - •3.
.slice(0, 3)extracts chars at index 0, 1, 2 (stop is exclusive) - •4. Negative indices work in
.slice():.slice(-3)gets last 3 chars - •5.
.replace(/regex/g, newStr)uses a regex for global replace across the whole string - •6. Template literals use
`${expr}`— technically not a method but used everywhere
Real-World Examples
- •Search:
title.toLowerCase().includes(query.toLowerCase())— case-insensitive match - •Display name:
username.slice(0, 15) + '…'— truncate long names - •URL slug:
title.toLowerCase().replaceAll(' ', '-') - •Phone validation:
phone.replace(/\D/g, '')— strip all non-digits - •Leaderboard rank:
String(rank).padStart(3, '0')→'007'
Key Facts
- •Strings in JS are sequences of UTF-16 code units — emoji can be 2 units, making
.lengthsurprising - •
.at(-1)is the modern way to get the last character (cleaner than[str.length-1]) - •Regular expressions unlock powerful pattern matching —
/\d+/gmatches all digit sequences - •
String.raw`\n`returns the literal two-character string\n, not a newline
Watch Out!
.replace(old, new) only replaces the first match. To replace ALL occurrences, use .replaceAll(old, new) or the regex flag: .replace(/old/g, new). Many beginners miss this and wonder why only one word changed.
Remember
String methods return new strings — always assign the result. Chain methods for clean transformations: input.trim().toLowerCase().replace(' ', '-').
What You Learned
- •Core methods:
.trim(),.includes(),.slice(),.replace(),.split() - •Strings are immutable — methods return new strings, always assign
- •Unlocks: search, URL slugs, validation, text truncation, any user-facing text processing
Key Facts
- →Strings in JS are sequences of UTF-16 code units — emoji can be 2 units, making
.lengthsurprising - →
.at(-1)is the modern way to get the last character (cleaner than[str.length-1]) - →Regular expressions unlock powerful pattern matching —
/\d+/gmatches all digit sequences - →
String.raw`\n`returns the literal two-character string\n, not a newline
Real-World Examples
Remember
String methods return new strings — always assign the result. Chain methods for clean transformations: input.trim().toLowerCase().replace(' ', '-').
Quick Quiz
.trim() does?