JavaScript String Methods

What You’ll Learn

Strings hold almost every piece of text in JavaScript — names, messages, URLs, and JSON. This hub links to 51 live tutorials today and catalogs 52 String methods for search, slice, trim, replace, padding, and validation.

Introduction

A JavaScript string is an ordered sequence of characters used for names, messages, file paths, and API payloads. You create them with quotes, template literals, or String() — then call methods to search, slice, and format text without writing character-by-character loops.

What Are String Methods?

String methods live on String.prototype and are available on every string primitive through auto-boxing. Groups include search & test (includes, startsWith, indexOf), extract & split (slice, split), transform (trim, toUpperCase, padStart), and replace (replace, replaceAll). Every method returns a new string — originals never change.

Primitives vs String Objects

• Primitive — const name = "Alex"; — the normal, recommended form.
• Object wrapper — new String("Alex") — rare; typeof returns "object".
• Auto-boxing — JavaScript temporarily wraps primitives when you call name.trim().

Template Literals vs Concatenation

• Template literals — `Hello, ${name}!` — interpolation and multiline text.
• Plus operator — "Hello, " + name + "!" — fine for short joins.
• concat() — "Hello, ".concat(name, "!") — explicit but less common today.

📝 Syntax

Common string patterns — note each call returns a new value:

const text = "  Hello, World!  ";

const clean = text.trim().toLowerCase();
const slug = clean.replace(/\s+/g, "-");
const preview = slug.slice(0, 10);

const greeting = `Welcome, ${name}!`;  // template literal

Method groups

When to Use Which Methods

• User input cleanup — trim() before validation; combine with toLowerCase() for email-style checks.
• Prefix / suffix guards — startsWith() and endsWith() for URLs, file extensions, and command parsing.
• Tokenizing CSV or paths — split() then array.join() to rebuild.
• Display formatting — padStart() for zero-padded IDs; template literals for sentences.
• Non-destructive edits — chain slice(), replace(), and case methods — assign the final result.
• Regex-heavy work — pair match(), search(), and replace() with the RegExp hub.

Examples Gallery

Open DevTools Console (F12) and paste each snippet. Remember: every method returns a new string.

const raw = "  hello world  ";

const result = raw
  .trim()
  .toUpperCase()
  .replace("WORLD", "JavaScript")
  .slice(0, 11);

console.log(result);       // "HELLO JAVAS"
console.log(raw);          // still "  hello world  "

result: "HELLO JAVAS"
raw:    "  hello world  "  (unchanged)

function isSafePath(path) {
  if (path.includes("..")) return false;
  if (!path.startsWith("/app/")) return false;
  return true;
}

console.log(isSafePath("/app/home"));     // true
console.log(isSafePath("/app/../etc"));   // false

true
false

const csv = "apple,banana,cherry";

const items = csv.split(",");
items.push("date");

const updated = items.join(" | ");
console.log(updated);  // "apple | banana | cherry | date"

apple | banana | cherry | date

const username = "  codetofun  ";

const cleaned = username.trim();
console.log(cleaned.length);           // 9
console.log(cleaned === "codetofun");  // true

9
true

const orderId = 42;

const formatted = String(orderId).padStart(5, "0");
console.log(formatted);           // "00042"
console.log(`INV-${formatted}`);  // "INV-00042"

00042
INV-00042

💬 Usage Tips

• Assign results — text = text.trim(); calling trim() alone does nothing unless you store the return value.
• Prefer slice over substr — substr() is legacy; slice() supports negative indexes from the end.
• Case-insensitive checks — normalize with toLowerCase() before includes() when comparing user input.
• Emoji-aware length — length counts UTF-16 code units; use [...str].length or codePointAt() when grapheme count matters.
• Search this index — jump to any of 51 live tutorials or scan the 52-method catalog above.

⚠️ Common Pitfalls

• Expecting mutation — str.toUpperCase() without assignment leaves str unchanged.
• String object confusion — new String("a") === new String("a") is false (different objects).
• Emoji length — "😀".length === 2 surprises beginners; plan for surrogate pairs in UI limits.
• replace vs replaceAll — replace() swaps only the first match unless you pass a global regex.
• Sort as strings — "10" < "2" lexically; parse numbers before comparing when needed.

💡 Best Practices