Lesson 36 min read

Strings & Template Literals

Master the art of working with text — from simple quotes to powerful templates

Strings — Text in JavaScript

A string is just a sequence of characters stored like a static array — letters, numbers, spaces, emojis, anything you can type. You can create strings using single quotes, double quotes, or backticks. Single and double quotes work the same way, but backticks unlock superpowers.

Think of strings like a necklace of beads. Each bead is a character, and you can count them, rearrange them, slice off a section, or check if a particular bead is in the necklace.

Strings are immutable in JavaScript — you can't change individual characters. Instead, string methods always return a new string.

Creating Strings & Basic Properties

let single = 'Hello';
let double = "World";
let backtick = `Hello World`;

// .length tells you how many characters
console.log("JavaScript".length); // 10

// Access individual characters by index (starts at 0)
let word = "Pixel";
console.log(word[0]);  // "P"
console.log(word[4]);  // "l"
console.log(word[-1]); // undefined (use .at(-1) instead!)
console.log(word.at(-1)); // "l" — .at() supports negative indexes!

Output

10
P
l
undefined
l

Template Literals — Strings with Superpowers

Template literals use backticks (`) instead of quotes, and they let you do two amazing things:

String interpolation with ${expression} — embed any JavaScript expression right inside your string. No more clunky concatenation!
Multi-line strings — just press Enter inside backticks, and the line break shows up in the output. No need for \n.

Once you start using template literals, you'll never want to go back to + for building strings.

Template Literals in Action

let name = "Kai";
let level = 7;

// Old way (concatenation)
console.log("Player " + name + " is level " + level + "!");

// New way (template literal) — so much cleaner!
console.log(`Player ${name} is level ${level}!`);

// You can put ANY expression inside ${}
console.log(`Next level: ${level + 1}`);
console.log(`Is high level? ${level > 5 ? "Yes!" : "Not yet"}`);

// Multi-line strings
let poem = `Roses are red,
Violets are blue,
JavaScript is weird,
And so are you.`;
console.log(poem);

Output

Player Kai is level 7!
Player Kai is level 7!
Next level: 8
Is high level? Yes!
Roses are red,
Violets are blue,
JavaScript is weird,
And so are you.

Essential String Methods

Strings come loaded with useful methods. Remember, these never change the original string — they always return a new one.

.toUpperCase() / .toLowerCase() — change case
.trim() — remove whitespace from both ends (great for user input!)
.includes(text) — check if a substring exists (returns true/false)
.indexOf(text) — find the position of a substring (-1 if not found)
.slice(start, end) — extract a portion of the string
.split(separator) — chop a string into an array of pieces
.replace(old, new) — swap the first occurrence; use .replaceAll() for all
.startsWith(text) / .endsWith(text) — check the beginning or end

String Methods Playground

let message = "  Hello, JavaScript World!  ";

console.log(message.trim());                  // "Hello, JavaScript World!"
console.log(message.trim().toUpperCase());    // "HELLO, JAVASCRIPT WORLD!"
console.log(message.includes("JavaScript")); // true
console.log(message.indexOf("JavaScript"));  // 9

// .slice(start, end) — end is exclusive
let greeting = "Good Morning";
console.log(greeting.slice(0, 4));   // "Good"
console.log(greeting.slice(5));      // "Morning"
console.log(greeting.slice(-7));     // "Morning" (negative = from end)

// .split() — turn a string into an array
let csv = "apple,banana,cherry";
let fruits = csv.split(",");
console.log(fruits);          // ["apple", "banana", "cherry"]
console.log(fruits.length);   // 3

// .replace() and .replaceAll()
let phrase = "I love cats, cats are great";
console.log(phrase.replace("cats", "dogs"));      // "I love dogs, cats are great"
console.log(phrase.replaceAll("cats", "dogs"));   // "I love dogs, dogs are great"

Output

Hello, JavaScript World!
HELLO, JAVASCRIPT WORLD!
true
9
Good
Morning
Morning
["apple", "banana", "cherry"]
3
I love dogs, cats are great
I love dogs, dogs are great

Note: Pro tip: .trim() is your best friend when handling user input from forms. Users love adding accidental spaces. Always trim before comparing or saving: if (input.trim() === '') { /* empty! */ }

Quick check

What does `Hello ${1 + 2}` evaluate to?

Static ArraysData Structure

A row of numbered boxes — fast to grab, fixed in size

→

Trie (Prefix Tree)Data Structure

Insert, search, autocomplete

→

← Operators & Expressions Conditionals →