JavaScript String Methods Practice

Both extract substrings, but they handle edge cases differently:

const str = "JavaScript";

// Basic usage (identical)
str.slice(0, 4)      // "Java"
str.substring(0, 4)  // "Java"

// Negative indices (different!)
str.slice(-6)        // "Script" (counts from end)
str.substring(-6)    // "JavaScript" (negatives → 0)

// Reversed arguments
str.slice(4, 0)      // "" (empty, no swapping)
str.substring(4, 0)  // "Java" (swaps to 0, 4)

Rule of thumb: Use slice(). It's more predictable and matches array behavior. For a printable reference of all string methods, see the JavaScript string methods cheat sheet.

// You expect all underscores replaced...
"a_b_c".replace("_", "-")    // "a-b_c" (only first!)

// replaceAll fixes this
"a_b_c".replaceAll("_", "-") // "a-b-c"

The regex /g requirement

When using regex with replaceAll(), you MUST include the global flag:

"a1a2".replaceAll(/a/, "b")   // TypeError!
"a1a2".replaceAll(/a/g, "b")  // "b1b2"

This is intentional. It prevents the confusing case where replaceAll with a regex would only replace the first match.

When to use which

• String pattern, replace all: replaceAll("old", "new")
• String pattern, replace first: replace("old", "new")
• Regex pattern, replace all: replace(/pattern/g, "new") or replaceAll(/pattern/g, "new")
• Regex pattern, replace first: replace(/pattern/, "new")

Template literals (backticks) support three features:

1. Interpolation

const name = "Alice";
const greeting = `Hello, ${name}!`; // "Hello, Alice!"

// Expressions work too
`Total: $${(price * 1.1).toFixed(2)}`

2. Multi-line strings

const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

3. Tagged templates

A tag function receives the template parts separately:

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const value = values[i] !== undefined ? `<mark>${values[i]}</mark>` : "";
    return acc + str + value;
  }, "");
}

const name = "Alice";
highlight`Hello, ${name}!`
// "Hello, <mark>Alice</mark>!"

Critical misconception: Tagged templates don't automatically sanitize or escape anything. The tag function must implement that logic. A call like html\

JavaScript strings are sequences of UTF-16 code units, not Unicode characters:

"hello".length  // 5, as expected
"👍".length      // 2, not 1!
"👍🏽".length    // 4 (emoji + skin tone modifier)
"café".length   // 4 or 5 depending on encoding

Why this happens

UTF-16 represents characters outside the Basic Multilingual Plane (BMP) as "surrogate pairs": two 16-bit code units. Many emoji fall outside the BMP.

Counting actual characters (graphemes)

Use Intl.Segmenter for accurate character counts:

function graphemeLength(str) {
  const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
  return [...segmenter.segment(str)].length;
}

graphemeLength("hello")  // 5
graphemeLength("👍")      // 1
graphemeLength("👍🏽")    // 1 (emoji + modifier = 1 grapheme)

When this matters

• Character limits in UI (Twitter, form fields)
• Text truncation with ellipsis
• Cursor positioning in text editors

Comparing strings with accents

// Wrong: byte comparison
["ä", "z", "a"].sort() // ["a", "z", "ä"] (ä after z!)

// Right: locale-aware
["ä", "z", "a"].sort((a, b) => a.localeCompare(b, "de"))
// ["a", "ä", "z"] (German order)

For repeated comparisons, use Intl.Collator

const collator = new Intl.Collator("de");
const sorted = names.sort(collator.compare); // Much faster for large arrays

normalize() for string equality

The same character can have multiple Unicode representations:

const a = "café";        // 'é' as single codepoint (U+00E9)
const b = "cafe\u0301";  // 'e' + combining acute accent

a === b           // false!
a.normalize() === b.normalize()  // true

Always normalize() user input before comparing or storing if accented characters are possible. If you're coming from Python, the Python vs JavaScript variables comparison covers how string handling differs between the two languages.

slugify (URL-safe string)

function slugify(str) {
  return str
    .toLowerCase()
    .normalize("NFD")                   // Decompose accents
    .replace(/[\u0300-\u036f]/g, "")   // Remove accent marks
    .replace(/[^a-z0-9]+/g, "-")        // Non-alphanumeric → dash
    .replace(/^-|-$/g, "");             // Trim leading/trailing dashes
}

slugify("Héllo Wörld!")  // "hello-world"

camelCase to kebab-case

These recipes rely on regex patterns. For a copy-paste reference of common regex syntax, see the JavaScript regex cheat sheet.

function toKebab(str) {
  return str
    .replace(/([a-z])([A-Z])/g, "$1-$2")  // Insert dash between lower-upper
    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")  // Handle acronyms
    .toLowerCase();
}

toKebab("helloWorld")    // "hello-world"
toKebab("XMLHttpRequest") // "xml-http-request"

Safe HTML escaping

function escapeHtml(str) {
  const entities = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#39;"
  };
  return str.replace(/[&<>"']/g, c => entities[c]);
}

Truncate with ellipsis (grapheme-safe)

function truncate(str, maxLength) {
  const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
  const graphemes = [...segmenter.segment(str)];
  if (graphemes.length <= maxLength) return str;
  return graphemes.slice(0, maxLength - 1).map(g => g.segment).join("") + "…";
}

truncate("Hello 👍🏽!", 8)  // "Hello 👍🏽!" (fits)
truncate("Hello 👍🏽!", 7)  // "Hello …" (truncated correctly)

• MDN: String
• MDN: slice()
• MDN: substring()
• MDN: replace()
• MDN: replaceAll()
• MDN: Template literals
• MDN: Intl.Segmenter
• MDN: String.prototype.normalize()
• MDN: localeCompare()