Backticks changed how JavaScript builds strings — and most people use 20% of them.
The full range
const name = "Priya", cgpa = 8.9;
`Hi ${name}` // interpolation
`Grade: ${cgpa >= 8 ? "A" : "B"}` // any expression works
`Total: ${marks.reduce((a,b) => a+b)}`
// multiline — the HTML-building workhorse
const card = `
<div class="card">
<h3>${name}</h3>
${cgpa > 8 ? `<span class="badge">Topper</span>` : ""}
</div>`;
list.innerHTML = students.map(s => `<li>${s.name}</li>`).join("");Tagged templates (the advanced 20%)
function esc(strings, ...values) {
return strings.reduce((out, s, i) =>
out + s + (values[i] ? String(values[i]).replace(/</g, "<") : ""), "");
}
const safe = esc`<p>${userInput}</p>`; // auto-escaped!A tag function receives the string parts and values separately — it's how styled-components and SQL-escaping libraries work. Recognizing the syntax tag`...` in codebases is the practical takeaway.