• Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JS String Templates

← Previous Next →

📘 JavaScript String Templates – Template Literals in ES6

Template literals (also known as template strings) allow you to embed variables and expressions inside a string using backticks `, and ${...} syntax.

Introduced in ES6, template literals are more flexible than regular strings.

🔹 Syntax

let name = "John";
let greeting = `Hello, ${name}!`;  // Output: Hello, John!

✅ Template literals are enclosed in backticks: `, not quotes.

🔹 Features of Template Literals

Feature Description Example
Variable interpolation Embed variables using ${} `Hello, ${name}`
Expression evaluation Perform operations inside ${} `2 + 2 = ${2 + 2}` → 2 + 2 = 4
Multiline support Supports multiline strings without \n `Line1\nLine2` prints as two lines
Function calls Can call functions inside ${} `Welcome ${getName()}`

🔹 Examples

let product = "Book";
let price = 299;
let message = `The price of ${product} is ₹${price}.`;
console.log(message);  // Output: The price of Book is ₹299

let multiline = `This is line 1
This is line 2`;
console.log(multiline);

🔹 Expressions in Template Strings

let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}`;
console.log(result); // "The sum of 5 and 10 is 15"

Practice Questions

Q1. How do you include a variable user = "Alice" in the string "Welcome, Alice!" using a template literal?

Q2. How do you print a multiline message using a single template string?

Q3. What is the output of this code: `2 + 3 = ${2 + 3}`?

Q4. How can you display "Total: $100" by inserting a variable amount = 100 into the string?

Q5. How do you write "Today is Sunday" using a variable day = "Sunday" and a template literal?

Q6. How do you call a function getUserName() inside a template literal to greet the user?

Q7. What happens if you use single or double quotes instead of backticks with ${}?

Q8. How do you use a template literal to combine two variables: first = "Good" and second = "Morning"?

Q9. Write a string using template literals to display "10 * 2 = 20" by evaluating inside ${}.

Q10. How do you show "Length of name is 4" using a variable name = "John"?

JS String Templates Quiz

Q1: Which character is used to define a template literal?

A. ' (single quote)
B. " (double quote)
C. ` (backtick)
D. ~

Q2: What does `Hello, ${"World"}` return?

A. "Hello, World"
B. Hello ${World}
C. "Hello, ${World}"
D. Error

Q3: Which of the following is NOT a feature of template literals?

A. Multiline strings
B. Variable interpolation
C. Regular expression support
D. Expression evaluation

Q4: What is the output of `5 + 3 = ${5 + 3}`?

A. "5 + 3 = ${5 + 3}"
B. "5 + 3 = 8"
C. "8"
D. Error

Q5: Which of the following will correctly output My age is 25?

A. "My age is ${age}"
B. 'My age is ${age}'
C. `My age is ${age}`
D. (My age is age)

Q6: How do you write a template string over two lines?

A. Using \n in double quotes
B. Using backticks without \n
C. Using multiple double quotes
D. Using .concat()

Q7: What is the result of: `The result is ${4 * 5}`?

A. "The result is 4 * 5"
B. "The result is 20"
C. "The result is ${20}"
D. Error

Q8: Which operator is used inside template literals to insert values?

A. +
B. $
C. ${}
D. #

Q9: What does `Your score is ${score}` return if score = 90?

A. "Your score is ${score}"
B. "Your score is 90"
C. "score = 90"
D. Error

Q10: Which version of JavaScript introduced template literals?

A. ES3
B. ES5
C. ES6
D. ES7
← Previous Next →
Login
Go Back Top