Script SpringsISSUE #12 of 29

template literals · interpolation

SparkyVSNaN the Trickster

Sparky saysTemplate literals interpolate values, span multiple lines, and power tagged templates.

Inside backticks, ${...} embeds any expression — variables, math, function calls. They preserve line breaks, making multi-line HTML strings clean. Tagged templates (a function before the backticks) let you process the parts programmatically — the basis of libraries like styled-components.

Power-ups you unlock

${expr} embeds any expression
Multi-line strings with no \n needed
Great for building HTML/markup strings
Tagged templates process parts via a function

NaN the Trickster attacks — common mistakes

Forgetting the $ before the brace
Deeply nesting template literals into unreadable soup
XSS risk when interpolating untrusted data into HTML

Boss battleBuild a multi-line HTML card string with interpolated title and body.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><div id="o"></div>
<script>const t='Card',b='interpolated body';
document.getElementById('o').innerHTML=`<div style="border:1px solid #2a1d4a;padding:12px"><h3 style="color:#b388ff">${t}</h3><p>${b}</p></div>`;</script></body></html>

▶ Open the interactive comic issue

‹ Strings · Single · Double · Backtick String Methods · Slice · Split · Replace ›