Template literals in JavaScript | Lecture 4

 

Template literals in JavaScript, introduced in ES6, provide an easy and flexible way to create strings. They allow embedding expressions, multiline strings, and more.

Syntax

Template literals are enclosed by backticks (`), not quotes.

Features

1. String Interpolation

Embed variables or expressions directly in a string using ${expression}.

Example:

const name = "John";

const age = 25;

 

const message = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(message);

// Output: Hello, my name is John and I am 25 years old.

2. Multiline Strings

Template literals allow creating multiline strings without using \n or concatenation.

Example:

const paragraph = `This is a multiline string.

You can write as many lines as you want

without using escape characters.`;

console.log(paragraph);

/*

Output:

This is a multiline string.

You can write as many lines as you want

without using escape characters.

*/

3. Expression Evaluation

You can include any JavaScript expression inside ${}.

Example:

const a = 5;

const b = 10;

 

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);

// Output: The sum of 5 and 10 is 15.

4. Tagged Templates

Tagged templates allow you to modify the output of a template literal by calling a function (called a "tag") before producing the string.

Example:

function emphasize(strings, ...values) {

    return strings.reduce((result, str, i) => result + str + (values[i] ? values[i].toUpperCase() : ""), "");

}

 

const name = "John";

const emotion = "happy";

 

const message = emphasize`Hello ${name}, I hope you're feeling ${emotion} today!`;

console.log(message);

// Output: Hello JOHN, I hope you're feeling HAPPY today!

5. Nested Template Literals

You can nest template literals for complex string generation.

Example:

const name = "Alice";

const items = ["apples", "bananas", "cherries"];

 

const message = `Hello, ${name}. You have ${items.length} items: ${items.map(item => `${item}`).join(", ")}.`;

console.log(message);

// Output: Hello, Alice. You have 3 items: apples, bananas, cherries.

6. Using Functions Inside Template Literals

You can call functions directly inside ${}.

Example:

const toUpperCase = str => str.toUpperCase();

 

const greeting = `Welcome, ${toUpperCase("visitor")}!`;

console.log(greeting);

// Output: Welcome, VISITOR!

7. HTML Templates

Template literals are useful for embedding HTML.

Example:

const title = "Welcome!";

const content = "This is a dynamic HTML template.";

 

const html = `

    <div>

        <h1>${title}</h1>

        <p>${content}</p>

    </div>

`;

console.log(html);

// Output: (formatted HTML string)

Key Benefits

  • Simplifies string manipulation.
  • Makes code cleaner and easier to read.
  • Supports multiline strings without cumbersome syntax.

Template literals are especially powerful when working with dynamic content, such as in web development or generating formatted output.

 

Comments

Post a Comment

Popular posts from this blog

Classes and Objects in Javascript | Lecture 10

  In JavaScript, classes are templates for creating objects, and objects are instances of classes. Classes encapsulate data and methods to model real-world entities. Declaring a Class A class is defined using the class keyword, and it typically contains: Constructor : A special method for initializing the object. Methods : Functions defined within the class. Example: Creating a Class and an Object class Person {   // Constructor to initialize the object   constructor(name, age) {     this.name = name; // Instance property     this.age = age;   }     // Method   greet() {     return `Hello, my name is ${this.name} and I am ${this.age} years old.`;   } }   // Create an object (instance) of the class const person1 = new Person("John", 30);   // Access properties and methods console.log(person1.name); // Output: John console.log...
Read more

Destructuring in JavaScript | Lecture 5

  Destructuring in JavaScript is a syntax for unpacking values from arrays or properties from objects into distinct variables. This feature simplifies extracting data, making your code cleaner and more readable. Here are examples of destructuring for both arrays and objects: 1. Destructuring Arrays const fruits = ['apple', 'banana', 'cherry'];   // Basic Destructuring const [first, second] = fruits; console.log(first); // "apple" console.log(second); // "banana"   // Skipping Elements const [, , third] = fruits; console.log(third); // "cherry"   // Default Values const [a, b, c = 'default fruit'] = ['mango', 'pear']; console.log(c); // "default fruit"   // Rest Pattern const [d, ...rest] = fruits; console.log(rest); // ["banana", "cherry"] 2. Destructuring Objects const user = {   name: 'John',   age: 30,   count...
Read more

ECMA Script 6 Introduction of topics | Lecture 1

Image
ECMA Script 6 Introduction of topics 1. Let and Const let : Block-scoped variable. const : Block-scoped constant. let x = 10; x = 20; // Allowed   const y = 30; // y = 40; // Error: Assignment to constant variable   2. Arrow Functions Concise syntax for defining functions. // Regular function function add(a, b) {   return a + b; }   // Arrow function const add = (a, b) => a + b;   console.log(add(5, 3)); // Output: 8   3. Template Literals For string interpolation and multiline strings. const name = "John"; const greeting = `Hello, ${name}!`; console.log(greeting); // Output: Hello, John!   const multiline = `This is a multiline string.`; console.log(multiline);   4. Default Parameters Default values for function parameters. function greet(name = "Guest") {   return `Hello, ${name}!`; }   console.log(greet()); // Output: Hello, Guest! console.log(greet(...
Read more