Template Literals and Strings
Backtick strings let you drop expressions right into the text and write real multiline strings.
Loading visual…
Definition
A template literal is a string written between backticks (`` ` ``) instead of quotes. Inside it, `${expression}` interpolates the result of any JavaScript expression directly into the string, so `` `Hi, ${name}!` `` builds a string without manual concatenation. Template literals also allow real line breaks typed directly into the source, so multiline text no longer needs `\n` escapes glued together with `+`. A tagged template goes one step further: writing a function name right before the backticks (like `` tag`Hi, ${name}` ``) calls that function with the literal's text pieces and its interpolated values kept separate, which is how libraries build things like safely-escaped HTML or styled-components CSS. Strings themselves are immutable: every string method returns a new string rather than changing the original. Common ones include `slice`/`substring` for extracting a piece, `split` for turning a string into an array on a separator, `includes`/`startsWith`/`endsWith` for checks, `trim` for removing surrounding whitespace, `replace`/`replaceAll` for substitution, and `padStart`/`padEnd` for fixed-width formatting. Template literals and these methods are typically used together: build the shape with a template literal, then clean up or inspect the pieces with string methods.
Examples
const name = "Ada";
const role = "engineer";
const msg = `Hello, ${name}! You are an ${role}.`;
// "Hello, Ada! You are an engineer."Each ${} placeholder is replaced with the result of evaluating the expression inside it, then everything is joined into one string.
const block = `Line one
Line two`;
// contains a real newline between the two linesA literal line break typed inside the backticks becomes part of the string, with no \n escape needed.
" Hello World ".trim().toLowerCase().split(" ");
// ["hello", "world"]trim removes the surrounding spaces, toLowerCase normalizes case, and split turns the cleaned string into an array of words; none of these methods change the original string.
Common mistakes
- Writing ${name} inside regular quotes instead of backticks; without backticks it is just literal text, not interpolation.
- Assuming a string method like slice or replace mutates the original string; it always returns a new string instead.
- Forgetting that a tagged template's function receives the literal text pieces and the interpolated values as separate arguments, not one combined string.
Key takeaways
- Backticks enable ${expression} interpolation and let real newlines appear directly in the string.
- String methods never mutate; slice, split, replace, and friends all return a new string or array.
- A tagged template calls a function with the literal's text pieces and its interpolated values kept separate.
const x = 2; const y = "${x + 1}"; // note: plain quotes, not backticks What is y?
Where you see this
- Building dynamic user-facing messages, like "3 items in your cart", without messy string concatenation.
- Formatting log lines or error messages that embed variable values inline.
- Normalizing and validating user input with trim, toLowerCase, and includes before comparing or storing it.
- Generating small HTML or SQL fragments from a template, or building one with a tagged template for safe escaping.