Tutorials Modern JavaScript (ES6+) for Beginners

Template Literals & Modern Strings

Learn Template Literals & Modern Strings in our free Modern JavaScript (ES6+) for Beginners series. Step-by-step explanations, examples, and interview tips on Toolliyo Academy.

5 min read Updated 9/4/2026

On this page

Course: Modern JavaScript (ES6+) for Beginners · Lesson: 4/12 · Read time: ~12 min · Level: Beginner · ES version: ES2015 (ES6) and above

Template Literals & Modern Strings

Template literals use backticks (`) instead of quotes. They make strings with variables, HTML snippets, and multi-line text readable — essential for UI work in React and email templates in Node.

Basic interpolation

const name = 'Sandeep';
const course = 'ES6 Basics';

// Old
const msg1 = 'Hi ' + name + ', welcome to ' + course;

// ES6 — template literal
const msg2 = `Hi ${name}, welcome to ${course}`;

Multi-line strings

const emailHtml = `
  <h1>Your certificate is ready</h1>
  <p>Hi ${student.name},</p>
  <p>You completed ${courseTitle}.</p>
`;

🌍 Real-world example — Dynamic quiz result message

function resultMessage({ name, score, total }) {
  const pct = Math.round((score / total) * 100);
  const badge = pct >= 80 ? '🏆' : '📚';
  return `${badge} ${name}: you scored ${score}/${total} (${pct}%).`;
}

resultMessage({ name: 'Priya', score: 18, total: 20 });
// "🏆 Priya: you scored 18/20 (90%)."

Useful string methods (ES6+)

'hello world'.includes('world');   // true
'  trim me  '.trim();              // 'trim me'
'file.pdf'.endsWith('.pdf');       // true
'user@email.com'.startsWith('user'); // true

💡 Tip: Use template literals for any string with 2+ variables — your code reviews will thank you.

⚠️ Common Mistake: Forgetting backticks and using single quotes with ${name} — that prints literal "${name}", not the variable.

👨‍🏫 Teaching note: Exercise: build an invoice string with 4 interpolated fields (customer, item, qty, total).