17. JavaScript Template Literals

What you will learn

• How to write strings with backticks
• How to insert values with ${ }
• How to write multi-line text
• How to build HTML from data

What is a template literal?

A template literal is a string written with backticks (`) instead of quotes. It lets you place values directly inside the text, which is much cleaner than joining pieces with +.

The backtick key is usually at the top left of the keyboard, below Esc.

Inserting values

Put any expression inside ${ }. JavaScript works it out and places the result in the text.

<p id="demo"></p>

<script>
  const name = "Sam";
  const price = 20;
  const quantity = 3;

  // The old way
  const oldWay = "Hello " + name + ", your total is " + (price * quantity) + ".";

  // The template literal way
  const newWay = `Hello ${name}, your total is ${price * quantity}.`;

  document.getElementById("demo").innerHTML = oldWay + "<br>" + newWay;
</script>

Both lines give the same result, but the second is easier to read and write.

Expressions inside

You can place calculations, function calls, and conditions inside ${ }.

<p id="demo"></p>

<script>
  const age = 17;
  const name = "ali";

  document.getElementById("demo").textContent =
    `${name.toUpperCase()} is ${age} and ${age >= 18 ? "an adult" : "a minor"}.`;
</script>

Multi-line strings

Normal quotes cannot span lines, but backticks can. Line breaks in your code are kept in the text.

<pre id="demo"></pre>

<script>
  const poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you.`;

  document.getElementById("demo").textContent = poem;
</script>

Roses are red,
Violets are blue,
JavaScript is fun,
And so are you.

The <pre> element keeps the line breaks visible. In a normal paragraph, the browser would join the lines.

Building HTML from data

Template literals shine when you create HTML from a list. Combine them with map() and join().

<ul id="demo"></ul>

<script>
  const courses = [
    { title: "HTML", lessons: 25 },
    { title: "CSS", lessons: 31 },
    { title: "JavaScript", lessons: 32 }
  ];

  document.getElementById("demo").innerHTML = courses
    .map((c) => `<li><strong>${c.title}</strong>: ${c.lessons} lessons</li>`)
    .join("");
</script>

Quotes inside template literals

Single and double quotes work freely inside backticks, with no escaping needed. To write a backtick or ${ literally, put a backslash before it.

Common mistakes

• Using normal quotes with ${ }. It only works inside backticks.
• Forgetting the closing backtick.
• Using curly brackets without the dollar sign, so {name} is shown as plain text.
• Putting visitor input into innerHTML.

<p id="demo"></p>

<script>
  const product = "Notebook";
  const price = 4.5;
  const qty = 4;

  document.getElementById("demo").textContent =
    `${qty} x ${product} = ${(price * qty).toFixed(2)}`;
</script>

Summary

• Template literals use backticks and ${ } to insert values.
• They allow multi-line text.
• They make building text and HTML from data much cleaner.