You will be able to build readable JavaScript strings by embedding variables and expressions inside template literals.
What it is
A template literal is a string written with backticks instead of single or double quotes. Inside it, you can embed JavaScript expressions using ${expression}. The expression is evaluated, converted to a string, and inserted into the final string. Template literals also preserve line breaks and indentation, which makes multi-line text easier to write.
Related terms: interpolation, template string, tagged template literal, and expression.
Why it matters
- It reduces noisy
+concatenation. - It keeps dynamic values close to the surrounding text.
- It supports expressions, not just simple variables.
- It makes multi-line strings readable.
- It works well for messages, URLs, queries, and HTML snippets.
Syntax or steps
- Open and close the string with backticks:
`...`. - Write normal text where needed.
- Insert an expression between
${and}. - Use any valid expression: variable, function call, ternary, arithmetic, or object property.
const user = { name: "Ada" };
const greeting = `Hello, ${user.name}!`;
Example
const user = { name: "Ada", role: "admin", unread: 3 };
const status = user.unread > 0 ? "needs attention" : "clear";
const message = `User: ${user.name}
Role: ${user.role}
Unread messages: ${user.unread}
Status: ${status}`;
console.log(message);
useris an object with properties used in the template.statusis computed before the string is built.${user.name}inserts the value ofuser.name.${user.unread}inserts a number, which becomes text in the string.- The line breaks inside the backticks are kept in the final string.
Common mistakes
- Using quotes instead of backticks.
"Hi, ${name}!"does not interpolate. - Forgetting the dollar sign.
`Hi, {name}!`prints literal braces. - Putting statements inside
${}. Only expressions are allowed. - Assuming objects print usefully.
${user}becomes[object Object]unless you choose a property or convert it.
When to use it
Use template literals when a string contains dynamic values or spans multiple lines. Use normal quoted strings when the text is fixed and simple.
| Approach | Best for | Example |
|---|---|---|
| Template literal | Interpolated or multi-line text | `Hi, ${name}!` |
| Quoted string | Fixed, simple text | "Hi!" |
| Concatenation | Older code or very short joins | "Hi, " + name + "!" |
Practice
Guided exercise: Create variables orderId and customer, then build a template literal that outputs Order #42 shipped to Sam.
Challenge: Add a total variable and include a conditional expression that says free shipping when the total is at least 50, or shipping applies otherwise.
Hint: Use ${total >= 50 ? "free shipping" : "shipping applies"} inside the template literal.
Quick check
What does `Total: ${1 + 2}` produce?
Answer: Total: 3
Summary
Template literals let you write strings as text with embedded expressions. They make JavaScript code easier to read when values change or when you need multi-line output. Use them instead of concatenation whenever the string is dynamic.