---
title: "What are template literals in JavaScript, and how do you use them?"  
description: "What are template literals in JavaScript, and how do you use them?"  
author: "Revati S Misra"  
published: 2024-06-26  
updated: 2024-06-26  
canonical: https://www.mindstick.com/forum/160787/what-are-template-literals-in-javascript-and-how-do-you-use-them  
category: "javascript"  
tags: ["javascript", "javascript object"]  
reading_time: 2 minutes  

---

# What are template literals in JavaScript, and how do you use them?

What are [template](https://www.mindstick.com/blog/282/creating-custom-template-in-joomla) literals in JavaScript, and how do you use them?

## Replies

### Reply by Ashutosh Patel

#### JavaScript Template Literals

Template literals introduced in ECMAScript 6 (ES6) provide a way to embed words and multiline strings in JavaScript. They provide a simpler and more readable syntax than traditional concatenation methods.

## Syntax-

Template literals are enclosed by backticks `(`)` rather than single quotes `(' ')` or double quotes `(" ")`.

```javascript
let greeting = `Hello, world!`;
```

#### Features of Template Literals

**Embedded Expressions**\
You can add JavaScript expressions to template literals using the `${}` syntax.\
Expressions in `${}` are evaluated, converted to strings, and inserted into template literals.

```javascript
let name = 'Alice';
console.log(`Hello, ${name}!`); // Output: "Hello, Alice!"
```

**Multiline Strings**\
Template literals can span **multiple lines** without the need for `\n` and other escape characters.

```javascript
let multiline = `This is
a multiline
string`;
console.log(multiline);
// Output:
	 "This is
	 a multiline
	 string"
```

**Expression Interpolation**\
Template literals allow you to add variables and expressions directly to a string, making it easier to create strings with dynamic content.

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

Tagged Templates\
Advanced functions use "**tagged templates**", where a function (tag) can process the template itself and its input before outputting the final string.

```javascript
function myTag(strings, ...values) {
  console.log(strings); // Array of string literals
  console.log(values); // Array of interpolated values
  return 'Processed string'; // Processed result
}

let a = 10;
let b = 5;
let processed = myTag`The sum of ${a} and ${b} is ${a + b}.`;
console.log(processed); // Output: "Processed string"
```

#### Benefits of template literals

**Readability-** The readability of complex strings is improved by allowing variables and expressions to be entered directly.\
**Maintenance-** Easy to maintain compared to traditional wiring methods.\
**Multiline Support-** Simplifies multiple line wiring without complicated joins or nine line lines.

#### Compatibility

Template literals are supported in both modern browsers and versions of Node.js that support ES6 and later.

**Also, Read:** [Explain the concept of prototypal inheritance in JavaScript.](https://www.mindstick.com/forum/160786/explain-the-concept-of-prototypal-inheritance-in-javascript)


---

Original Source: https://www.mindstick.com/forum/160787/what-are-template-literals-in-javascript-and-how-do-you-use-them

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.