JavaScript String Interpolation and Template Literals

Javascript String Interpolation Tutorial and Template Literal Example

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

literals are the string literals allowing embedded expressions. You can use the multi-line strings and string interpolation features with them. 

Javascript Template Literals

Template literals in JavaScript are the easiest way to improve your code readability when working with Strings. Template Literals are the new ES2015 / ES6 feature that allows you to work with strings in a great way compared to ES5 and below.

Let’s break down a Template Literal.

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

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 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 ' + + ' and this is my website: ' +;

In the above example, see the console statement.

We have concatenated the string using the + operators, which is not good at being 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 ${} and this is my 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, and 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: ' + +'\n' +
'My website is: '+;

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, 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 ${}
My website is ${}`);

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

Javascript String Interpolation Tutorial

Javascript string Interpolation

JavaScript has evolved since ES6, and it has template string support which gives native support for string interpolation. As we have discussed above, these are called template literals. Template literals are string literals that allow embedded expressions.

Template strings use back-ticks (“) rather than single or double quotes.

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}`);

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

Expression Interpolation in Javascript

Template Tags

Tagged templates are one feature that might sound less beneficial at first, but it’s used by lots of popular libraries like Styled Components or Apollo, the GraphQL client/server lib, so it’s 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}`;

A 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.

That’s it for this tutorial.

Leave A Reply

Please enter your comment!
Please enter your name here

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