-
JS Setting Up Environment
-
JS Syntax
-
JS Comments
-
JS Generating OutPut
-
JS Variables
-
JS Data Types
-
JS String
-
JS String Methods & Properties
-
JS Template Literals
-
JS Operators
-
JS Conditional Statements
-
JS Break and Continue
-
JS Functions
-
JS DOM
-
JS DOM Methods and Elements
-
JS DOM HTML/CSS Manipulation
-
JS DOM Navigation & Nodes
-
JS Events
-
JS Array
-
JS Loops
-
JS Object
-
JS Accessors
-
JS Object Constructors
-
JS Prototype & Iterables
-
JS Date & Time Function
-
JS Math Function
-
JS Storage
-
JS Classes
-
JS Map & Set
-
JS Global Scope
-
JS Rest and Spread
-
JS Error Handling
-
JS Asynchronous
-
JS Promise
-
JS Async/Await
-
JS Node.js
-
JS Regular Expression
-
JS Fetch API
-
JS BOM
-
JS Form Validation
-
JS Practiced Example
-
JS Projects
JavaScript Template Literals
Template literals are a feature introduced in ECMAScript 6 (ES6) that allows you to embed expressions within string literals, enabling more flexible and readable code.
Example
// Using template literals
const name = “John”;
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, John!
In the example above, the ${name} syntax embeds the variable name within the string. This makes it easy to create dynamic strings based on variables.
Using Template Literals in HTML
Template literals are commonly used in conjunction with HTML to create dynamic templates. Here’s an example of how you might use them:
In this example, the template literal creates an HTML structure with dynamic content based on the name variable. The JavaScript code then injects this template into an element with the ID “app” in the HTML document.
Course Video
Examples for Practice
You have to solve all the questions given below in the editor without copy-pasting.
1. Write a program in JavaScript and use backticks to create a multi-line string. and display the result with accessing variables.
The task is to create a JavaScript program that uses backticks to define a multi-line string and performs the following tasks:
1. The program starts by defining three variables: name = John, age =25, and city = New York.
2. Create a Multi-line String: The backticks (`) are used to create a multi-line string. Inside the string, ${variable} syntax is used to include the values of variables within the string.
3. Display the result, which includes the multi-line string with variable values
using console.log().
Here’s a JavaScript program that uses backticks to create a multi-line string and displays the result by accessing variables:
// Variables
let name = “John”;
let age = 25;
let city = “New York”;
// Multi-line string using backticks
let message = `
Hello there!
My name is ${name}.
I am ${age} years old.
I live in ${city}.
Have a great day!
`;
// Display the result
console.log(message);
Output
2. Write a program that prompts the user to input their name, and then uses string backticks to output a welcome message using their name.
The task is to create a JavaScript program that interacts with the user by prompting them to input their name. After obtaining the user’s name, the program should use string backticks (template literals) to generate a welcome message that incorporates the user’s name. Let’s break down the steps:
1. Prompt for User Input: The program should use the prompt function to request the user to enter their name. The entered name is then stored in a variable, here named userName.
2. Create a Welcome Message: Utilize string backticks to create a template literal. Inside this template, include the user’s name using the ${userName} syntax. This allows you to dynamically insert the user’s name into the string.
3. Display the Result: Use console.log() to output the welcome message to the console. This way, the program informs the user with a personalized greeting.
Here’s a simple JavaScript program that prompts the user to input their name and then uses string backticks to output a welcome message:
// Prompt user to input their name
let userName = prompt(“What is your name?”);
// Create a welcome message using backticks
let welcomeMessage = `Welcome, ${userName}!`;
// Display the welcome message
console.log(welcomeMessage);
Output
