JavaScript Template Literals

Written by Swapnil RajaPublished 24 Aug 2026

Template literals use backticks and let you put values directly inside text.

They replace long chains of string joining with something far easier to read.

They also allow real line breaks inside the text.

Example

javascript

const name = "Ada";

console.log(`Hello ${name}`);

The output is Hello Ada.

What is a Template Literal?

It is written with backticks instead of quotes.

${'${...}'} inserts the value of any expression.

PreviousJavaScript Strings NextJavaScript String Escape Characters

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Template Literals</title>
</head>
<body>

  <h1>Template Literals</h1>

  <p id="out"></p>

  <script>
    const name = "Ada";
    const items = 3;
    const price = 100;

    document.getElementById("out").innerHTML =
      `Hello ${name}<br>` +
      `You have ${items} ${items === 1 ? "item" : "items"}<br>` +
      `Total with tax: ${price * 1.2}`;
  </script>

</body>
</html>

JavaScript Template Literals

Example

What is a Template Literal?

Syntax

Compared with Joining

Example

Any Expression Works

Example

Multiple Lines

Example

Conditions Inside

Example

Backticks Are Not Quotes

Example

Complete Example

Try It Yourself

Important Points

Conclusion