JavaScript ES6+

Template Literals

String interpolation and multi-line strings with backticks

Find videos you like?

Save to resource drawer for future reference!

Template Literals: Modern Strings

Template literals use backticks (`) instead of quotes. They allow string interpolation with ${}, multi-line strings without \n, and even tagged templates for advanced processing!

Backticks are the Key

Use backticks `...` instead of single/double quotes. Everything inside can span multiple lines and embed expressions!

String Interpolation

Embed variables and expressions with ${}

❌ Old Way - String Concatenation

const name = 'Alice';
const age = 25;

// Messy concatenation
const message = 'Hello, ' + name + 
  '! You are ' + age + ' years old.';

console.log(message);
// Hello, Alice! You are 25 years old.

// Gets worse with more variables
const greeting = 'Welcome ' + name + 
  ', you have ' + (10 - age) + 
  ' years until retirement!';

✅ Template Literals - Clean!

const name = 'Alice';
const age = 25;

// Clean interpolation
const message = `Hello, ${name}! You are ${age} years old.`;

console.log(message);
// Hello, Alice! You are 25 years old.

// Easy to read with expressions
const greeting = `Welcome ${name}, you have ${65 - age} years until retirement!`;

String Interpolation Examples

Embed any expression inside ${'{}'}

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Multi-line Strings

No more \n escape sequences!

❌ Old Way - Escape Sequences

// Using \n for newlines
const poem = 'Roses are red,\n' +
  'Violets are blue,\n' +
  'JavaScript is awesome,\n' +
  'And so are you!';

// HTML with concatenation
const html = '<div>\n' +
  '  <h1>Title</h1>\n' +
  '  <p>Content</p>\n' +
  '</div>';

✅ Template Literals - Natural!

// Natural line breaks
const poem = `Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!`;

// HTML as written
const html = `<div>
  <h1>Title</h1>
  <p>Content</p>
</div>`;

Multi-line String Examples

Write strings exactly as they should appear

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Complex Expressions

Any JavaScript expression works inside ${}

Any Expression is Valid!

// Conditional (ternary)
const age = 20;
const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`;

// Array methods
const names = ['Alice', 'Bob', 'Charlie'];
const list = `Users: ${names.join(', ')}`;

// Math
const price = 99.99;
const quantity = 3;
const total = `Total: $${(price * quantity).toFixed(2)}`;

// Nested templates
const items = ['apple', 'banana'];
const html = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;

// Method calls
const text = 'hello';
console.log(`Uppercase: ${text.toUpperCase()}`);
// Uppercase: HELLO

Advanced Expression Examples

Complex expressions in template literals

javascript

code

DarkEditable

// Array mapping
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];

const userList = `
  <ul>
    ${users.map(u => `
      <li>${u.name} (${u.age} years old)</li>
    `).join('')}
  </ul>
`;

// Conditional rendering
const isLoggedIn = true;
const username = 'Alice';

const greeting = `
  <div>
    ${isLoggedIn 
      ? `Welcome back, ${username}!` 
      : `Please log in`}
  </div>
`;

// Calculation with formatting
function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`;
}

const price = 29.99;
const tax = 0.08;
const total = price * (1 + tax);

const receipt = `
  Price: ${formatCurrency(price)}
  Tax (8%): ${formatCurrency(price * tax)}
  Total: ${formatCurrency(total)}
`;

// Nested operations
const score = 85;
const grade = `Your grade: ${
  score >= 90 ? 'A' :
  score >= 80 ? 'B' :
  score >= 70 ? 'C' :
  score >= 60 ? 'D' : 'F'
}`;

// Dynamic property access
const obj = { x: 10, y: 20 };
const key = 'x';
console.log(`Value of ${key}: ${obj[key]}`);
// Value of x: 10

Console Output

Click "Run Code" to see output here...

Tagged Templates (Advanced)

Custom processing of template literals

javascript

code

DarkEditable

// Tagged template function
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] !== undefined 
      ? `<mark>${values[i]}</mark>` 
      : '';
    return result + str + value;
  }, '');
}

const name = 'Alice';
const age = 25;
const html = highlight`User ${name} is ${age} years old`;
console.log(html);
// User <mark>Alice</mark> is <mark>25</mark> years old

// SQL escaping (simplified example)
function sql(strings, ...values) {
  return strings.reduce((query, str, i) => {
    const value = values[i] !== undefined
      ? `'${String(values[i]).replace(/'/g, "''")}`
      : '';
    return query + str + value;
  }, '');
}

const username = "O'Brien";
const query = sql`SELECT * FROM users WHERE name = ${username}`;
console.log(query);
// SELECT * FROM users WHERE name = 'O''Brien'

// Styling library (like styled-components)
function css(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] || '');
  }, '');
}

const primaryColor = '#3b82f6';
const styles = css`
  .button {
    background: ${primaryColor};
    padding: 10px 20px;
  }
`;

Console Output

Click "Run Code" to see output here...

Real-World Example: Dynamic HTML Generator

Building HTML with template literals

javascript

code

DarkEditable

// Blog post renderer
function renderBlogPost(post) {
  const { title, author, date, content, tags } = post;
  
  return `
    <article class="blog-post">
      <header>
        <h1>${title}</h1>
        <div class="meta">
          <span class="author">By ${author}</span>
          <time datetime="${date}">${new Date(date).toLocaleDateString()}</time>
        </div>
      </header>
      
      <div class="content">
        ${content}
      </div>
      
      <footer>
        <div class="tags">
          ${tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
        </div>
      </footer>
    </article>
  `;
}

const post = {
  title: 'Getting Started with JavaScript',
  author: 'Alice Johnson',
  date: '2024-01-15',
  content: '<p>JavaScript is an amazing language...</p>',
  tags: ['javascript', 'tutorial', 'beginners']
};

console.log(renderBlogPost(post));

// API response formatter
function formatResponse(data, success = true) {
  const timestamp = new Date().toISOString();
  const status = success ? 'success' : 'error';
  
  return `
    Response Status: ${status.toUpperCase()}
    Timestamp: ${timestamp}
    Data: ${JSON.stringify(data, null, 2)}
    ${!success ? `Error: ${data.message}` : ''}
  `;
}

// Email template
function sendWelcomeEmail(user) {
  const { name, email, verificationCode } = user;
  
  return `
    To: ${email}
    Subject: Welcome to MyApp!
    
    Hi ${name},
    
    Welcome to MyApp! We're excited to have you on board.
    
    Please verify your email using this code: ${verificationCode}
    
    This code expires in 24 hours.
    
    Best regards,
    The MyApp Team
  `;
}

Console Output

Click "Run Code" to see output here...

Key Takeaways

🎯

Use Backticks

Template literals use backticks `...` instead of quotes
Found on the key with tilde (~) on US keyboards

💡

Interpolation with ${}

Embed any expression: variables, calculations, function calls, ternary operators

📝

Multi-line Friendly

No need for \n or + concatenation
Just press Enter and keep typing!

🔧

Tagged Templates

Advanced: Custom processing functions
Used by libraries like styled-components

Pro Tip

Use template literals by default! They're more readable and flexible than quote-based strings, even without interpolation.

Previous Topic

Strings

Working with text data: creation, concatenation, and manipulation.

Next Topic

String Methods

Common methods: charAt, slice, indexOf, includes, split, replace, trim.

Ask a Question

Have a question about Template Literals? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript ES6+

Template Literals

String interpolation and multi-line strings with backticks

Find videos you like?

Save to resource drawer for future reference!

Template Literals: Modern Strings

Template literals use backticks (`) instead of quotes. They allow string interpolation with ${}, multi-line strings without \n, and even tagged templates for advanced processing!

Backticks are the Key

Use backticks `...` instead of single/double quotes. Everything inside can span multiple lines and embed expressions!

String Interpolation

Embed variables and expressions with ${}

❌ Old Way - String Concatenation

const name = 'Alice';
const age = 25;

// Messy concatenation
const message = 'Hello, ' + name + 
  '! You are ' + age + ' years old.';

console.log(message);
// Hello, Alice! You are 25 years old.

// Gets worse with more variables
const greeting = 'Welcome ' + name + 
  ', you have ' + (10 - age) + 
  ' years until retirement!';

✅ Template Literals - Clean!

const name = 'Alice';
const age = 25;

// Clean interpolation
const message = `Hello, ${name}! You are ${age} years old.`;

console.log(message);
// Hello, Alice! You are 25 years old.

// Easy to read with expressions
const greeting = `Welcome ${name}, you have ${65 - age} years until retirement!`;

String Interpolation Examples

Embed any expression inside ${'{}'}

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Multi-line Strings

No more \n escape sequences!

❌ Old Way - Escape Sequences

// Using \n for newlines
const poem = 'Roses are red,\n' +
  'Violets are blue,\n' +
  'JavaScript is awesome,\n' +
  'And so are you!';

// HTML with concatenation
const html = '<div>\n' +
  '  <h1>Title</h1>\n' +
  '  <p>Content</p>\n' +
  '</div>';

✅ Template Literals - Natural!

// Natural line breaks
const poem = `Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!`;

// HTML as written
const html = `<div>
  <h1>Title</h1>
  <p>Content</p>
</div>`;

Multi-line String Examples

Write strings exactly as they should appear

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Complex Expressions

Any JavaScript expression works inside ${}

Any Expression is Valid!

// Conditional (ternary)
const age = 20;
const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`;

// Array methods
const names = ['Alice', 'Bob', 'Charlie'];
const list = `Users: ${names.join(', ')}`;

// Math
const price = 99.99;
const quantity = 3;
const total = `Total: $${(price * quantity).toFixed(2)}`;

// Nested templates
const items = ['apple', 'banana'];
const html = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;

// Method calls
const text = 'hello';
console.log(`Uppercase: ${text.toUpperCase()}`);
// Uppercase: HELLO