ES6/ECMA6 template literals not working in JavaScript?

Javascript Web Development Front End Technology

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.