# Template Literals in JavaScript

Contents

1.  The problem with traditional string concatenation
    
2.  Template literal syntax
    
3.  Embedding variables & expressions
    
4.  Multi-line strings
    
5.  Use cases in modern JavaScript
    

## **01 — The Problem**

### String concatenation is a mess

Before ES6, the only way to build dynamic strings in JavaScript was with the `+` operator — stitching variables and string fragments together one piece at a time. It worked, but it was tedious, error-prone, and notoriously hard to read.

Look at how many things can go wrong:

```javascript
const name = "Alice";
const age  = 28;
const city = "Bengaluru";

// Missing spaces, easy to forget quotes, hard to scan
const msg = "Hello, " + name + "! You are " + age +
           " years old and live in " + city + ".";

// Multi-line HTML? Absolutely horrible
const html = "<div class=\"card\">\n" +
             "  <h2>" + name + "</h2>\n" +
             "  <p>"  + city + "</p>\n" +
             "</div>";
```

The problems compound quickly: mismatched quotes, forgotten spaces around `+`, escaped characters inside strings, and multi-line content becoming a wall of concatenation. The *logic* of what the string says gets buried under the *syntax* of how it's built.

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/fbea31ae-27fc-4c09-a03c-91fd055e51f5.png align="center")

## 02 — Syntax

### The backtick: one character, big difference

A template literal uses **backticks** (`` ` ``) instead of single or double quotes. That's it — everything else flows naturally from there.

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/3e23e78d-8709-4f6b-a957-75cee255e066.png align="center")

> **// Tip**
> 
> Template literals aren't just a shorthand for concatenation — they evaluate any valid JavaScript *expression* inside `${}`, including function calls, ternary operators, and arithmetic.

## 03 — Interpolation

### Embedding variables & expressions

The `${}` syntax evaluates any JavaScript expression and injects its string representation into the output. Variables, math, function calls, ternary operators — all fair game.

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/893fd906-4165-4392-bd05-29d5b983cc86.png align="center")

### **Expressions, not just variables**

The power of template literals is that `${}` accepts *any expression* — not just variable names:

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/54a9cd6f-1ebb-4c4b-8f04-d03b7ede6cd3.png align="center")

## 04 — Multi-line

### Multi-line strings, finally readable

One of the most immediate quality-of-life improvements template literals provide is effortless multi-line strings. With traditional strings, every newline required an explicit `\n` escape — and things got messy fast.

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/344e7b2c-3a60-47bf-8cdd-3802bd03462f.png align="center")

The template literal version reads exactly like the output will look. You can write HTML, SQL, markdown, or email bodies directly — indented to match the string's intent, not the file's code structure.

> **// Note**
> 
> Whitespace inside a template literal is preserved exactly. If you indent lines inside the template for code readability, that indentation will appear in the output string. Use `String.prototype.trim()` or a `dedent` utility if that's a concern.

## 05 — Use Cases

### Where template literals shine in modern JS

Template literals aren't just a syntactic convenience — they unlock cleaner patterns across the whole codebase. Here are the places you'll reach for them every day:

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/0d5b5a03-16d8-470c-a2bb-9a105676d1e2.png align="center")

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/2c23b788-47d3-4f13-9ce9-d0b5f1420b56.png align="center")

* * *

### **Bonus: Tagged template literals**

Template literals have an advanced form called *tagged templates*, where you can prepend a function name to the backtick. The function receives the raw string parts and interpolated values separately — enabling powerful use cases like automatic HTML escaping, i18n, or styled-components.

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/ea700786-3a37-4ccc-9c00-ff5ab769513d.png align="center")

* * *

## Summary

### The takeaway

Template literals are one of the most impactful improvements ES6 brought to JavaScript. They solve three real problems at once: the verbosity of concatenation, the pain of multi-line strings, and the need to embed expressions cleanly.

Once you start using them, traditional string concatenation will feel like writing in a language with one hand tied behind your back. The syntax is minimal, the intent is clear, and the code reads like it means to say what it says.

Start with simple variable interpolation and multi-line templates. As your comfort grows, explore tagged templates — they're where the real power lies.