JavaScriptStringsBeginner

Template literals (`...${}...`)

Builds strings with interpolation and multi-line support using backticks.

Review the syntaxStudy the examplesOpen the coding app
const msg = `Hello ${name}, you have ${count} items.`;
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Builds strings with interpolation and multi-line support using backticks.

Template literals are string literals delimited by backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and tagged templates. They were introduced in ES6 to provide a more readable and concise syntax compared to traditional string concatenation using the '+' operator. Expressions within the ${expression} placeholders are evaluated at runtime and coerced to strings. While performance is generally comparable to standard concatenation in modern engines like V8, template literals offer significant maintenance benefits for complex UI strings. Note that template literals do not support legacy octal escape sequences, and both 'null' and 'undefined' values are coerced to their literal string representations ('null' and 'undefined'). IE is not supported.

Quick reference

Syntax

const msg = `Hello ${name}, you have ${count} items.`;

See it in practice

Examples

1

Basic String Interpolation

const username = 'Alice';
const score = 95;
const message = `User ${username} scored ${score} points.`;
console.log(message);
Output:
User Alice scored 95 points.

Variables are embedded directly into the string without needing to break the string with plus operators.

2

Multi-line Strings and Formatting

const items = ['Apples', 'Oranges'];
const html = `
<ul>
  <li>${items[0]}</li>
  <li>${items[1]}</li>
</ul>`;
console.log(html);
Output:
<ul>\n <li>Apples</li>\n <li>Oranges</li>\n</ul>

Template literals preserve all whitespace and newlines, making them ideal for generating HTML fragments.

3

Embedded Expressions and Logic

const price = 100;
const tax = 0.08;
const total = `Total: $${(price * (1 + tax)).toFixed(2)}`;
console.log(total);
Output:
Total: $108.00

Any valid JavaScript expression can be placed inside ${}, including arithmetic operations and function calls.

Debug faster

Common Errors

1

LogicError

Cause: Attempting to use interpolation syntax inside standard single (') or double (") quotes.

Fix: Always use backticks (`) when you need to use the ${} placeholder syntax.

const name = 'JS'; const msg = 'Hello ${name}';
2

ReferenceError

Cause: Referencing a variable inside a template literal before it has been declared or initialized.

Fix: Ensure all variables used in interpolation are defined in the current scope before the literal is evaluated.

const greeting = `Hi ${user}`; let user = 'Dev';
3

LogicError

Cause: Unexpected coercion of null or undefined values into the literal strings 'null' or 'undefined'.

Fix: Use a logical OR or ternary operator to provide a default value inside the placeholder.

const data = null; const msg = `Value: ${data || 'N/A'}`;

Runtime support

Compatibility

Node.js, BrowserAll modern browsers, IE not supportedES6 (2015)

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Builds strings with interpolation and multi-line support using backticks.

LogicError: Always use backticks (`) when you need to use the ${} placeholder syntax. ReferenceError: Ensure all variables used in interpolation are defined in the current scope before the literal is evaluated. LogicError: Use a logical OR or ternary operator to provide a default value inside the placeholder.