JavaScript Template Literal

A template literal in JavaScript is a type of string literal that allows for embedded expressions, represented by expressions inside ${}. They are indicated by using backticks (“) instead of quotes (” or ‘).

Example:

const name = "John";
const sentence = `Hello, my name is ${name}.`;
console.log(sentence); 
// Output: "Hello, my name is John."

Template literals provide an easier and more readable way to create strings with dynamic content, compared to string concatenation using the plus operator.

Here are some more examples of using template literals:

1. Concatenating strings and expressions:

const firstName = "John";
const lastName = "Doe";
const fullName = `${firstName} ${lastName}`;
console.log(fullName); // Output: "John Doe"

2. Interpolating values into a string:

const age = 30;
const message = `I am ${age} years old.`;
console.log(message); // Output: "I am 30 years old."

3. Creating multi-line strings:

const poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poem); 
/* Output: 
Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.
*/

4. Using expressions to evaluate conditions:

const num = 10;
const message = `The number is ${num > 5 ? "greater than 5" : "smaller than or equal to 5"}.`;
console.log(message); // Output: "The number is greater than 5."

10 Examples of Using JavaScript Template literals

1. Concatenating multiple expressions:

const a = 10;
const b = 20;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // Output: "The sum of 10 and 20 is 30."

2. Displaying arrays:

const colors = ["red", "green", "blue"];
const message = `My favorite colors are ${colors.join(", ")}.`;
console.log(message); // Output: "My favorite colors are red, green, blue."

3. Using ternary operator to conditionally display values:

const score = 75;
const result = `You ${score >= 50 ? "passed" : "failed"} the exam.`;
console.log(result); // Output: "You passed the exam."

4. Creating a string with a function call:

const date = new Date();
const message = `Today's date is ${date.toDateString()}.`;
console.log(message); // Output: "Today's date is Mon Jan 30 2023."

5. Displaying the result of a calculation:

const radius = 10;
const message = `The area of a circle with a radius of ${radius} is ${Math.PI * radius * radius}.`;
console.log(message); // Output: "The area of a circle with a radius of 10 is 31.42..."

6. Displaying the result of a method call:

const name = "John Doe";
const message = `The upper case of ${name} is ${name.toUpperCase()}.`;
console.log(message); // Output: "The upper case of John Doe is JOHN DOE."

7. Displaying an object property:

const person = {
  name: "John Doe",
  age: 30
};
const message = `${person.name} is ${person.age} years old.`;
console.log(message); // Output: "John Doe is 30 years old."

8. Displaying an array element:

const names = ["John", "Jane", "Jim"];
const message = `The second name is ${names[1]}.`;
console.log(message); // Output: "The second name is Jane."

9. Displaying a formatted number:

const num = 12345.6789;
const message = `The formatted number is ${num.toFixed(2)}.`;
console.log(message); // Output: "The formatted number is 12345.68."

10. Using a template literal within another template literal:

const firstName = "John";
const lastName = "Doe";
const message = `My full name is "${`${firstName} ${lastName}`}".`;
console.log(message); // Output: "My full name is "John Doe"."