← Back to Roadmap

Template Literals & Tagged Templates

Easy

In plain terms

Template literals use backticks and ${} for interpolation. Multi-line strings without \n. Tagged templates are functions that receive string parts and expressions: tag`str ${x}`.

What you need to know

  • •`text ${expr}`
  • •Multi-line
  • •Tagged: fn`...`

Try it yourself

Copy the code below and run it in your browser console or a code editor:

const name = 'Alice';
`Hello, ${name}!`;  // "Hello, Alice!"

`Line 1
Line 2`;

const price = 10;
`Total: $${price.toFixed(2)}`;

// Tagged template
function tag(strings, ...values) {
  return strings.reduce((r, s, i) =>
    r + s + (values[i] || ''), '');
}

Learn more

Dive deeper with these trusted resources:

MDNjavascript.infoTutorialsPointW3Schools