Skip to main content
Template strings (also called template literals) provide a powerful way to work with strings in TypeScript, allowing you to embed expressions and create multi-line strings.

​
Basic String Interpolation

Template strings use backticks (`) instead of quotes and allow you to embed variables using ${}: 
const firstname = 'Angel';
const lastname = 'Herrera';

const fullName = `El nombre es: ${firstname} ${lastname}`;
console.log(fullName); // "El nombre es: Angel Herrera"

​
Multi-line Strings

Template strings preserve line breaks, making them perfect for multi-line text: 
const fullName = `El nombre es: 
    ${firstname} ${lastname}
`;
With template strings, you don’t need special escape characters like \n for new lines - just write them naturally.

​
Embedding Expressions

You can embed any JavaScript expression inside ${}: 
const price = 100;
const tax = 0.15;

const total = `Total: $${price * (1 + tax)}`;
console.log(total); // "Total: $115"

​
Advantages Over String Concatenation

Compare template strings with traditional concatenation: 
// ✗ Hard to read
const message1 = 'Hello ' + firstname + ' ' + lastname + '!';

// ✓ Clean and readable
const message2 = `Hello ${firstname} ${lastname}!`;
Template strings are especially useful when building HTML strings, SQL queries, or any complex string with multiple variables.

​
Common Use Cases

  • Dynamic messages: Welcome, ${username}!
  • URLs: `https://api.example.com/users/${userId}`
  • HTML templates: `<div class="user">${username}</div>`
  • Multi-line JSON: Creating formatted JSON strings

Build docs developers (and LLMs) love

Get started for freeTalk to us