Template literals
Template literals combine string interpolation and multiline text in one syntax. They are especially useful when output depends on computed values or repeated formatting.
Overview
Template literals combine string interpolation and multiline text in one syntax. They are especially useful when output depends on computed values or repeated formatting.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 41 | 12 | 34 | 9 | 41 | 9 | |
template literal revision Escape sequences allowed in tagged template literals | 62 | 79 | 53 | 11 | 62 | 11 |
Syntax
const name = 'Taro';
const age = 25;
// Embedding expressions
console.log(`Hello, ${name}!`);
console.log(`Age: ${age}, Next year: ${age + 1}`);
// Multiple lines
const html = `
<div>
<h1>${name}</h1>
<p>Age: ${age}</p>
</div>
`;Live demo
Interpolation with expressions
Embed variables, calculations, and conditional text directly inside one readable string.
Multiline templates
Keep the structure of generated text close to the final output by using a multiline literal.
Use cases
Formatting messages
Build UI strings, logs, and summaries with embedded expressions that stay close to the sentence structure.
Generating structured text
Create HTML fragments, emails, or reports that benefit from multiline layout in source code.
Cautions
- Template literals can still produce unsafe HTML if you inject untrusted values into markup strings.
- Long nested expressions inside ${...} become hard to read; compute them first when needed.
Accessibility
- If template strings generate labels or announcements, keep the final text concise and predictable for assistive technologies.
Related links
Powered by web-features