JavaScript ES6+ Free Crash Course 2025 - Key ES6+ Features - Template Literals Classes and Inheritance

Contents

In this tutorial of JavaScript free crash course 2025 we are going to explain other two major features template literals classes and inheritance cases in JavaScript. Previously we explained arrow functions destructuring and rest operators. Now let’s get to template literals tutorials.

JavaScript ES6+ Crash Course 2025 – Key ES6+ Features – Destructuring & Rest Operators

1.4 Template Literals

Template literals allow embedded expressions and multi-line strings. Here is the code example:


const name = 'Alice'; const age = 30;

// Basic usage
console.log(`Hello, ${name}!`);

// Multi-line strings const multiLine = `
This is a multi-line string.
`;

// Expression interpolation
console.log(`${name} is ${age} years old.`);

// Tagged template literals
function myTag(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${values[i] ? `(${values[i]})` : ''}`, '');
}

const output = myTag`${name} is ${age} years old.`;
console.log(output); // Alice (30) is (30) years old.

HERE ARE SOME IMPORTANT POINTERS

Use template literals for string interpolation and multi-line strings.
Consider tagged templates for complex string formatting or sanitization.

Common Pitfalls

Overusing expressions within template literals can reduce readability.
Be cautious with user-supplied data in template literals to prevent XSS attacks.

1.5 Classes and Inheritance

ES6 introduced a more intuitive syntax for creating classes and implementing inheritance.


class Animal {
constructor(name) { this.name = name;
}

speak() {
console.log(`${this.name} makes a sound.`);
}
}

class Dog extends Animal { constructor(name) {
super(name); // Call the parent constructor
}

speak() {
console.log(`${this.name} barks.`);
}
}

const dog = new Dog('Rex'); dog.speak(); // Rex barks.

// Static methods
class MathOperations { static add(x, y) {
return x + y;
}
}

console.log(MathOperations.add(5, 3)); // 8