What are template literals and how do you use them?

Question

What are template literals and how do you use them?

Answer

Template literals use backticks (`...`) instead of quotes and allow:

• Multi-line strings
• String interpolation with ${}
• Embedded expressions

const name = 'Ghazi';
const role = 'Engineer';
console.log(`Hello, my name is ${name}, and I am a ${role}.`);

They can also evaluate expressions:

const x = 10,
  y = 5;
console.log(`Sum: ${x + y}`); // Sum: 15

Real-World Example

They’re great for rendering HTML dynamically:

const user = { name: 'Ali', age: 25 };
const html = `
  <div>
    <h1>${user.name}</h1>
    <p>Age: ${user.age}</p>
  </div>
`;

Quick Practice

Use template literals to print your name, profession, and current date in one formatted string.

Summary

Template literals make strings smarter — cleaner syntax, dynamic values, and easier readability.