# What Are Strings in JavaScript? A **string** in JavaScript is a **primitive data type** used to represent and manipulate textual data. Strings are sequences of **Unicode characters**, meaning they can store letters, digits, punctuation, symbols, and even emoji. JavaScript strings are: - **Immutable** (cannot be changed in place) - **Zero-indexed** (first character is at index 0) - **UTF-16 encoded** (impacts how certain characters behave) - **Primitives** (but behave like objects thanks to wrapper types) --- ## How to Declare Strings JavaScript supports three types of string declaration: ```js let doubleQuote = "Hello, world!"; let singleQuote = 'Hi there!'; let templateLiteral = `My name is ${doubleQuote}`; ``` ### When to Use What: - Use **single** or **double quotes** interchangeably, but stay consistent. - Use **backticks (`)** for: - **Multiline strings** - **Expression interpolation** (e.g. `${name}`) ```js const name = "Alex"; const greeting = `Hello, ${name}!`; // "Hello, Alex!" ``` --- ## Unicode Support JavaScript strings support full Unicode, allowing you to store: ```js const word = "café"; // accented character const emoji = "🎉"; // emoji const chinese = "你好"; // Chinese characters const arabic = "مرحبا"; // Arabic ``` All of this is stored internally as **UTF-16**, which means: - Most common characters use 2 bytes (1 code unit) - Some emoji and symbols use 4 bytes (2 code units) - String length (`.length`) counts **code units**, not visual characters ```js const heart = "❤️"; console.log(heart.length); // 2 console.log([...heart].length); // 1 (grapheme-aware) ``` --- ## Real-World Uses of Strings Strings are everywhere in web development and backend logic. Here's a table of real-world examples: | Area | Use Case | Example | |----------------------|--------------------------------------------|----------------------------------------------------| | **Frontend UI** | Display text, dynamic content | `document.title = "Welcome"` | | **Forms** | Validate user input | `email.includes("@")` | | **APIs / JSON** | Parse and construct payloads | `JSON.stringify()` / `JSON.parse()` | | **URLs** | Read query params, format slugs | `"page=2&limit=10".split("&")` | | **Security** | Token manipulation and sanitization | `token.startsWith("Bearer ")` | | **CLI tools** | Parse commands or file paths | `args.join(" ")` | | **Templating** | Dynamic rendering in HTML/JSX | `` `

${title}

` `` | | **Text formatting** | Trimming, casing, and padding | `input.trim().toUpperCase()` | | **Logging & Debugging**| Generate readable logs | `console.log("Error at step", step)` | --- ## Quick Summary - Strings are **immutable** sequences of Unicode characters. - Use `"`, `'`, or `` ` `` to define them, depending on the context. - JavaScript uses **UTF-16**, so some characters like emoji may behave unexpectedly if not handled carefully. - Strings power much of what we build, from form inputs and JSON, to URLs and UI labels. - Mastering string operations is a foundation for both day-to-day dev work and acing interviews. --- # Understanding String Immutability in JavaScript One of the most important, and often misunderstood, characteristics of strings in JavaScript is that they are **immutable**. ## What Does "Immutable" Mean? > **Immutability** means that once a string is created, it cannot be changed. Any operation that appears to "modify" a string actually **creates a new string** instead. ```js let name = "Alex"; name[0] = "B"; // ❌ This won't work let newName = "B" + name.slice(1); // ✅ Creates a new string console.log(newName); // "Blex" ``` In the example above: - `"Alex"` is not modified. - `"Blex"` is a new string, created from `"B"` and `"lex"`. --- ## Why Are Strings Immutable? ### 1. **Simplicity and predictability** You don’t have to worry about side effects when you pass strings to functions. Each function works on its **own copy**. ### 2. **Security** Immutable strings help prevent accidental or malicious tampering with critical values (like passwords or tokens). ### 3. **Performance optimizations** Because strings don’t change, JavaScript engines can safely **cache**, **reuse**, or **intern** them behind the scenes. --- ## Demonstrating Immutability ```js let greeting = "hello"; function shout(str) { str = str.toUpperCase(); // This creates a new string return str; } console.log(shout(greeting)); // "HELLO" console.log(greeting); // "hello" (original is untouched) ``` Even though `toUpperCase()` was called inside the function, the original string `greeting` was **not changed**. --- ## How to "Modify" a String (Correctly) Since you can't mutate strings in-place, you need to **rebuild** them. ### Replace a character: ```js let str = "cat"; let newStr = str.slice(0, 1) + "u" + str.slice(2); // "cut" ``` ### Insert into a string: ```js let base = "Hello!"; let inserted = base.slice(0, 5) + " world" + base.slice(5); // "Hello world!" ``` --- ## Performance Implications String immutability has **performance consequences**, especially in loops or large-scale operations. ### Bad (inefficient in large loops): ```js let output = ""; for (let i = 0; i < 10000; i++) { output += i; // Creates a new string on every iteration } ``` ### Good (use arrays + join): ```js let buffer = []; for (let i = 0; i < 10000; i++) { buffer.push(i); } let output = buffer.join(""); ``` Joining an array is much more efficient than repeatedly creating new string objects. --- ## Analogy: DNA Copying Think of strings like DNA, you **can’t edit** the original strand. If you want to change something, you **copy it**, make the change, and work with the new strand. --- ## Key Takeaways - Strings in JavaScript are **immutable**: you can't change them in place. - All modifications return **new strings**. - Be careful in **loops** and **recursion**, use arrays and `.join()` to optimize performance. - Immutability improves **safety**, **predictability**, and **engine optimizations**. - Understanding this behavior is crucial for writing **efficient, bug-free** string-heavy logic. --- # Slicing, Substrings, and Built-in String Methods in JavaScript JavaScript gives us several powerful built-in methods to **extract parts of a string**, also called **slicing**. While they might seem similar at first, each method behaves slightly differently, and understanding these differences can help you write cleaner and safer code. --- ## The 3 Main String Slicing Methods | Method | Signature | Description | |---------------|------------------------------|----------------------------------------| | `slice()` | `slice(start, end?)` | Extracts a section (supports negatives)| | `substring()` | `substring(start, end?)` | Similar to `slice`, but no negatives | | `substr()` | `substr(start, length)` | Extracts by length (deprecated) | --- ## `slice(start, end?)` ```js const str = "JavaScript"; str.slice(0, 4); // "Java" str.slice(4); // "Script" str.slice(-6); // "Script" ``` ### Key Features: - `start`: the starting index (inclusive) - `end`: the ending index (exclusive) - **Supports negative values** - Returns a **new string** ### Real-World Use Cases: - Extracting file extensions: ```js "resume.pdf".slice(-3); // "pdf" ``` - Trimming prefixes or suffixes: ```js "/api/users".slice(4); // "users" ``` --- ## `substring(start, end?)` ```js const str = "JavaScript"; str.substring(0, 4); // "Java" str.substring(4); // "Script" str.substring(4, 1); // "ava" (swaps args!) ``` ### Differences from `slice()`: - **Does NOT support negative values** - Automatically **swaps start and end** if start > end - Also returns a **new string** ### When to Use: - Generally avoid in favor of `slice()` unless you're working in legacy codebases or environments. --- ## `substr(start, length)` *(Deprecated)* ```js const str = "JavaScript"; str.substr(4, 6); // "Script" str.substr(-6, 6); // "Script" ``` ### Why You Should Avoid It: - Deprecated in modern JavaScript - Not recommended for new code - Prefer `slice()` or `substring()` instead --- ## Other Useful String Extraction Methods ### `split(separator, limit?)` Splits a string into an array. ```js "apple,banana,orange".split(","); // ["apple", "banana", "orange"] ``` **Use cases:** - Tokenizing CSV strings - Parsing URLs - Breaking full names into parts --- ### `includes(substring)` Checks if a string contains another string. ```js "developer".includes("dev"); // true ``` --- ### `indexOf(substring)` and `lastIndexOf(substring)` ```js "hello world".indexOf("o"); // 4 "hello world".lastIndexOf("o"); // 7 ``` --- ## Real-World Use Case Examples | Use Case | Example | |--------------------------------|------------------------------------------------------------| | Extract domain from URL | `"https://google.com".slice(8)` → `"google.com"` | | Remove file extension | `"report.pdf".slice(0, -4)` → `"report"` | | Get first name from full name | `"John Doe".split(" ")[0]` → `"John"` | | Limit bio to 100 characters | `bio.slice(0, 100) + "..."` | | Split tags from input string | `"react,vue,angular".split(",")` → `["react", "vue", "angular"]` | | Check if path starts with `/` | `path.startsWith("/")` | --- ## Time and Space Complexity of String Methods | Method | Time Complexity | Space Complexity | Notes | |----------------------|------------------|------------------|----------------------------------------| | `slice()` | O(k) | O(k) | Copies k-length substring | | `substring()` | O(k) | O(k) | Slightly less flexible than `slice()` | | `substr()` | O(k) | O(k) | Deprecated | | `split()` | O(n) | O(n) | Splits entire string | | `includes()` | O(n) | O(1) | Stops at first match | | `indexOf()` | O(n) | O(1) | Linear search | | `startsWith()` | O(k) | O(1) | Checks prefix only | | `endsWith()` | O(k) | O(1) | Checks suffix only | --- ## Pitfalls to Avoid - Assuming `substring()` handles negatives, it **does not**. - Forgetting that `slice()`'s second argument is **exclusive**. - Using `substr()` in production code, it's **deprecated**. - Thinking `.length` = number of visual characters (it’s code units). --- ## Summary - Use `slice()` for most string extraction, it's powerful and intuitive. - Avoid `substring()` unless you need to support very old browsers or environments. - Never use `substr()` in new code. - Combine slicing with `split()` and `indexOf()` for powerful string parsing. - Learn time/space costs so you're not doing unnecessary work in loops or large-scale transformations. --- # Character-Level Operations and String Transformations in JavaScript Working with strings often comes down to **manipulating characters one at a time**, whether you’re formatting user input, transforming case, or doing advanced parsing. JavaScript provides several **built-in methods** for character-level inspection, transformation, and repetition. Let’s break them all down with examples, real-world use cases, and performance considerations. --- ## Accessing Characters ### Bracket Notation (`str[i]`) ```js const name = "Alice"; console.log(name[0]); // "A" ``` - Easy and modern - Zero-based indexing - Does **not** throw errors for out-of-bounds, returns `undefined` ```js console.log(name[10]); // undefined ``` --- ### `charAt(index)` ```js name.charAt(1); // "l" ``` - Returns empty string (`""`) if index is out of bounds - Legacy-safe alternative to `str[i]` ```js "abc".charAt(100); // "" ``` --- ## Character Codes ### `charCodeAt(index)` Returns the **UTF-16 code unit** of the character at the given index: ```js "A".charCodeAt(0); // 65 "😊".charCodeAt(0); // 55357 (surrogate pair, not full code point) ``` ### Why It Matters: Useful for: - Alphabetical sorting - Character math (`'a' -> 97`, `'z' -> 122`) - Building algorithms (e.g., Caesar cipher, hash functions) --- ### `String.fromCharCode(code)` Does the reverse of `charCodeAt`: ```js String.fromCharCode(65); // "A" ``` --- ## Case Conversion ### `toUpperCase()` and `toLowerCase()` ```js "hello".toUpperCase(); // "HELLO" "HELLO".toLowerCase(); // "hello" ``` - Works across alphabets (Latin, Cyrillic, Greek, etc.) - Useful for: - Case-insensitive comparison - Standardizing search inputs - UI formatting ### Unicode Note: `toLocaleUpperCase()` and `toLocaleLowerCase()` allow **locale-sensitive transformations**: ```js "istanbul".toLocaleUpperCase("tr"); // "İSTANBUL" ``` --- ## String Repetition ### `repeat(n)` Repeats the string **n times**: ```js "ha".repeat(3); // "hahaha" ``` - `n` must be non-negative - Use cases: - Padding - Text generators - Visual spacing or mocking UIs --- ## Real-World Examples | Use Case | Code Example | |----------------------------------|-------------------------------------------------------| | Get first character of a name | `username[0]` or `username.charAt(0)` | | Compare initials case-insensitively | `a.toLowerCase() === b.toLowerCase()` | | Build character range | `String.fromCharCode(97 + i)` for a–z | | Repeating placeholders | `".".repeat(5)` → `"....."` | | Slugify input | `text.toLowerCase().replace(/\s+/g, "-")` | | Get char codes in a loop | `"abc".split("").map(c => c.charCodeAt(0))` | --- ## Unicode & Emoji Pitfalls Not all characters are a single unit. Some (like emoji or flags) are **surrogate pairs** and take **2 UTF-16 code units**. ```js const heart = "❤️"; console.log(heart.length); // 2 console.log(heart.charAt(0)); // "\u2764" ``` ### Correct way to handle full characters: Use spread or `Array.from()`: ```js [..."❤️"]; // ["❤️"] Array.from("👩‍💻"); // ["👩‍💻"] ``` --- ## Time and Space Complexity | Method | Time Complexity | Space Complexity | Notes | |--------------------------|------------------|------------------|--------------------------------------------| | `charAt(index)` | O(1) | O(1) | Constant-time character access | | `charCodeAt(index)` | O(1) | O(1) | Code unit only, not full Unicode code point| | `toUpperCase()` | O(n) | O(n) | Creates a new string | | `toLowerCase()` | O(n) | O(n) | Locale-aware versions may vary in perf | | `repeat(n)` | O(n * m) | O(n * m) | n = number of repetitions, m = str length | --- ## Performance Tip Avoid `toUpperCase()` or `repeat()` in hot loops over large strings. They create **entirely new strings** every time. Instead: - Cache results if reused - Minimize redundant transformations --- ## Analogy: Characters Are Lego Bricks Think of a string like a **row of LEGO blocks**. Each character is a block. You can’t snap a new piece in directly, you have to rebuild the row with new pieces. That's how string transformations work under the hood. --- ## Summary - Use `charAt()` or `str[i]` to safely access characters. - Convert to upper/lower case with `.toUpperCase()` and `.toLowerCase()`. - Use `repeat()` for controlled string duplication. - Understand Unicode pitfalls, emojis and some non-Latin characters may span multiple code units. - Character-level operations are foundational for writing robust parsers, validators, formatters, and interview solutions. --- # String Searching and Pattern Matching in JavaScript One of the most common tasks when working with strings is **searching for specific content**, whether you're checking for substrings, filtering user input, validating form fields, or processing logs. JavaScript provides a rich set of built-in methods for **string search and pattern matching**, ranging from simple substring checks to full-on regular expression support. --- ## `indexOf(substring)` Returns the **index of the first occurrence** of the substring. Returns `-1` if not found. ```js "developer".indexOf("e"); // 1 "developer".indexOf("z"); // -1 ``` You can also pass a second parameter to set the **starting index**: ```js "developer".indexOf("e", 2); // 5 ``` --- ## `lastIndexOf(substring)` Same as `indexOf`, but starts searching **from the end** of the string. ```js "developer".lastIndexOf("e"); // 7 ``` --- ## `includes(substring)` Returns `true` if the substring is found anywhere in the string. ```js "developer".includes("vel"); // true "developer".includes("VEL"); // false (case-sensitive) ``` > Tip: Use `.toLowerCase()` or `.toUpperCase()` for case-insensitive checks. ```js "developer".toLowerCase().includes("DEV".toLowerCase()); // true ``` --- ## `startsWith(prefix)` Checks whether a string **starts** with the given substring. ```js "url".startsWith("http"); // false "https://site.com".startsWith("https"); // true ``` You can pass a second argument to specify where to start: ```js "JavaScript".startsWith("Script", 4); // true ``` --- ## `endsWith(suffix)` Checks whether a string **ends** with the given substring. ```js "document.pdf".endsWith(".pdf"); // true "image.jpg".endsWith(".png"); // false ``` Also accepts a second argument to limit the end index: ```js "JavaScript".endsWith("Java", 4); // true ``` --- ## `search(regex)` Searches for a **regular expression pattern**, returns the **index of the match**, or `-1`. ```js "file123.txt".search(/\d+/); // 4 (first digit) "hello".search(/z/); // -1 ``` --- ## Real-World Use Cases | Use Case | Code Example | |-------------------------------------|--------------------------------------------------------| | Check if email contains `@` | `email.includes("@")` | | Ensure file is a `.pdf` | `filename.endsWith(".pdf")` | | Validate URL prefix | `url.startsWith("https://")` | | Find first digit in filename | `"image001.jpg".search(/\d/)` | | Filter logs containing "ERROR" | `line.includes("ERROR")` | | Case-insensitive name check | `name.toLowerCase().includes("john")` | | Detect user mentions (`@username`) | `"@jane hi!".includes("@")` | | Find extension from file name | `filename.slice(filename.lastIndexOf(".") + 1)` | --- ## Time and Space Complexity | Method | Time Complexity | Space Complexity | Notes | |--------------------|------------------|------------------|--------------------------------------------| | `indexOf()` | O(n) | O(1) | Stops at first match | | `lastIndexOf()` | O(n) | O(1) | Starts from the end | | `includes()` | O(n) | O(1) | Wrapper over `indexOf` | | `startsWith()` | O(k) | O(1) | k = length of the prefix | | `endsWith()` | O(k) | O(1) | k = length of the suffix | | `search(regex)` | O(n) - O(n²) | O(1) | Depends on pattern complexity | > Note: `search(regex)` can degrade to **O(n²)** with poorly constructed regular expressions (known as **catastrophic backtracking**). --- ## Common Pitfalls - `includes()`, `startsWith()`, and `endsWith()` are **case-sensitive** - `indexOf()` and `lastIndexOf()` only find the **first/last match**, no built-in way to get all matches without a loop or regex - `search()` only returns the index, use `match()` to extract content --- ## Best Practices - Use `.includes()` for simple presence checks - Use `.startsWith()` / `.endsWith()` for validation tasks (e.g. file extension, URL format) - Use `.toLowerCase()` or `.toUpperCase()` for case-insensitive comparisons - Use `.search()` or `.match()` when dealing with patterns or numbers --- ## Summary - JavaScript provides **powerful string search tools**, use the right one for the job. - Prefer `includes()` for readability and clarity. - Regex is powerful but overkill for simple substring checks. - Always be aware of **case-sensitivity** and **performance** for large strings or complex searches. --- # Regular Expressions (Regex) in JavaScript, The Ultimate Guide Regular Expressions (regex) are a compact and powerful way to **search**, **match**, and **manipulate** text using patterns. They're often seen as cryptic, but once you understand the syntax and tools, they become indispensable for working with strings. This section demystifies regex in JavaScript with syntax breakdowns, methods, real-world examples, common pitfalls, and a mini-cheatsheet. --- ## What Is Regex? A **regular expression** is a pattern used to match character combinations in strings. ```js const pattern = /hello/; const result = pattern.test("hello world"); // true ``` Regex can be used to: - Validate formats (emails, phone numbers, passwords) - Extract data (dates, mentions, hashtags) - Replace content (sanitize input, format numbers) - Search and filter logs, files, or text blobs --- ## Basic Syntax Breakdown | Symbol | Meaning | Example | |------------|--------------------------------------|------------------| | `.` | Any character except newline | `/h.t/` matches `hat`, `hit`, etc. | | `^` | Start of string | `/^Hi/` matches `"Hi there"` | | `$` | End of string | `/end$/` matches `"weekend"` | | `*` | 0 or more of the previous | `/lo*/` matches `l`, `lo`, `loo` | | `+` | 1 or more of the previous | `/lo+/` matches `lo`, `loo` | | `?` | 0 or 1 of the previous | `/lo?` matches `l` or `lo` | | `{n}` | Exactly n times | `/a{3}/` matches `aaa` | | `{n,}` | n or more times | `/a{2,}/` matches `aa`, `aaa`, ... | | `{n,m}` | Between n and m times | `/a{2,4}/` matches `aa`, `aaa`, `aaaa` | | `[]` | Character set | `/[aeiou]/` matches any vowel | | `[^]` | Negated character set | `/[^a-z]/` matches non-lowercase | | `|` | OR (alternation) | `/cat|dog/` matches either | | `()` | Grouping | `/(ab)+/` matches `ab`, `abab`,... | | `\` | Escape special characters | `/\./` matches a literal dot | --- ## JavaScript Regex Methods ### `test()` Returns `true` if the pattern matches the string. ```js /\d/.test("abc123"); // true ``` ### `match()` Returns the **first match** (or all matches with `g` flag) as an array. ```js "abc123".match(/\d+/); // ["123"] ``` ### `replace()` Replaces matches with new content. ```js "hello123".replace(/\d+/, "***"); // "hello***" ``` ### `search()` Returns the **index** of the match, or `-1`. ```js "file42.txt".search(/\d+/); // 4 ``` ### `matchAll()` Returns **all matches** as an iterator (requires `g` flag). ```js const matches = [..."a1b2c3".matchAll(/\d/g)]; // [{0: "1"}, {0: "2"}, {0: "3"}] ``` --- ## Regex Flags | Flag | Meaning | Example | |------|------------------------|--------------------------| | `g` | Global (all matches) | `/\d/g` finds all digits | | `i` | Ignore case | `/hello/i` matches "Hello" | | `m` | Multiline | Affects `^` and `$` | | `s` | Dot matches newline | `/./s` | | `u` | Unicode mode | Proper handling of emoji | | `y` | Sticky mode | Match must start at `.lastIndex` | --- ## Real-World Use Cases | Task | Pattern | Example Result | |------------------------------|----------------------------------|------------------------------------| | Check for numbers | `/\d/` | `true` for "abc123" | | Validate email | `/\S+@\S+\.\S+/` | Matches "user@example.com" | | Extract hashtags | `/#[a-z0-9_]+/gi` | `["#dev", "#JavaScript"]` | | Remove extra spaces | `/\s+/g` | Replaces multiple spaces with one | | Strip HTML tags | `/<\/?[^>]+>/g` | Removes `

`, `

`, etc. | | Match phone number format | `/$\d{3}$ \d{3}-\d{4}/` | Matches "(123) 456-7890" | | Match all vowels | `/[aeiou]/gi` | Extracts vowels | | Capture groups (date parts) | `/(\d{4})-(\d{2})-(\d{2})/` | Extracts year, month, day | --- ## Common Regex Patterns You Should Know ```js /\d/ // digit /\D/ // non-digit /\w/ // word character (letters, numbers, _) /\W/ // non-word character /\s/ // whitespace /\S/ // non-whitespace /./ // any character except newline /^abc/ // starts with "abc" /xyz$/ // ends with "xyz" /a{2,4}/ // matches "aa", "aaa", "aaaa" /\.[a-z]+$/ // matches ".com", ".js", etc. at end ``` --- ## Regex Pitfalls and Warnings - Regex is **case-sensitive** by default, use `i` flag when needed - Don’t forget to **escape special characters** like `.` or `*` - Be careful of **greedy matches** (`.*`), use `.*?` for non-greedy - Avoid complex nested quantifiers (`(a+)+`), can cause **catastrophic backtracking** - Use **non-capturing groups** if you don't need to capture: `(?:...)` --- ## Performance Considerations | Factor | Impact | |------------------------|----------------------------------------| | Global regex | Can be expensive on long strings | | Backtracking patterns | Can cause exponential runtime | | Reused regex patterns | Cache your compiled regex if reused | | Character classes | Faster than alternation (`[abc]` vs `a|b|c`) | > Always test complex regex with tools like [regex101.com](https://regex101.com) to debug and visualize. --- ## Summary - Regex is a **powerful but sharp tool**, master the basics before going wild. - Use built-in methods like `test`, `match`, `replace`, and `matchAll` for different tasks. - Learn the **common patterns** you'll reuse across projects (emails, digits, whitespace, tags). - Avoid "clever" one-liners if they're unreadable, regex should **solve**, not confuse. - Start with small patterns and build up, test often, and document what it does! --- # String Formatting and Cleanup in JavaScript String formatting is one of the most **common but underrated** tasks in JavaScript development. Whether you're dealing with messy user input, aligning console output, or preparing text for display, these built-in string methods will be your best friends. --- ## `trim()`, `trimStart()`, `trimEnd()` Removes whitespace from the string. ```js " hello ".trim(); // "hello" " hello ".trimStart(); // "hello " " hello ".trimEnd(); // " hello" ``` ### Use Cases - Clean user input (e.g. names, emails) - Prevent layout issues from extra spaces - Normalize form submissions ### Gotcha: Does **not remove internal spaces**: ```js " a b c ".trim(); // "a b c" ``` --- ## `padStart(length, padStr)` and `padEnd(length, padStr)` Adds characters to reach a minimum length. ```js "5".padStart(3, "0"); // "005" "abc".padEnd(6, "."); // "abc..." ``` ### Use Cases - Format numbers with leading zeros - Create progress bars - Align console or CLI output - Date/time formatting ```js const day = "7".padStart(2, "0"); // "07" const year = "2025".padEnd(6, " "); // "2025 " ``` --- ## `replace()` and `replaceAll()` Replaces parts of a string. By default, only replaces the **first match**. ```js "hello world".replace("l", "_"); // "he_lo world" "hello world".replaceAll("l", "_"); // "he__o wor_d" ``` ### Use Cases - Masking sensitive values - Sanitizing inputs - Dynamic templating (`{{placeholder}}`) - Refactoring strings ### With Regex: ```js "hello 123".replace(/\d+/, "***"); // "hello ***" ``` ### Gotcha: `replaceAll()` is **not supported** in older environments (pre-ES2021). Use regex with `/g` as fallback. ```js "apple".replace(/p/g, "b"); // "abble" ``` --- ## `toUpperCase()`, `toLowerCase()` Changes string casing. ```js "Hello".toLowerCase(); // "hello" "world".toUpperCase(); // "WORLD" ``` ### Use Cases - Case-insensitive comparisons - Standardizing keys (e.g. tag filters) - Display formatting --- ## `normalize()` Fixes invisible differences in **Unicode** characters (especially accents). ```js const str1 = "café"; const str2 = "cafe\u0301"; // "e" + accent str1 === str2; // false str1.normalize() === str2.normalize(); // true ``` ### Use Cases - Comparing internationalized text - Search filtering for names/places - Unicode-safe string processing --- ## `localeCompare()` Performs **locale-aware string comparison**, useful for sorting and internationalization. ```js "a".localeCompare("ä", "de"); // -1 (German rules) ``` ### Use Cases - Alphabetical sorting - Language-specific ordering - Building i18n-friendly UIs --- ## Real-World Formatting Use Cases | Use Case | Code Example | |----------------------------------|------------------------------------------------------| | Strip user input whitespace | `input.trim()` | | Format number with leading 0 | `"7".padStart(2, "0")` → `"07"` | | Clean up logs | `log.replace(/\s+/g, " ")` | | Mask part of a credit card | `card.replace(/\d{12}(\d{4})/, "************$1")` | | Normalize user-submitted names | `name.toLowerCase().trim().replace(/\s+/g, " ")` | | Fix unicode mismatch in search | `a.normalize() === b.normalize()` | | Sort country names correctly | `countries.sort((a, b) => a.localeCompare(b, 'en'))`| --- ## Time and Space Complexity | Method | Time | Space | Notes | |--------------------|------------|------------|----------------------------------------| | `trim()` | O(n) | O(n) | New string without whitespace | | `padStart()` | O(k) | O(k + n) | k = pad chars, n = original string | | `replace()` | O(n) | O(n) | Replaces first match only | | `replaceAll()` | O(n) | O(n) | All matches (or regex `/g`) | | `toUpperCase()` | O(n) | O(n) | May vary slightly by locale | | `normalize()` | O(n) | O(n) | Depends on Unicode complexity | | `localeCompare()` | O(1)–O(log n)| O(1)–O(n) | Locale-aware, slower for complex sorts | --- ## Pitfalls to Avoid - Forgetting that `replace()` only affects the **first match** - Using `padStart()` on non-string values (always convert first!) - Comparing Unicode strings without `normalize()` - Relying on `localeCompare()` in performance-critical paths --- ## Summary - Use `trim()` to clean input; `replace()`/`replaceAll()` to sanitize and format. - `padStart()`/`padEnd()` help align text or add leading characters. - Normalize Unicode when comparing accented or international strings. - `localeCompare()` makes your sorting **i18n-friendly**. - String formatting isn’t just visual, it prevents bugs and ensures consistency. --- # String Algorithm Techniques & Interview Patterns in JavaScript String problems are **staples in coding interviews** and are also extremely relevant in real-world applications, from autocomplete systems and search indexing to password validation and parsing tools. To solve complex string problems efficiently, you need to master some core **algorithmic techniques**. Let’s break them down and see how they apply to common use cases. --- ## Sliding Window Pattern Used to inspect **contiguous substrings** of a string without repeated scanning. ### When to Use: - Longest/shortest substring problems - Finding all substrings of length `k` - Substring anagrams, distinct characters, etc. ### Real Problem: **Longest Substring Without Repeating Characters** (Leetcode #3) ```js function lengthOfLongestSubstring(s) { let seen = new Set(); let left = 0; let maxLen = 0; for (let right = 0; right < s.length; right++) { while (seen.has(s[right])) { seen.delete(s[left]); left++; } seen.add(s[right]); maxLen = Math.max(maxLen, right - left + 1); } return maxLen; } ``` --- ## Two Pointer Technique Used for problems where you need to compare or move two ends of a string. ### When to Use: - Palindrome checks - Reverse a string in-place - Trim/partition strings - Binary-style compression problems ### Real Problem: **Valid Palindrome** (Leetcode #125) ```js function isPalindrome(s) { s = s.replace(/[^a-z0-9]/gi, "").toLowerCase(); let left = 0, right = s.length - 1; while (left < right) { if (s[left] !== s[right]) return false; left++; right--; } return true; } ``` --- ## Frequency Maps / Hashmaps Used to **count** characters or track occurrences in strings. ### When to Use: - Anagram detection - Pattern matching - Character balance problems - Permutations of strings ### Real Problem: **Check if Two Strings Are Anagrams** ```js function isAnagram(s, t) { if (s.length !== t.length) return false; const count = {}; for (let char of s) { count[char] = (count[char] || 0) + 1; } for (let char of t) { if (!count[char]) return false; count[char]--; } return true; } ``` --- ## Hashing Patterns Used in advanced problems like: - Rabin-Karp algorithm for substring search - Rolling hash for duplicate detection - Hash-based grouping (e.g. group anagrams) ### Real Problem: **Group Anagrams** (Leetcode #49) ```js function groupAnagrams(strs) { const map = {}; for (let word of strs) { const key = word.split("").sort().join(""); // Sorted letters as key if (!map[key]) map[key] = []; map[key].push(word); } return Object.values(map); } ``` --- ## Reversal Techniques Reverse part or whole string using helper functions or two pointers. ### Real Problem: **Reverse Words in a String** ```js function reverseWords(str) { return str.trim().split(/\s+/).reverse().join(" "); } ``` --- ## Pattern Matching With Sliding Window **Check if a permutation of string `s1` is in `s2`** (Leetcode #567) ```js function checkInclusion(s1, s2) { if (s1.length > s2.length) return false; const s1Count = {}; const windowCount = {}; for (let char of s1) { s1Count[char] = (s1Count[char] || 0) + 1; } let left = 0; for (let right = 0; right < s2.length; right++) { let char = s2[right]; windowCount[char] = (windowCount[char] || 0) + 1; if (right - left + 1 > s1.length) { let leftChar = s2[left]; windowCount[leftChar]--; if (windowCount[leftChar] === 0) delete windowCount[leftChar]; left++; } if (right - left + 1 === s1.length && isEqual(windowCount, s1Count)) { return true; } } return false; } function isEqual(map1, map2) { const keys1 = Object.keys(map1); const keys2 = Object.keys(map2); if (keys1.length !== keys2.length) return false; for (let key of keys1) { if (map1[key] !== map2[key]) return false; } return true; } ``` --- ## Time and Space Summary of Common Techniques | Technique | Time Complexity | Space Complexity | Use Cases | |------------------|------------------------|------------------------|---------------------------------------------| | Sliding Window | O(n) | O(k) | Longest substring, anagrams, min window | | Two Pointers | O(n) | O(1) | Palindromes, reversal, partitioning | | Frequency Map | O(n) | O(k) | Counting, grouping, matching | | Hashing | O(n log k) | O(n) | Grouping, duplicate detection, rolling hash | | Sorting + String | O(n log n) | O(n) | Anagram grouping, canonical form | --- ## Common Pitfalls to Avoid - Not updating sliding window properly (missing `left++`) - Comparing objects (`{}`) with `===`, use a helper function! - Off-by-one errors when using substring ranges - Not checking lengths early for anagrams/permutations - Modifying objects in-place across iterations --- ## Summary - These patterns are **core to solving real-world and interview string problems** efficiently. - **Sliding window** is your go-to for substring problems. - **Two pointers** work great for palindromes, partitions, and symmetric checks. - **Frequency maps** let you analyze character content quickly. - Mastering these patterns lets you go from brute force to **clean, performant code**. > Once you see the pattern, string problems become a puzzle, not a mystery. --- # Conclusion: The Hidden Power of Strings Strings may appear simple on the surface, just characters inside quotes. But under the hood, they're one of the **most powerful, flexible, and foundational data types** in JavaScript, and programming in general. --- ## Why Strings Deserve Deep Mastery - **They’re everywhere**: From user input and URLs to APIs and logs, strings are the bridge between your program and the real world. - **They test logic**: Interviewers love string problems because they test attention to detail, algorithmic thinking, and mastery of patterns like sliding windows and hashmaps. - **They’re full of edge cases**: Immutability, encoding quirks, and unexpected whitespace or emoji all make strings rich with learning potential. - **They’re language-agnostic**: Once you understand how to process and manipulate strings in JavaScript, that knowledge transfers directly to Python, Java, Go, Rust, etc. --- ## What You’ve Learned In this guide, you’ve explored: ✅ What strings are, how they're stored, and how they behave ✅ How to slice, split, join, and format them efficiently ✅ The quirks of Unicode, emojis, and grapheme clusters ✅ Built-in methods, performance tips, and hidden caveats ✅ Regex patterns and best practices for real-world tasks ✅ Interview-winning techniques: sliding window, two pointers, frequency maps --- ## Final Thoughts > “A string is not just a line of characters. It’s **a language**, and your fluency in it defines how well you can communicate with data.” String mastery leads to better **code quality**, **interview confidence**, and the ability to solve a wider range of problems with ease. So don’t stop here. Experiment. Break things. Slice, pad, trim, and transform. Get regex wrong, then get it right. And most of all, build your intuition. Because once you master strings, you’re not just a developer who knows how to code, you become one who knows how to **shape, parse, and communicate** with text, the raw material of software. --- ## Thank You for Reading If this guide helped you, share it with a friend, or save it as a personal reference. Keep practicing. Stay curious. And keep leveling up. **You've just unlocked the secret language of strings. Now go build something incredible.** ---

Strings 101: The Ultimate Beginners Guide