The string methods
you reach for, and
the traps in each.

02 · Look inside

🔍 Length and character access

03 · Find things

🔎 Search: includes, indexOf, startsWith, match

04 · Cut it up

✂️ slice vs substring, split and join

Three methods take a part of a string. Use slice; know why the others surprise people.

🪓 split and join

const line = "token=abc=def";
const i = line.indexOf("=");
const key = line.slice(0, i);          // "token"
const value = line.slice(i + 1);       // "abc=def"

05 · Swap text

🔁 replace, replaceAll and regex

The single most common JavaScript string bug: replace with a string pattern replaces only the first match.

💲 Special patterns in the replacement string

const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

const term = "1+1";
const re = new RegExp(escapeRegExp(term), "gi");
"1+1=2, 1+1 again".replace(re, "two");   // "two=2, two again"

💡 Doing a one-off bulk replacement on a document? Find & Replace supports both plain text and regex, and shows the result before you copy it.

06 · Shape it

🛠️ Trim, pad, repeat, case and normalize

🔠 Comparing and sorting: localeCompare

The < and > operators compare UTF-16 code units, so "Z" < "a" is true and "é" sorts after "z". For anything a person reads, use localeCompare or Intl.Collator:

["b", "A", "a", "B"].sort()                           // ["A", "B", "a", "b"]
["b", "A", "a", "B"].sort((x, y) => x.localeCompare(y))  // ["a", "A", "b", "B"] (en)

// natural sort: item2 before item10
const natural = new Intl.Collator(undefined, { numeric: true });
["item10", "item2"].sort(natural.compare)                // ["item2", "item10"]

// case- and accent-insensitive equality
"resume".localeCompare("Résumé", undefined, { sensitivity: "base" }) === 0   // true

💡 When sorting large arrays, create one Intl.Collator and reuse its compare — it's faster than calling localeCompare with options on every comparison.

07 · Build strings

🧾 Template literals and String.raw

Backtick strings allow embedded expressions and real line breaks. They're the default way to build strings in modern JavaScript.

const orderId = "ORD-2026-000873";
const total = 1234.5;

`Order ${orderId} is ready.`
// "Order ORD-2026-000873 is ready."

`Total: ${total.toFixed(2)}`                   // "Total: 1234.50"
`Total: ${total.toLocaleString("en-US", { style: "currency", currency: "USD" })}`
// "Total: $1,234.50"

// multi-line — the line breaks and indentation are part of the string
const sql = `SELECT id, name
FROM customers
WHERE id = ?`;

// String.raw: backslashes stay literal
String.raw`C:\temp\new`                        // "C:\temp\new" (no tab, no newline)
String.raw`\d+`.length                           // 3

🏷️ Tagged templates

A function placed before a template literal receives the literal parts and the values separately. That's how libraries build safe SQL, escaped HTML or styled components — the tag decides how each value is inserted:

const escapeHtml = s => String(s)
  .replaceAll("&", "&amp;").replaceAll("<", "&lt;")
  .replaceAll(">", "&gt;").replaceAll('"', "&quot;");

function html(strings, ...values) {
  return strings.reduce((out, str, i) =>
    out + str + (i < values.length ? escapeHtml(values[i]) : ""), "");
}

const name = "<script>";
html`<p>Hello ${name}</p>`;   // "<p>Hello &lt;script&gt;</p>"

08 · Read before you ship

🪤 Gotchas that cause real bugs

1. 🔁 replace changes only the first match

   With a string pattern, or a regex without g, only the first occurrence is replaced. Use replaceAll or add the g flag. Code reviews miss this constantly because it passes a test with one occurrence.

2. 😀 length, indexes and emoji

   All index-based methods — length, slice, charAt, split("") — work on UTF-16 units. Truncating with s.slice(0, 10) can cut an emoji in half and leave a lone surrogate. Iterate with for...of or [...s] for code points, and Intl.Segmenter for visible characters. s.isWellFormed() (ES2024) tells you if a lone surrogate slipped through.

3. 🧊 Immutability — even with index assignment

   s[0] = "X" does nothing: it's silently ignored in sloppy mode and throws a TypeError in strict mode (including ES modules and classes). Build a new string: s = "X" + s.slice(1).

4. ✂️ substring swaps and clamps

   Negative arguments become 0 and reversed arguments are swapped, so bad index maths returns a plausible-looking wrong string instead of failing. slice is more predictable.

5. 🪓 split with a limit drops data

   "a,b,c".split(",", 2) returns ["a", "b"] — "c" is gone. Unlike C#'s Split(',', 2), the remainder is not kept. Use indexOf + slice to split once.

6. 📦 new String() is an object

   typeof new String("a") is "object", and new String("a") === "a" is false. Use String(value) (no new) to convert — it also handles null and undefined, where value.toString() throws.

7. 🔤 Unicode-lookalike strings

   "caf\u00E9" === "cafe\u0301" is false even though both display as café. Call .normalize() on user input before comparing, storing or deduplicating it.