Why should I use backticks instead of regular quotes?

If you've been coding in JS for a while, you're used to using 'single' or "double" quotes. They work fine for simple strings, but they become a nightmare the moment you need to mix variables with text. You end up with this "plus-sign soup" where you're constantly opening and closing quotes and adding spaces manually.

Backticks (the key usually found right above your Tab key) introduce Template Literals. I start using these the second I know a string needs to be dynamic. They make your code much more readable because the string looks like the actual output, rather than a puzzle of concatenated fragments.

How do I actually plug variables into the string?

The magic happens with the ${} syntax, which we call interpolation. Anything you put inside those curly braces is treated as JavaScript, not as plain text.

Let's say you're building a notification for a user. Compare these two ways of doing the same thing:

// The old, clunky way
const username = 'PixelArtist';
const alerts = 5;
const message = 'Hey ' + username + ', you have ' + alerts + ' new notifications in your inbox!';

// The template literal way
const messageLiteral = `Hey ${username}, you have ${alerts} new notifications in your inbox!`;

See how the second one reads like a natural sentence? I don't have to worry about accidentally forgetting the space before "you have" or getting lost in a sea of + symbols. It's just cleaner.

Can I actually make a string span multiple lines?

Yes, and this is probably the feature I use most often. In the past, if you wanted a string to go to a new line, you had to insert \n characters or keep concatenating strings line by line. It was tedious and looked terrible in the editor.

With template literals, the whitespace is preserved. If you hit Enter in your code, it hits Enter in the output. This is a total game-changer when you're generating small chunks of HTML dynamically:

const user = { name: 'Jane Doe', role: 'Admin' };

const userCard = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>Role: ${user.role}</p>
  </div>
`;

I personally love this because the code in my editor now actually resembles the structure of the HTML it's producing.

Is it just for variables, or can I run logic in there?

You can put any valid JavaScript expression inside those curly braces. This includes math, function calls, or even ternary operators for quick "if/else" logic. I often use this to handle pluralization so my UI doesn't look robotic.

Check this out:

const itemsInCart = 1;
const cartStatus = `You have ${itemsInCart} ${itemsInCart === 1 ? 'item' : 'items'} in your cart.`;

console.log(cartStatus); // "You have 1 item in your cart."

Just a word of caution: don't overdo it. If you find yourself writing a massive, complex logic chain inside a template literal, it's time to move that logic into a separate variable or function. Keep the templates readable, or you're just trading one mess for another.

📋 Practical Task

Build a Dynamic Order Receipt

You are building a checkout system for a small coffee shop. Create a set of variables for a customer's order: customerName, item, quantity, and pricePerItem.

Using a single template literal, create a formatted receipt string that looks exactly like this (filling in the variables):

--- ORDER RECEIPT ---
Customer: [customerName]
Item: [item] x [quantity]
Total: $[totalPrice]
--------------------

Requirement: You must calculate the totalPrice (quantity multiplied by pricePerItem) directly inside the ${} interpolation brackets of your template literal.