Template literals replaced string concatenation with readable interpolation and native multi-line strings. Professional codebases also use their less-known feature — tagged templates — for things like safe HTML escaping and CSS-in-JS.
1Template Literals | JavaScript Tutorial - In-Depth Guide Part 1
Template literals use backticks instead of quotes, letting you embed expressions directly inside a string with '${ }'.
const name = 'Ana';
const greeting = `Hello, ${name}!`;Interpolation
2Template Literals | JavaScript Tutorial - In-Depth Guide Part 2
Template literals preserve line breaks natively, making multi-line strings trivial without '\n' concatenation.
const msg = `Line one
Line two`;Multi-line Strings
3Template Literals | JavaScript Tutorial - In-Depth Guide Part 3
Any valid JavaScript expression can go inside '${ }' — arithmetic, function calls, ternaries, even other template literals.
const price = 19.999;
`Total: $${(price * 1.1).toFixed(2)}`;Any Expression
4Template Literals | JavaScript Tutorial - In-Depth Guide Part 4
Tagged templates let a function intercept the literal's pieces before they're joined, enabling custom processing like escaping or styling.
function safeHtml(strings, ...values) {
return strings.reduce((out, str, i) =>
out + str + (values[i] ?? ''), '');
}
safeHtml`Hi ${name}`;Tagged Templates
5Template Literals | JavaScript Tutorial - In-Depth Guide Part 5
Template literals are the backbone of styled-components and other CSS-in-JS libraries, which use tagged templates to parse embedded CSS.
const Button = styled.button`
color: ${props => props.theme.primary};
`;CSS-in-JS
6Step-by-Step Breakdown
Template literals use backticks instead of quotes, letting you embed expressions directly inside a string with '${ }'.
Template literals preserve line breaks natively, making multi-line strings trivial without '\n' concatenation.
Checkpoint: Do line breaks typed inside a template literal automatically become part of the resulting string?
- →Yes, backticks preserve literal newlines
- →No, you must still insert \n manually
Any valid JavaScript expression can go inside '${ }' — arithmetic, function calls, ternaries, even other template literals.
Tagged templates let a function intercept the literal's pieces before they're joined, enabling custom processing like escaping or styling.
Checkpoint: In a tagged template like ` tagHi ${name} `, what does the tag function receive?
- →The literal string pieces and the interpolated values, separately
- →A single already-joined string
Template literals are the backbone of styled-components and other CSS-in-JS libraries, which use tagged templates to parse embedded CSS.
Next, we'll explore 'Optional Chaining'.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Template Literals Make Dynamic ARIA Labels Easier to Get Right
Building a dynamic `aria-label` like `` `${count} unread messages` `` with a template literal is clearer and less error-prone than concatenation, reducing the chance of a malformed label reaching screen reader users.
SEO Implications
- 1
Server-Rendered Templates Benefit from Readable Interpolation
Cleaner template-literal-based HTML generation on the server reduces the odds of malformed markup slipping into server-rendered pages, which can otherwise confuse search engine crawlers parsing the DOM.
Best Practices
Prefer Template Literals Over String Concatenation
Interpolation is more readable than chains of `+`, especially once more than two or three values are being combined, and it avoids accidental type coercion bugs from `+`.
Use Tagged Templates for Anything That Needs Escaping
A tag function is the correct place to centralize HTML/SQL escaping logic, since it sees every interpolated value individually before it is joined into the final string, unlike plain interpolation.
Frequent Bugs
Interpolating unsanitized user input directly into an HTML template literal that is then inserted with innerHTML, opening an XSS vector.
Escape interpolated values before insertion — either manually or with a tag function that HTML-escapes every value automatically — or avoid innerHTML in favor of textContent for untrusted data.
Forgetting that `${}` requires a valid expression, so statements like `${if (x) {...}}` throw a SyntaxError inside the template.
Convert the logic to an expression first, e.g. a ternary (`${x ? "a" : "b"}`) or a helper function call, since only expressions are allowed inside interpolation slots.
Real-World Examples
Generating a Multi-line Email Body
A notification service needed to build a formatted, multi-line plain-text email body from user and order data.
const email = `Hi ${user.firstName},
Your order #${order.id} shipped on ${order.shippedAt}.
Thanks for shopping with us!`;