Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/javascript/javascript-template-literals/ below:

JavaScript Template Literals - GeeksforGeeks

Last Updated : 31 Jul, 2025

Template literals are string literals that allow embedded expressions (variables) into your code. They are enclosed by backticks (`) instead of single (') or double (") quotes.

It was introduced in ES6, which provides a more flexible and readable way to work with strings. Unlike traditional string concatenation, template literals simplify the process of embedding expressions, multi-line strings, and variable interpolation.

Syntax

`string text ${expression} string text`

• Backticks (``): Used to define a template literal.
• ${}: Used to insert expressions inside the string, such as variables, function calls, or arithmetic operations.

Basic Example

let a='GFG'
console.log(`hello ${a}`)

• Embedding a variable: The template literal `hello ${a}` is used to insert the value of the variable a (which is 'GFG') directly into the string, producing the output "hello GFG".
• Cleaner string concatenation: Instead of using + for string concatenation, template literals allow a more readable and convenient way to embed variables and expressions inside strings.

String interpolation lets you insert not just variables but also expressions, like math operations or function results, directly into a string.

let x = 5;
let y = 10;
console.log(`The sum of ${x} and ${y} is ${x + y}`);

The sum of 5 and 10 is 15

• Expression evaluation: Inside ${}, expressions like x + y are evaluated, and the result is inserted into the string.
• Dynamic string creation: This technique allows you to dynamically create strings by combining variables and expressions, making the code cleaner and easier to read.

Template literals allow you to create multi-line strings easily without needing escape characters like \n.

const s = `This is a multi-line
string that spans across
several lines.`;
console.log(s);

This is a multi-line
string that spans across
several lines.

• Multi-line support: Template literals preserve line breaks, so the string appears exactly as it’s written, making multi-line strings easier to handle.
• No need for escape characters: You don’t need to use \n to break lines within the string; template literals automatically handle it.

Tagged template literals allow you to customize how the string is processed, providing more control over string creation.

function greet(strings, name) {
    return `${strings[0]}${name.toUpperCase()}${strings[1]}`;
}

const name = 'gfg';
console.log(greet`Hello, ${name}!`);

• In this code the string Hello,! is passed as an array in which the 0th index contains Hello, and the second index contains !
• In the second parameter name is passed as gfg which is then converted to uppercase and then finally the concatenated content of the array and the value of the name parameter is combined and returned by the function.

In JavaScript, if you need to include backticks or dollar signs inside template literals, you can escape them using a backslash (\).

const s = `This is a backtick: \` and this is a dollar sign: \$`;
console.log(s);

This is a backtick: ` and this is a dollar sign: $

• Escaping Backticks: To include a backtick inside a template literal, you escape it with ``` to avoid ending the string.
• Escaping Dollar Signs: Similarly, if you need to include a dollar sign ($) without triggering an expression inside ${}, you escape it with \$.

Template literals support multi-line strings without special characters. This example displays a simple poem.

const poem = `Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!`;
console.log(poem);

Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!

• Backticks allow multi-line strings naturally.
• Line breaks are preserved as written.
• The console.log outputs the formatted string.

Embedding arithmetic expressions within template literals. This example calculates the sum dynamically.

const a = 5, b = 10;
const result = `Sum of ${a} and ${b} is ${a + b}.`;
console.log(result); 

Sum of 5 and 10 is 15.

• ${a + b} evaluates the sum of a and b.
• The result (15) is inserted into the string.
• The console.log outputs the complete sentence.

Tags process template literals directly, modifying how strings and placeholders are combined.

function tag(strings, ...values) {
    return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), '');
}
const output = tag`Hello, ${"Saran"}!`;
console.log(output);

• The function receives the static parts as an array and interpolated values separately.
• Returns a correctly formatted string without additional concatenation.

Template literals build HTML strings dynamically. This example creates an h1 element.

const title = "Welcome";
const html = `<h1>${title}</h1>`;
console.log(html); 

• ${title} inserts the variable title into the string.
• The result is <h1>Welcome</h1>.
• Such templates are useful in dynamic web content generation.

Ternary operators evaluate conditions within template literals. This example displays a role based on a condition.

const isAdmin = true;
const userRole = `User role: ${isAdmin ? "Admin" : "Guest"}.`;
console.log(userRole);

• ${isAdmin ? "Admin" : "Guest"} evaluates the condition.
• "Admin" is inserted when isAdmin is true.

Loops generate dynamic content within templates. This example creates a list of items.

const items = ["apple", "banana", "cherry"];
const list = `Items: ${items.map(item => `\n- ${item}`)}`;
console.log(list);

Items: 
- apple,
- banana,
- cherry

• items.map transforms each item into a string with \n- prefix.
• join combines the strings into one.

Template literals call functions directly. This example transforms text to uppercase.

const toUpper = str => str.toUpperCase();
const s = `Shouting: ${toUpper("hello")}`;
console.log(s); 

• ${toUpper("hello")} invokes the function.
• The result ("HELLO") is inserted into the string.
• Template literals support embedding any valid expression.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4