AppDividend
Latest Code Tutorials

Javascript Template Literals Example | Javascript String Interpolation Tutorial

0 145

Get real time updates directly on you device, subscribe now.

In this tutorial, we will see the Javascript Template Literals Example. Template literals are the string literals allowing embedded expressions. You can use the multi-line strings and string interpolation features with them. 

Template literals are enclosed by the back-tick (` `) character instead of the double or single quotes. These are indicated by a dollar sign and curly braces (${expression}).

Javascript Template Literals Example

Template literals are quite simply the easiest way to improve your JavaScript code readability when working with Strings. Let’s break down a Template Literal.

  • template is a preset format.
  • literal is a value written precisely as it’s meant to be interpreted.

Template Literals are the new ES2015 / ES6 feature that allows you to work with strings in the great way compared to ES5 and below. The syntax at first glance is straightforward, use backticks instead of single or double quotes.

const madTitan = `Thanos`;

Features of Template Literals

  1. String Concatenation.
  2. They offer a great syntax to define multiline strings.
  3. They provide an easy way to interpolate variables and expressions in strings
  4. They allow you to create the Domain Specific Languages with template tags.

String Concatenation

As I stated initially, template literals can drastically improve your code readability.

Let’s take an example of simple concatenation in Javascript.

// app.js

const obj = {
    name: 'Krunal Lathiya',
    website: 'AppDividend'
};

console.log('Hello, I am ' + obj.name + ' and this is my website: ' + obj.website);

In the above example, see the console statement.

We have concatenated the string using the + operators, and it is not good at readable.

Now let’s look at doing the same thing with template literals.

// app.js

const obj = {
    name: 'Krunal Lathiya',
    website: 'AppDividend'
};

console.log(`Hello, I am ${obj.name} and this is my website: ${obj.website}`);

Run the file in the node server by typing the following command.

node app

It will give us the same output but see the code, it is much clearer and now no need to concat the strings. We have used the ${expression} syntax to print the variable.

 

Javascript Template Literals Example | Javascript String Interpolation Tutorial

Multiline Strings

Any newline characters inserted in the source are part of the template literal. Using regular strings, you would have to use the following syntax to get multi-line strings.

// app.js

const obj = {
    name: 'Krunal Lathiya',
    website: 'AppDividend'
};

console.log('My name is: ' + obj.name +'\n' +
'My website is: '+ obj.website);

In the above example, we have used the “\n” character to put the second string to the second line. 

If we use the Template Literal, then we do not need to use that character. See the following example.

// app.js

const obj = {
    name: 'Krunal Lathiya',
    website: 'AppDividend'
};

console.log(`My name is ${obj.name}
My website is ${obj.website}`);

See the output below for both the cases. It is the same. But using the template literal, it is more readable.

 

Javascript String Interpolation Tutorial

Expression Interpolation

In order to embed expressions within standard strings, you would use the following syntax.

// app.js

console.log('19 plus 2 is: '+ (19 + 2));

In the above example output, we will get the 21, but the readability is not good. So, let’s see the following example where we use Expression Interpolation using String Literal.

// app.js

console.log(`19 plus 2 is: ${19 + 2}`);

See the output of the above examples is the same, but the second has more readability.

 

Related Posts
1 of 43

Expression Interpolation in Javascript

Template Tags

Tagged templates are one feature that might sound less beneficial at first, but it’s actually used by lots of popular libraries like Styled Components or Apollo, the GraphQL client/server lib, so it’s the essential to understand how it works. In the Styled Components, template tags are used to define CSS strings.

const DIV = styled.button`
  font-size: 1em;
  background-color: red;
  color: green;
`

Literal is an array containing the template literal content tokenized by the expressions interpolations.

The expression contains all the interpolations.

Let’s take an example.

// app.js

const stringA = `NUMBER ${21 + 22}`;
console.log(stringA);

Literal is an array with two items. The first is the Number, the string until the first interpolation, and the second is an empty string, the space between the end of the first interpolation and the end of the string.

Expression, in this case, is an array with a single item 43.

Finally, Javascript Template Literals Example or Javascript String Interpolation Tutorial is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.