Template Literals
Learn how template literals use backticks and ${} to make string interpolation, multi-line strings, and tagged templates far more readable than old-style string concatenation.
Reading Time
13 min
Lesson
Lesson 26 of 48
Introduction
Template literals, introduced in ES6, are strings wrapped in backticks (`) instead of single or double quotes. On their own, a backtick string behaves just like any other string, but backticks unlock two features regular quotes don't support: embedding expressions directly inside the string with ${}, and writing strings that span multiple lines without any special escape characters. Together, these make template literals the default choice for building strings in modern JavaScript.
Backtick Syntax Basics
Console Output
Click “Run” to see the console output here.
String Interpolation with ${}
The real power of template literals is ${}. Anything placed between the ${ and the matching } is evaluated and its result is converted to a string and inserted right there, in place. This replaces the old pattern of breaking a string apart with + to splice in variables, which was easy to get wrong and hard to read once more than one or two variables were involved.
String Interpolation Example
Console Output
Click “Run” to see the console output here.
Multi-line Strings
Regular single- and double-quoted strings can't span multiple lines without an escape sequence like \n or awkward string concatenation. Template literals can contain actual line breaks — pressing Enter inside the backticks and continuing on the next line produces a real newline in the resulting string, no escaping required.
Multi-line Strings Example
Console Output
Click “Run” to see the console output here.
Expressions Inside Interpolation
The code inside ${} isn't limited to a bare variable name — it can be any valid JavaScript expression: arithmetic, function calls, ternaries, property access, or even method chains. The expression is evaluated first, and only its final result is inserted into the string.
Expressions Inside ${} Example
Console Output
Click “Run” to see the console output here.
Nesting Template Literals
Because ${} accepts any expression, and a template literal is itself an expression, you can nest one template literal inside the ${} of another. This is useful for conditional pieces of a larger string, though it's worth keeping an eye on readability — deeply nested template literals can get hard to follow, so a helper variable is often clearer once nesting gets more than one level deep.
Nested Template Literals Example
Console Output
Click “Run” to see the console output here.
Tagged Templates
A less commonly used but powerful feature is tagged templates: placing a function name directly before a template literal, with no parentheses or space, calls that function with the template's pieces broken apart — an array of the literal string segments, followed by the evaluated values from each ${} as separate arguments. This lets the function process and reassemble the string however it wants, which is how libraries like styled-components parse CSS out of a template literal.
A Basic Tagged Template Example
Console Output
Click “Run” to see the console output here.
Template Literals vs. String Concatenation
| Aspect | Old Concatenation (+) | Template Literals |
|---|---|---|
| Inserting variables | "Hi " + name + "!" | `Hi ${name}!` |
| Multi-line strings | Requires \n or joining lines | Just press Enter inside backticks |
| Expressions | Must break out of the string | Write directly inside ${} |
| Readability with many variables | Gets cluttered quickly | Stays readable |
| Custom processing | Not directly supported | Supported via tagged templates |
Prefer Template Literals by Default
In modern JavaScript codebases, template literals are generally preferred over string concatenation any time a string includes a variable, an expression, or spans multiple lines — even for something as simple as a single interpolated value. Plain quotes are still perfectly fine for strings with no interpolation or line breaks at all.
Escaping Backticks and ${ Inside a Template Literal
If you actually need a literal backtick or a literal ${ sequence inside a template literal, you must escape it with a backslash (\` or \${), otherwise JavaScript will try to interpret it as the end of the string or the start of an interpolation. This is easy to forget when generating template-literal-like output (for example, code samples) from inside another template literal.