Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use template string literal in ECMAScript 6?
In the ES6 version of JavaScript, literals are introduced. JavaScript contains object literals, array literals, Numeric literals, RegExp literals, etc. Also, it contains the string literals.
The string literal allows us to create multiline strings without any backslash characters, add any word or sentence to the quote, and add variables and mathematical expressions in between the strings.
Syntax
Users can follow the syntax below to use the template string literal in ECMAScript 6.
let string = `This is template literal string!`;
In the above syntax, we have used the backticks (` `) to create a template literal string.
Example 1 (Multiline Strings)
In the example below, we used the template literal string to create a multiline string. Whenever we create a string with quotes, we need to use the ‘
’ character to create a new line, but with string literals, we can achieve it by writing a string in the new line.
In string1, the new line is created by writing a string in the new line, and in string2, we have used the ‘
’ character to create a new line. Users can observe the string1 and string2 in the output, which appear the same.
let string1 = `This is first line. This is the second line. This is the third line. This is the fourth line.`; console.log(string1); // added
character to create a multiline string. let string2 = "Welcome on the
TutorialsPoint!"; console.log(string2);
Example 2 (Quotes in the String)
We can use the template string literals to add quotes inside the string. When we create a string with a double quote, we can only add a single quote to the string, and when we create a string with a single quote, we can only add a double quote to the string.
We have added the single quote in the string of stringQuote variable using the string literals.
<html>
<body>
<h2>Using the <i>template string literals</i> to add quotes in the string.</h2>
<div id = "output"></div>
</body>
<script>
var output = document.getElementById('output');
let stringQuotes = `This is a 'template string literals' with a quote.`;
output.innerHTML += stringQuotes + "<br/>";
let string1 = "This is 'similar to template string literals'." + "<br/>";
output.innerHTML += string1;
</script>
</html>
Example 3 (Variables in the String)
In the example below, we have done variable substitution in the string. Generally, to use variables with the string, we need to use the ‘+’ operator and concat multiple strings, but template string literal allows us to add variables directly in the string. We can add the variable inside the ${} expression.
In the variableStr variable’s value, we have inserted the name, job and timePeriod variables.
<html>
<body>
<h2>Using the <i>template string literals </i> to add variables in the string.</h2>
<div id = "output"> </div>
</body>
<script>
var output = document.getElementById('output');
let name = "Shubham";
let job = "Content writer";
let timePeriod = "1 Year";
let variableStr = `Using template string literals :- ${name} is a ${job} at TutorialsPoint from last ${timePeriod}.`;
output.innerHTML += variableStr + "<br/>";
let string = "Using Quotes :- " + name + " is a " + job + " at TutorialsPoint from last " + timePeriod + ". ";
output.innerHTML += string + "<br/>";
</script>
</html>
Example 4 (Expression in the String)
In this example, we will use the template string literals to add mathematical expressions in the string. In the sumString, we have added the mathematical expression inside the ${}. Users can see how we have done the sum of num1 and num2 in the string literals.
Also, we have done a multiplication of 2 values in the string2.
<html>
<body>
<h2>Using the <i> template string literals </i> to add expression in the string.</h2>
<div id = "output"> </div>
</body>
<script>
var output = document.getElementById('output');
let num1 = 10;
let num2 = 40;
let sumString = `The sum of ${num1} and ${num2} is ${num1 + num2}`;
output.innerHTML += sumString + "<br>";
let string2 = `The multiplication of 20 and 5 is ${20 * 5}`;
output.innerHTML += string2 + "<br>";
</script>
</html>
Example 5 (HTML in the String)
We can create a row HTML using the template string literal and add it to the webpage. In this example, we have created the HTML list using the string literals and used the innerHTML property of the <div> to add row HTML in the webpage.
<html>
<body>
<h2>Using the <i>template string literals</i> to add HTML to the document.</h2>
<div id = "output"> </div>
</body>
<script>
var output = document.getElementById('output');
let HTMLString = `<ul> <li> One </li> <li> Two </li> <li> Three </li> <li> Four </li> <li> Five </li> </ul>`;
output.innerHTML = HTMLString;
</script>
</html>
Users learned to use the template string literals in JavaScript. We have seen how to create a multiline string, variable, and expression substitution, add quotes and create row HTML using the template string literals.
169 Views
