JavaScript has never had an elegant way of handling string until the launch of ES6. ES6 introduces something know as template literals, which enable JavaScript to handle multiples lines of strings more efficiently and elegantly. Syntax For Template Literals Template literals do not intend to add additional functionality to the existing JavaScript stings but try to solve the problem in a new way. Hence, the introduction of the new syntax. Instead of using single quotes or double quotes, you can delimit strings using backticks (`). earlierStrings = ; templateLiterals = ; .log( earlierStrings); .log( templateLiterals); // This is how strings were declared pre ES6 var 'How strings were declared pre ES6' // Declaring strings using template literals in ES6 let `How strings can be declared post ES6` console typeof // "string" console typeof // "string" Template Literals Are An Answer To Multiline Strings In JavaScript Multiline strings have always been a problem pre ES6 because the strings were declared using double quotes and single quotes. This was a problem because when you are declaring strings using double quotes or single quotes, the stings must completely be contained in a single line. Let’s look at how developers used to insert multiple lines of HTML in your JavaScript code to understand how template literals can be a boom. profile = + + + + + ; var '' '    <div class="profile">\n' '\n' '        <div class="name">John Doe </div>\n' '\n' '        <div class="designation">Web Developer</div>\n' '\n' '    </div>\n' You can certainly see the multiple lines of concatenation and each string being contained to a single line single it has been declared using single quotes. This can be simplified using template literals using the following syntax. profile = .trim(); let `
<div class="profile">

    <div class="name">John Doe </div>

    <div class="designation">Web Developer</div>

</div>` With template literals, it’s super clean and easy. The trim function has been used to get rid of the empty space before the div tag and is not mandatory. Populating data dynamically using template literal substitutions Template literals are not just a fancy way of declaring strings in ES6. The real power of template literals can be understood using the substitutions. Using substitutions you can dynamically populate data within the strings declared using template literals much like you would be able to do using a templating engine. Let’s look at the following example: data = { : , : } profile = .trim(); let name 'John Doe' designation 'Web Developer' let `
<div class="profile">

    <div class="name"> </div>

    <div class="designation"> </div>

</div>` ${date.name} ${data.designation} Substitutions can be used to using the following syntax . If you consider the above code example you would realize that the substitutions can contain JavaScript expressions within them. Having the ability to compute JavaScript expressions within substitutions makes them really powerful and an inviting feature to ES6. ${} Tagged Template Literals Template literals can have a tag preceding a declaration of the template literal itself. This tag acts like a normal javascript function that returns an array of literals as well as the substitutions within the function itself. The literals and the substitutions can then be used within the function and manipulated to return the data that is needed and that would act as the final output of the template literal. Lets first declare a template literal and then assign a tag to it. data = { : , : } profile = .log(profile); let name 'John' age '30' let `My name is and I am years old.` ${data.name} ${data.age} console // "My name is John and I am 30 years old." This is a simple template literal. Now we can prefix the profile template literal with a new tag which will act as a function name and then we can use the literals and the substitutions within the function. Here is how you would do it. { .log(literals); .log(substitutions); } data = { : , : } profile = tagFunction ( ) function tagFunction literals, ...substitutions console // Returns: ["My name is ", " and I am ", " years old."] console //  Returns: ["John", "30"] let name 'John' age '30' let `My name is and I am years old.` ${data.name} ${data.age} In the above example, you can see that the literals and substitutions are provided as parameters are available in the form of an array within the function. You can use this information to manipulate the data within the template literal and return a completely new string. { } data = { : , : } profile = tagFunction .log(profile); ( ) function tagFunction literals, ...substitutions return ` Steve 25 ` ${literals [ ]} 0 ${literals [ ]} 1 ${literals [ ]} 2 let name 'John' age '30' let `My name is and I am years old.` ${data.name} ${data.age} console // "My name is Steve and I am 25 years old." Using the in the above example we have been able to override the string that is returned by the template literal completely. This is just a small example but should give you a fair idea of the functionality it adds to JavaScript strings. tagFunction() Previously published at https://cloudaffle.com/template-literals-in-javascript/

Super

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - DEVELOPER.

2020 - Hacker Noon Contributor of the Year in DEVELOPER

Download My JavaScript CheatSheet

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

What Are Template Literals In Javascript And Why You Should Use Them

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Manik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

What Are Template Literals In Javascript And Why You Should Use Them

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Manik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES