Strings & Template Literals

What you'll learn

Text appears everywhere: names, messages, URLs, form input, and API data. JavaScript strings provide a focused toolkit for inspecting and transforming it.

Creating strings and immutability

Single quotes, double quotes, and backticks create strings. Pick a consistent quote style; use backticks when you need interpolation or multiline text.

const single = 'Hello';
const double = "JavaScript";
const escaped = "She said, \"Hello!\"";
const multiline = `First line
Second line`;

console.log(single + " " + double);
console.log(escaped);

Strings are immutable: methods return new strings. They never edit the original value.

Indexing, length, and Unicode

const word = "JavaScript";

console.log(word.length);
console.log(word[0]);
console.log(word.at(-1));

Indexes begin at zero. at(-1) reads from the end. JavaScript's historical length counts UTF-16 code units, so some emoji count as two.

const emoji = "🚀";
console.log(emoji.length);
console.log([...emoji].length);

Essential string methods

Searching and extracting

const title = "Learn modern JavaScript";

console.log(title.includes("modern"));
console.log(title.startsWith("Learn"));
console.log(title.indexOf("Java"));
console.log(title.slice(6, 12));
console.log(title.slice(-10));

Template literals and interpolation

Backticks allow expressions inside $${ ... }. JavaScript evaluates each expression and inserts its result.

const learner = "Nour";
const completed = 4;
const total = 8;

const message = `${learner} completed ${completed}/${total} lessons (${completed / total * 100}%).`;
console.log(message);

A practical normalization pipeline

Real input is messy. Chain small transformations so each step is visible:

const rawTag = "  JavaScript Basics  ";

const slug = rawTag
  .trim()
  .toLowerCase()
  .replaceAll(" ", "-");

console.log(slug);

Method chaining works because each method returns the next string value. Break long chains onto separate lines for readability.

Recap & quick check