Suggest an edit

Improve this article

Refine the answer for “Template literals”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

Template literals are a modern and very convenient way to work with strings in JavaScript.
They appeared in the **ES6 (ECMAScript 2015)** standard and let you write **multiline strings**, **embed variables**, and **expressions** right inside the text.

---

## Syntax

Template literals are created not with regular quotes (`'` or `"`),
but with **backticks** - `` ` ``:

```javascript
const name = 'Tim';
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Tim!"
```

---

## Main features

### **Interpolation of variables and expressions**

You can insert **any JavaScript expression** inside `${...}`:

```javascript
const a = 5;
const b = 10;

console.log(`Sum: ${a + b}`); // "Sum: 15"
console.log(`In 2 years: ${2025 + 2}`); // "In 2 years: 2027"
console.log(`Random number: ${Math.random()}`);
```

> Everything inside `${...}` is evaluated, and the result is inserted into the string.

---

### **Multiline strings**

Previously, you had to write it like this:

```javascript
const text = 'First line\n' +
              'Second line\n' +
              'Third line';
```

Now you can simply write:

```javascript
const text = `
First line
Second line
Third line
`;
console.log(text);
```

> Line breaks are preserved automatically.

---

### **Nested expressions and function calls**

```javascript
const user = { name: 'Tim', age: 25 };
function greet(u) {
  return `Hello, ${u.name}! You are ${u.age} years old.`;
}

console.log(`${greet(user)} Have a nice day!`);
```

---

### **Template literals can be used inside expressions**

```javascript
const price = 100;
const message = `Product price: ${price}$`;
console.log(message);
```

---

## Advanced feature - *tagged templates*

> So-called "tagged templates" are a function that **processes the template string manually**.

Example:

```javascript
function highlight(strings, ...values) {
 return strings.reduce((acc, str, i) =>
 `${acc}${str}${values[i] || ''}`, ''
 );
}

const name = 'Oleh';
const age = 27;

console.log(highlight`Name: ${name}, Age: ${age}`);
// Output: "Name: Oleh, Age: 27"
```

> This is a powerful technique for template engines, localization, formatting, and even building SQL queries with injection protection.

---

## Summary

| Feature | Regular strings | Template literals |
|---|---|---|
| Multiline strings | No | Yes |
| Inserting variables | Concatenation via `+` | Via `${}` |
| Calling functions inside | Awkward | Easy |
| Readability | Poor | Excellent |
| Uses quotes | `'` or `"` | `` ` `` (backtick) |

---

## Reinforcement example

```javascript
const product = 'Shirt';
const price = 2500;

const message = `
Product: ${product}
Price: ${price}$
Total with delivery: ${price + 500}$
`;

console.log(message);
```

Result:

```javascript
Product: Shirt
Price: 2500$
Total with delivery: 3000$
```

Markdown · drag & drop images · ⌘B / ⌘I shortcuts420 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.