Template Literals & Tagged Templates
A template literal is a string written with backticks that can embed live expressions with {'$ '} , span multiple lines, and be processed by a tag function — replacing clumsy string concatenation entirely.
Learn Template Literals & Tagged Templates in our free JavaScript course — an interactive lesson with runnable examples, a practice exercise and a quick…
Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
Once you switch to backticks you rarely go back: interpolation and multiline strings make building messages, HTML, URLs, and SQL dramatically cleaner.
📚 Prerequisites: You should be comfortable with strings and basic functions. Template literals are an upgrade to the strings you already know.
📝 Real-World Analogy: A template literal is like a fill-in-the-blanks form letter :
Wrap your text in backticks. Drop any expression into {'$ '} and JavaScript evaluates it, converts the result to text, and inserts it. You can do math, call functions, or use a ternary right inside the slot. Because backticks also preserve line breaks, you no longer need \n or string concatenation with + .
Heads up: the dollar sign only triggers interpolation when followed by curly braces. A bare $5 in a template literal is just the literal text $5 .
Because the expression inside {'$ '} can be anything , it can be another template literal. This is exactly how front-end libraries render lists — map an array to template strings and join them. Nesting reads cleanly as long as you keep each layer short.
Remember: a nested template uses its own backticks. Editors highlight matching pairs, so let the colors guide you when nesting gets deep.
Put a function name right before a backtick string and you get a tagged template . The function receives the static text chunks as its first argument (an array) and each interpolated value as the remaining arguments. You decide how to stitch them back together — that is the hook tools use for safe HTML, syntax highlighting, and localization.
Built-in tag: String.raw returns the text with escape sequences left raw, so stays as two characters instead of becoming a newline — ideal for file paths and regex.
Use a template literal to combine name and age into one sentence.
Predict the output before revealing the answer.
2 + 2 = 4 — the expression inside {'$ '} is evaluated, the static text is not.
Price: $5 — a dollar sign only interpolates when followed by {' , so $5 is plain text.
Build a multiline invoice string from the data using one template literal. Compute the total inline.
Up next: Optional Chaining & Nullish Coalescing — safely reading deep data. 🔗
Practice quiz
What character wraps a template literal?
- Single quotes
- Double quotes
- Backticks
- Square brackets
Answer: Backticks. Template literals are written with backticks, which unlock interpolation, multiline text, and tagged templates.
What syntax embeds an expression inside a template literal?
- {expr}
- $(expr)
- ${expr}
- #{expr}
Answer: ${expr}. You interpolate with ${...}; JavaScript evaluates the expression and inserts the result as text.
What does produce?
- 2 + 2 = ${2 + 2}
- 2 + 2 = 4
- 4 = 4
- 2 + 2 = 22
Answer: 2 + 2 = 4. Only the expression inside ${...} is evaluated; the static text stays as written, giving "2 + 2 = 4".
What does the template literal produce?
- Price: 5
- Price: $5
- A syntax error
- Price: undefined
Answer: Price: $5. A dollar sign only triggers interpolation when followed by { }, so $5 is plain literal text.
Which can you NOT place inside ${ }?
- A variable
- A function call
- A ternary expression
- An if statement
Answer: An if statement. Only expressions are allowed; statements like if and for are not expressions.
How does a template literal handle line breaks?
- It requires
- It preserves real line breaks in the source
- It strips all whitespace
- It throws on multiline
Answer: It preserves real line breaks in the source. Backticks preserve line breaks, so multiline strings need no or + concatenation.
In a tagged template, what is the first argument the tag function receives?
- The interpolated values
- An array of the static string pieces
- A single joined string
- The number of slots
Answer: An array of the static string pieces. The tag gets the array of static string chunks first, then each interpolated value as the remaining arguments.
What does String.raw do?
- Uppercases the string
- Removes all whitespace
- Leaves backslash escape sequences untouched
- Escapes HTML
Answer: Leaves backslash escape sequences untouched. String.raw returns the text with escapes raw, so stays as two characters — ideal for paths and regex.
Can the expression inside ${ } be another template literal?
- No, that is a syntax error
- Yes, nested templates use their own backticks
- Only one level deep
- Only inside tagged templates
Answer: Yes, nested templates use their own backticks. Because the slot holds any expression, it can be another template literal with its own backticks.
What does give if name is the string "Ada"?
- Hi ${name}
- Hi name
- Hi Ada
- HiAda
Answer: Hi Ada. The variable name is interpolated into the string, producing "Hi Ada".