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
ES6/ECMA6 template literals not working in JavaScript?
Template literals are a powerful and useful feature of the ECMAScript 6 (ES6) JavaScript language. However, there may be times when template literals do not work properly in your code.
This article will discuss some common issues you may encounter with template literals, as well as potential solutions for resolving them. Additionally, we'll provide an overview of what template literals are and how they can be used to create more efficient and readable code.
Template literals were known as template strings prior to ES6. Template literals are surrounded by the backtick (' ') character as opposed to quotes in strings. Placeholders, denoted by the dollar sign and curly braces ($(expression)), are allowable in template literals. If we want to use an expression, we can put it inside the backticks using the ($(expression)) symbol.
Syntax
Following is the syntax for template literals
var str = `string value`;
Let’s dive into the article to know more about ES6/ECMA6 template literals.
Multiline strings
When creating a multiline string from a regular string, we must use the escape sequence
. In contrast, there is no need to use
in template literals because strings end only when they encounter the backtick(') character.
Example
In the following example we are creating a multiline string template.
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<p>Tutorialspoint</p>
<script>
let text =`Welcome to Tp`;
document.getElementById("tutorial").innerHTML = text;
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of the text we used in the above script, which will be displayed on the web-browser, when the event gets triggered.
Example
In the following example we are using the template literals to allow expressions in strings.
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
let amount = 11;
let VAT = 0.5;
let total = `NET: ${(amount * (1 + VAT)).toFixed(2)}`;
document.getElementById("tutorial").innerHTML = total;
</script>
</body>
</html>
On running the above script, the web-browser displays, the value obtained when the event gets triggered as used in the above script on the webpage.
Example
Considering the following example, where we are using template literals to allow variables in string.
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
let firstName = "minion";
let lastName = "angrybird";
let text = `Welcome ${firstName}, ${lastName}!`;
document.getElementById("tutorial").innerHTML = text;
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of the text obtained when the event gets triggered and display it on the web-browser.
Example
Let’s look into the another example, where template literals use both single and double quotes inside a string.
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
let text = `johnny johnny "yes-papa."`;
document.getElementById("tutorial").innerHTML = text;
</script>
</body>
</html>
On running the above script, the event gets triggered and the web-browser displays the text on the webpage.
925 Views
