Template Strings

Template Strings

Template literals (template strings) use backticks instead of quotes and support embedded expressions and multi-line strings. They make string building much cleaner.

Basic Syntax

// Old way:
const greeting = "Hello, " + name + "! You are " + age + " years old.";

// ES6 way:
const greeting = `Hello, ${name}! You are ${age} years old.`;

Use backticks ` and ${expression} to embed values.

Embedded Expressions

const a = 10;
const b = 20;

console.log(`Sum: ${a + b}`);        // "Sum: 30"
console.log(`Double: ${a * 2}`);     // "Double: 20"
console.log(`Is big: ${a > 5}`);     // "Is big: true"
console.log(`Upper: ${"hello".toUpperCase()}`);  // "Upper: HELLO"

Any valid JavaScript expression works inside ${} — arithmetic, function calls, ternaries, method calls.

Multi-Line Strings

// Old way (messy):
const html = "<div>\n" +
             "  <h1>" + title + "</h1>\n" +
             "  <p>" + body + "</p>\n" +
             "</div>";

// ES6 way (clean):
const html = `
<div>
    <h1>${title}</h1>
    <p>${body}</p>
</div>
`;

Line breaks in template literals are preserved — no need for \n.

Expression Examples

// Ternary operator
const status = `User is ${isActive ? "active" : "inactive"}`;

// Function calls
const formatted = `Total: ${formatCurrency(total)}`;

// Object properties
const user = { name: "Alice", role: "admin" };
const info = `${user.name} (${user.role})`;  // "Alice (admin)"

// Array methods
const items = ["a", "b", "c"];
const list = `Items: ${items.join(", ")}`;  // "Items: a, b, c"

Nesting Template Literals

const items = ["Apple", "Banana", "Cherry"];

const html = `
<ul>
    ${items.map(item => `<li>${item}</li>`).join("\n    ")}
</ul>
`;

// Result:
// <ul>
//     <li>Apple</li>
//     <li>Banana</li>
//     <li>Cherry</li>
// </ul>

Tagged Templates

Tagged templates let you process a template literal with a function:

function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        const val = values[i] ? `<strong>${values[i]}</strong>` : "";
        return result + str + val;
    }, "");
}

const name = "Alice";
const role = "admin";

const output = highlight`User ${name} has role ${role}`;
// "User <strong>Alice</strong> has role <strong>admin</strong>"

The tag function receives the static string parts and the interpolated values separately.

Escaping Backticks

const code = `Use backticks: \`like this\``;
// "Use backticks: `like this`"

Old vs New Comparison

Feature	Old Strings ("" / '')	Template Literals (``)
Interpolation	"Hi " + name	`Hi ${name}`
Multi-line	Requires \n or +	Natural line breaks
Expressions	Must concatenate	${any expression}
Tagged processing	Not available	tag`...`

Key Takeaways

• Template literals use backticks `` and ${expression} for interpolation
• Any JavaScript expression works inside ${}
• Multi-line strings are natural — no \n or concatenation needed
• Tagged templates process strings with a custom function
• Template literals are now the standard for string building in modern JavaScript