JavaScript String Templates

Introduction

JavaScript string templates, also known as template literals, are a powerful feature introduced in ES6 (ECMAScript 2015) that revolutionized how we create strings in JavaScript. Unlike traditional string concatenation with the + operator, template literals allow you to create strings with embedded expressions and support multi-line strings without special escape characters.

In this tutorial, we'll explore how to use template literals to write cleaner, more readable string manipulation code in JavaScript.

Basic Syntax

Template literals are created using backticks (`) instead of single or double quotes:

javascript

// Traditional string
const traditional = "Hello, world!";

// Template literal
const template = `Hello, world!`;

console.log(traditional); // "Hello, world!"
console.log(template);    // "Hello, world!"

While this simple example doesn't show any difference in output, the real power comes when we need to include variables or expressions in our strings.

String Interpolation

One of the most powerful features of template literals is string interpolation - the ability to embed expressions directly inside strings using the ${expression} syntax:

javascript

const name = "Sarah";
const age = 28;

// Traditional string concatenation
const greeting1 = "Hello, my name is " + name + " and I am " + age + " years old.";

// Using template literals
const greeting2 = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting1); // "Hello, my name is Sarah and I am 28 years old."
console.log(greeting2); // "Hello, my name is Sarah and I am 28 years old."

The ${expression} placeholder evaluates the expression inside it and converts the result to a string.

Expressions in Template Literals

You can include any valid JavaScript expression inside the ${} syntax, not just variables:

javascript

const price = 19.99;
const taxRate = 0.07;

const totalMessage = `The total price is $${(price * (1 + taxRate)).toFixed(2)}`;

console.log(totalMessage); // "The total price is $21.39"

You can even call functions inside template literals:

javascript

function calculateDiscount(price) {
  return price * 0.9; // 10% discount
}

const originalPrice = 50;
const message = `Original price: $${originalPrice}, After discount: $${calculateDiscount(originalPrice)}`;

console.log(message); // "Original price: $50, After discount: $45"

Multi-line Strings

Another great feature of template literals is the ability to create multi-line strings without using special escape characters like \n:

javascript

// Traditional multi-line string
const multiLine1 = "Line 1\n" +
                  "Line 2\n" +
                  "Line 3";

// Template literal multi-line string
const multiLine2 = `Line 1
Line 2
Line 3`;

console.log(multiLine1);
// Line 1
// Line 2
// Line 3

console.log(multiLine2);
// Line 1
// Line 2
// Line 3

This makes your code much cleaner when working with large blocks of text.

HTML Templates

Template literals are particularly useful when generating HTML content from JavaScript:

javascript

const user = {
  name: 'John Doe',
  avatar: 'avatar.jpg',
  role: 'Admin'
};

const userCard = `
  <div class="user-card">
    <img src="${user.avatar}" alt="User Avatar">
    <h2>${user.name}</h2>
    <span class="badge">${user.role}</span>
  </div>
`;

document.body.innerHTML = userCard;

This makes generating dynamic HTML content much more readable compared to traditional string concatenation.

Tagged Templates

Template literals come with an advanced feature called tagged templates, which allows you to parse template literals with a function:

javascript

function highlight(strings, ...values) {
  return strings.reduce((result, string, i) => {
    const value = values[i] || '';
    return result + string + (value ? `<span class="highlight">${value}</span>` : '');
  }, '');
}

const name = "JavaScript";
const version = "ES6";

const result = highlight`Learn ${name} ${version} template literals!`;

console.log(result);
// "Learn <span class="highlight">JavaScript</span> <span class="highlight">ES6</span> template literals!"

Tagged templates are powerful for creating domain-specific languages, internationalization, styling strings, sanitizing input, and more.

Practical Examples

Example 1: Building a URL with Query Parameters

javascript

function buildUrl(baseUrl, params) {
  const queryString = Object.entries(params)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
  
  return `${baseUrl}?${queryString}`;
}

const url = buildUrl('https://api.example.com/search', {
  query: 'JavaScript templates',
  sort: 'relevance',
  page: 1
});

console.log(url);
// https://api.example.com/search?query=JavaScript%20templates&sort=relevance&page=1

Example 2: Generating Email Templates

javascript

function createEmailTemplate(user, product) {
  return `
    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
      <h1>Thank you for your purchase, ${user.firstName}!</h1>
      
      <p>We're excited that you chose the ${product.name}.</p>
      
      <div class="order-details">
        <p><strong>Order Number:</strong> ${user.orderNumber}</p>
        <p><strong>Amount:</strong> $${product.price.toFixed(2)}</p>
      </div>
      
      <p>If you have any questions about your order, reply to this email or contact us at support@example.com.</p>
    </div>
  `;
}

const user = {
  firstName: 'Alex',
  orderNumber: 'ORD-12345'
};

const product = {
  name: 'JavaScript Mastery Course',
  price: 49.99
};

const emailHTML = createEmailTemplate(user, product);
console.log(emailHTML);

Example 3: Creating SQL Queries

javascript

function createSelectQuery(table, fields, conditions) {
  const fieldList = fields.join(', ');
  const whereClause = Object.entries(conditions)
    .map(([field, value]) => `${field} = '${value}'`)
    .join(' AND ');
    
  return `SELECT ${fieldList} FROM ${table} WHERE ${whereClause};`;
}

const query = createSelectQuery(
  'users', 
  ['id', 'name', 'email'],
  { status: 'active', role: 'admin' }
);

console.log(query);
// SELECT id, name, email FROM users WHERE status = 'active' AND role = 'admin';

Best Practices

1. Use template literals for string interpolation: Whenever you need to combine strings with variables, template literals are cleaner than concatenation.

2. Leverage multi-line capability: For any string that spans multiple lines, template literals improve readability.

3. Be careful with expressions: Complex expressions inside ${} can make your template harder to read. Consider extracting complex logic to variables or functions.

4. Use tagged templates for specialized formatting: When you need custom string processing, tagged templates can be very powerful.

5. Watch for security: When using template literals to generate HTML, be careful about XSS vulnerabilities if user input is involved.

Summary

JavaScript template literals provide a more elegant way to work with strings, offering:

• String interpolation with ${expression} syntax
• Multi-line string support without escape characters
• Tagged templates for advanced string processing

They are especially useful when generating dynamic content like HTML, URLs, SQL queries, and any text that combines static content with dynamic values.

Exercises

1. Convert the following string concatenation to a template literal:

   javascript

   const product = "laptop";
   const price = 999;
   const message = "The " + product + " costs $" + price + ".";

2. Create a template function that takes a user object and generates an HTML card with their name, email, and role.

3. Create a tagged template function that automatically formats numbers as currency when they appear in a string.

4. Create a SQL query builder that generates INSERT statements using template literals.

Additional Resources

• MDN Web Docs: Template literals
• JavaScript.info: Template strings
• Template Literals (Template Strings) in ES6