Template Literals
Introduction
Template literals are ES6 string literals written with backtick delimiters instead of quotes. Their key features are interpolation, expression embedding, natural multiline strings, and the advanced tagged-template form.
The syntax is commonly shown as `Hello ${name}`: the placeholder ${...} evaluates an expression and inserts the result into the string. This topic explains the syntax in prose, while the runnable examples demonstrate equivalent results without placing template-literal syntax inside code blocks.
Why This Matters
Interviewers expect you to know that template literals are not merely prettier string concatenation. They preserve line breaks, evaluate arbitrary expressions in placeholders, and enable tagged templates used by libraries for SQL builders, CSS-in-JS, GraphQL queries, and safe escaping.
Theory
Interpolation
A template literal uses backtick delimiters and placeholders. In Markdown form, the pattern is `Hello ${name}`. The expression inside ${...} is evaluated, converted to a string, and inserted.
Expression embedding
The placeholder can contain any expression, not just a variable: `Total: ${price * quantity}` or `Role: ${user.isAdmin ? 'admin' : 'user'}`. Keep expressions readable; if the logic grows, compute a named variable first.
Multiline strings
A template literal can span multiple lines directly, and the line breaks become part of the string. This is cleaner than manually inserting \n in quoted strings, but indentation becomes part of the result too.
Tagged templates
A tag is a function placed before a template literal, conceptually like tag followed by a template. The function receives an array of static string parts and then each interpolated value as separate arguments. Libraries use this to validate, escape, transform, or cache structured strings.
Interview caveats
Template literals do not automatically sanitize HTML or SQL. Interpolation converts values to strings; it does not make output safe. Tagged templates can implement escaping, but safety depends on the tag function.
Visual Diagrams
source text
static text parts
expression values
|
v
evaluate expressions left to right
|
v
convert values to strings
|
v
produce one final stringThe syntax is special, but the result is still a normal JavaScript string.
Code Examples
Equivalent result with concatenation
In normal code you would usually use a template literal here. This example intentionally uses single-quoted strings and concatenation while demonstrating the same final output.
Tagged-template concept without template syntax
A tag function conceptually receives static string pieces separately from dynamic values. This read-only example calls such a function directly to show the data shape.
Playground
Press Run to execute the code and see output here.
Output Prediction
Predict the output #1
1const name = 'Ada';2const value = 2 + 3;3const message = name + ' has ' + value + ' badges';4 5console.log(message);6console.log(message.includes('5'));Predict the output #2
1const lines = ['A', 'B', 'C'].join('\n');2 3console.log(lines.split('\n').length);4console.log(lines);Coding Exercises
Format an invoice line
EasyImplement formatLine(item) so it returns text in the form Widget x 3 = 30. Use ordinary string operations in the solution here; in production this is a natural place for template literals.
Interview Questions
1What are the main advantages of template literals?
They support interpolation with ${...}, multiline strings without manual newline escapes, and tagged templates. They also improve readability for strings that mix static text with computed values.
2What is a tagged template?
A tagged template calls a function with the literal string segments and the interpolated values separated. The tag can transform, validate, escape, or cache the result. This is used by SQL, CSS-in-JS, GraphQL, and i18n libraries.
Follow-ups
- Do template literals automatically prevent XSS?
- How are multiline template literals different from quoted strings with `\n`?
Quiz
1. Which capability is unique to template literals compared with ordinary quoted strings?
2. What does a tagged template receive first?
Summary
- Template literals use backtick delimiters and `${...}` placeholders for interpolation.
- Placeholders can contain expressions, not only variable names.
- Multiline template literals preserve line breaks and indentation.
- Tagged templates pass static parts and dynamic values to a function for custom processing.
Cheat Sheet
Interpolation: `Hello ${name}`.
Expression: `Total: ${price * quantity}`.
Multiline: line breaks inside the literal become part of the string.
Tagged template: conceptually tag before a template; the tag receives string parts plus values.
Security: interpolation does not sanitize output automatically.