What is the importance of ES6's template strings in JavaScript?

Javascript Object Oriented Programming Front End Technology

ES6's template strings is a new way to combine strings. We already have methods such as join(), concat() etc to combine strings but the template strings method is the most sophisticated because it’s more readable, no backslash to escape quotes and no more messy plus operators.

Using concat() and join()

Example

In the following example join() and concat() methods are used to combine strings. If we observe carefully the code looks very messy.

Live Demo

<html>
<body>
<script>
   const platform = 'Tutorix';
   const joinMethod = ['The', 'best', 'e-learning', 'platform', 'is', platform].join(' ');
   document.write(joinMethod);
   document.write("</br>");
   const concatMethod = " ".concat('The ', 'best ', 'e-learning ', 'platform ', 'is ', platform);
   document.write(concatMethod);
</script>
</body>
</html>

Output

The best e-learning platform is Tutorix
The best e-learning platform is Tutorix

Using ES6's Template Strings

Example

In the following example, the template strings method is used to combine strings. If we compare this method with other methods, the code in this method is very concise and readable.

Live Demo

<html>
<body>
<script>
   const platform = 'Tutorix';
   const templateString = `The best e-learning platform is ${platform}`;
   document.write(templateString);
</script>
</body>
</html>