ES6++: 4- Template Literals

Introduction

In this article we will learn about Template literals which is one of the most important features of ES6.

What is a template literal?

A template literal is a string that allows embedded expressions. You can use multi-line strings and string interpolation features with them.

How to use template literals?

To use template literals you need to use backticks () instead of quotes (' or ") and you can use${}` to embed expressions.

`js
const name = 'Hasan';

const greeting = Hello ${name};

console.log(greeting); // Hello Hasan
`

Multi-line strings

You can use template literals to create multi-line strings.

js
const multiLine =This is a
multi-line string`;

console.log(multiLine);// This is a
// multi-line string
`

Tagged template literals

You can use template literals with a function to create a tagged template literal.

`js
function tag(strings, ...values) {
console.log(strings); // [ 'Hello ', '!' ]
console.log(values); // [ 'Hasan' ]
}

tagHello ${name}!;
`

As you can see, we call the function that receives the template literal and pass the template literal as an argument, the function receives two arguments, the first one is an array of strings and the second one is an array of values.

The function call does not have parentheses after it, this is because the function is called as a tag of the template literal.

Raw strings

You can use raw property of the strings argument to get the raw strings.

`js
function tag(strings, ...values) {
console.log(strings.raw[0]); // Hello \n
}

tagHello \n;
`

Difference between template literals and single and double quotes

Let's see the major difference between template literals and single and double quotes.

• Template literals allow you to use multi-line strings.
• Template literals allow you to use string interpolation, AKA using variables, constants and function calls inside the string without the need of concatenation.
• Template literals allow you to use tagged template literals.
• Template literals allow you to use raw strings.

🎨 Conclusion

Overall, If you're going to use variables or functions inside a string, you should use template literals instead of single and double quotes.

☕♨️ Buy me a Coffee ♨️☕

If you like my articles and work, you can buy me a coffee, it will help me to keep going and keep creating more content.

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

• Event Driven Architecture: A Practical Guide in Javascript
• Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
• After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL

Packages & Libraries

• Collections: Your ultimate Javascript Arrays Manager
• Supportive Is: an elegant utility to check types of values in JavaScript
• Localization: An agnostic i18n package to manage localization in your project

React Js Packages

• useFetcher: easiest way to fetch data in React Js

Courses (Articles)

• Node Js 2023 Course: Node With Typescript, The Ultimate Guide
• React Js: Let"s Create File Manager With React Js and Node Js