Template literals & HTML strings

Backticks let you embed ${vars} in strings. Powerful, but mind the backtick-in-backtick footgun.

Code example

const html = `
  <div class='cell'>
    <span>In [${i}]</span>
    <button onclick='runCell("${cell.id}")'>Run</button>
  </div>
`;
container.innerHTML = html;

How it works

Template literals (backticks) are JS's answer to f-strings. They support multi-line strings and ${expression} interpolation. They're the standard way to build HTML strings in vanilla JS. The footgun: if the literal contains a backtick (e.g. inside a placeholder attribute), the parser terminates the string early and the whole script crashes. Always escape user-provided content with escapeHtml() before interpolating it into a template literal — otherwise you have both an XSS hole AND a crash bug.