Template Literals
📚 What are Template Literals? Template literals are strings wrapped in backticks (`) instead of quotes. Inside them, ${expression} is evaluated and embedded. They make string building much cleaner than concatenating with + signs, and support multi-line strings naturally.
Appy Says…
Remember the pain of concatenating strings? 'Hello, ' + name + '! You have ' + count + ' messages.' — messy, error-prone, hard to read. Template literals replace all of that with clean backtick syntax. Once you switch, you never go back.
What are Template Literals?
Template literals are strings enclosed in backticks (`) instead of quotes. They support string interpolation with ${expression} and multi-line strings without \n.
- •Basic:
`Hello, ${name}!` - •Expressions:
`Total: ${price * qty}` - •Multi-line: backtick string can span multiple lines — newlines are preserved
- •Nested:
`${isAdmin ? 'Admin' : 'User'}: ${username}` - •Tagged templates:
html`<div>${content}</div>`— advanced feature used by styled-components - •Any JS expression inside
${ }: function calls, ternaries, method chains
Think of it like a chat message template
In WhatsApp, when you get a notification, it says 'Appy sent you a message'. That message is a template: `${sender} sent you a message`. The sender's name is inserted automatically. Template literals work exactly the same — write the template once, plug in variables.
How It Works
- •1. Use backticks instead of quotes:
`hello` - •2. Inside backticks,
${expression}evaluates the expression and inserts its string value - •3. Any valid JS expression works:
${obj.name.toUpperCase()} - •4. Multi-line: press Enter inside backticks — no
\nneeded - •5. Escape a backtick:
\`; escape a dollar:\${ - •6. Tagged templates:
tag`string ${expr}`— callstagwith template parts and expressions
Real-World Examples
- •Notification:
`${user.name} liked your post` - •API URL:
`https://api.app.com/users/${userId}/posts` - •Error message:
`Failed to load: HTTP ${res.status} on ${url}` - •SQL query (in Node.js):
`SELECT * FROM users WHERE id = ${id}` - •HTML generation:
`<li class="${active ? 'active' : ''}">${item}</li>`
Key Facts
- •Template literals were introduced in ES6 (2015) — before that, string concatenation was the only way
- •styled-components and GraphQL use tagged template literals as their core syntax
- •The browser doesn't parse HTML inside template literals — use a sanitiser to avoid XSS if inserting user content into HTML
- •Template literals are slightly slower than plain string concatenation in microbenchmarks, but the difference is negligible in real apps
Watch Out!
Never insert raw user input directly into an HTML string with template literals: div.innerHTML = `<p>${userInput}</p>` — this is an XSS vulnerability. Malicious users can inject script tags. Use a sanitiser or set textContent instead.
Remember
Backticks + ${} = template literal. Use it for any string that contains variables. Never concatenate with + when a template literal is cleaner.
What You Learned
- •Template literals use backticks; embed any expression with
${expr} - •Support multi-line strings and any JS expression inside
${} - •Unlocks: clean URL building, readable messages, HTML generation, GraphQL, styled-components
Key Facts
- →Template literals were introduced in ES6 (2015) — before that, string concatenation was the only way
- →styled-components and GraphQL use tagged template literals as their core syntax
- →The browser doesn't parse HTML inside template literals — use a sanitiser to avoid XSS if inserting user content into HTML
- →Template literals are slightly slower than plain string concatenation in microbenchmarks, but the difference is negligible in real apps
Real-World Examples
Remember
Backticks + ${} = template literal. Use it for any string that contains variables. Never concatenate with + when a template literal is cleaner.
Quick Quiz
Template literals use?