Modern JavaScript
About Lesson

In this JavaScript lesson we are going to talk about JavaScript Template Literals, so template literal are an improvement on string concatenation that you should rarely ever combine strings with traditional concatenation. it is a new feature in JavaScript ES6



For example in here we want to concatenate two strings, you can use plus sign like this to concatenate these two strings.




Now in ES6 JavaScript we can use template literals to do our concatenation. you can easily use back ticks for doing this.




Let’s create another example, we are going to create a simple function and we want to make upper case our name, for this you can use toUpperCase() function from JavaScript.




JavaScript Template Literals Features

As we have already mentioned that literals are feature introduced in ECMAScript 6 (ES6) that allows for more flexible string formatting. Template literals are enclosed by backticks (`) instead of single or double quotes and support placeholders, expressions and multiline strings. these are some features of JavaScript Template Literals along with commented code examples:



  1. String Interpolation: Template literals allow variables and expressions to be interpolated directly into a string.

In this example variable name is interpolated directly into the string using the ${} syntax within the backticks.



  1. Multiline Strings: Template literals can span across multiple lines and it maeks it easier to create multiline strings without using concatenation.

In this example backticks allow the string to span across multiple lines without using concatenation.



  1. Tagged Templates: Template literals can also be tagged with a function that modifies the template literal output.

In this example tag function is used to modify the output of the template literal by doubling the value of product variable and returning a new string.

In result we can say that JavaScript Template Literals provide a lot of flexibility and can make it easier to write and format strings in JavaScript.