Javascript Template Literals And String Interpolation Complete Guide

Introduction

Template literals, also known as template strings, are literals that allow us to embed expressions inside string literals, using backticks (`) instead of the traditional single (') or double quotes ("). This feature was introduced in ES6 (ECMAScript 2015).

Basic Usage of Template Literals

Example 1: Basic Template Literal

// Traditional way of using string literals
let name = 'Alice';
let greeting = 'Hello, ' + name + '! How are you today?';
console.log(greeting); // Output: Hello, Alice! How are you today?

// Using template literals for the same message
let templateGreeting = `Hello, ${name}! How are you today?`;
console.log(templateGreeting); // Output: Hello, Alice! How are you today?

Explanation:

• We declare a variable name with the value 'Alice'.
• We then create a greeting message using both traditional string concatenation and template literals.
• In the template literal, ${name} is used to interpolate the value of the name variable.

Multiline Strings

Example 2: Multiline Strings

// Traditional way to create a multiline string
let message = 'This is a message\n' +
              'that spans across\n' +
              'multiple lines.';
console.log(message);
/*
Output:
This is a message
that spans across
multiple lines.
*/

// Using template literals to create a multiline string
let templateMessage = `This is a message
that spans across
multiple lines.`;
console.log(templateMessage);
/*
Output:
This is a message
that spans across
multiple lines.
*/

Explanation:

• In the traditional method, we use a combination of strings and the newline character \n to break lines.
• With template literals, you can simply write the string across multiple lines, and it will render those lines as they are.

Expression Interpolation

Example 3: Expressions in Template Literals

// Declaring some variables
let a = 5;
let b = 10;

// Traditional way of calculating the sum and creating a message
let sumMessage = 'The sum of ' + a + ' and ' + b + ' is ' + (a + b) + '.';
console.log(sumMessage); // Output: The sum of 5 and 10 is 15.

// Using template literals with expressions
let templateSumMessage = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(templateSumMessage); // Output: The sum of 5 and 10 is 15.

Explanation:

• Outside of template literals, we manually calculate the sum (a + b) and then concatenate the strings.
• In template literals, we directly embed the expression ${a + b} to calculate and print it inline.

Example with Functions

Example 4: Using Template Literals with Functions

// Function to generate a personalized greeting
function generateGreeting(name, time) {
    return `Good ${time === 'morning' ? 'morning' : 'afternoon'}, ${name}!`;
}

// Using the function
console.log(generateGreeting('Alice', 'morning')); // Output: Good morning, Alice!
console.log(generateGreeting('Bob', 'afternoon')); // Output: Good afternoon, Bob!

Explanation:

• Inside the generateGreeting function, we use a ternary operator to choose the appropriate greeting ('morning' or 'afternoon'). The result is directly included in the template literal.
• When the function is called with different arguments, the appropriate greeting is returned and logged to the console.

Nesting Template Literals

Example 5: Nesting Template Literals

// Nested template literals example
function createUserBio(user) {
    return `Name: ${user.name}
            Age: ${user.age}
            Biography: ${`Once upon a time, ${user.name} was ${user.age} years old and loved to ${user.interest}.`}
            `;
}

const user1 = { name: 'Alice', age: 30, interest: 'read books' };
console.log(createUserBio(user1));
/*
Output:
Name: Alice
Age: 30
Biography: Once upon a time, Alice was 30 years old and loved to read books.
*/

Explanation:

• The createUserBio function generates a user's bio. Inside, it uses a nested template literal within the main template literal to create a detailed part of the biography.
• The function is then called with a user object and logs the complete bio.

Using Template Literals with HTML

Example 6: Using Template Literals with HTML

// Simulating user data
const user = {
    name: 'Alice',
    age: 30,
    city: 'Wonderland'
};

// Creating an HTML snippet using template literals
const userCard = `
    <div class="user-card">
        <h2>${user.name}</h2>
        <p>Age: ${user.age}</p>
        <p>City: ${user.city}</p>
    </div>
`;

// Simulating insertion of the HTML snippet into the DOM
document.body.innerHTML = userCard;

Explanation:

• We simulate a user object and then create an HTML snippet as a string using template literals.
• This HTML snippet is then inserted into the DOM using document.body.innerHTML.
• In real applications, you would typically append the HTML dynamically to an existing element in the DOM.

Conclusion

Template literals provide a more flexible and readable way to work with strings in JavaScript. From basic concatenation to multiline strings and expression interpolation, they simplify the creation of complex and dynamic strings easily.