JavaScript Template Literals (Template Strings)

JavaScript Template Literals or Template Strings | Syntax | examples

JavaScript Template Literals or Template Strings are a new type of string in JavaScript that adds powerful new capabilities, such as the ability to quickly create multi-line strings and expressions in strings.

An important feature known as tagged template literals enables you to perform operations on the expressions included within a string.

Syntax of Template Literals

Instead of double or single quotes, template literals are enclosed by backtick (` `) characters.

// strings using Template Literals
 `some text`

// multiline strings
`this is a multiline
 string and this is second line`

// strings with expressions
`string text ${expression} string text`

Template literals or template strings let you use strings or embedded expressions as strings. They are surrounded by backticks (` `).

As an example,

const username = 'John'; // a string

// using Template literals 
console.log(`Hello ${username}`); // Hello John

Template literals and JavaScript Strings

This part will go through how to declare strings using single and double quotes, as well as how to do the same with template literals.

In JavaScript, you can write a string with single quotes (‘ ‘):

let username = 'johndoe';

you may also write a string with double quotes (” “):

let username = "johndoe";

The problem with single and double quotes

When it comes to including a single or double quote inside of a string you can’t use the single quotes inside single quotes.

As an example,

let txt = 'A 'quote' inside a string'; // Error

Also, you cant use the double quotes inside of double quotes.

let txt = "A "quote" inside a string"; // Error

But you can use single quotes inside of double quotes and you can use the double quotes inside of single quotes.

let txt = 'A "quote" inside a string'; 
let txt = "A 'quote' inside a string";

OR you can use the escape characters.

// escape characters using \
let txt = 'A \'quote\' inside a string'; 

// or
let txt = "A \"quote\" inside a string"; 

JavaScript Template Literals or Template Strings made strings simple and easy

You can use template literals instead of escape characters.

The template literals not only make including quotations easier, but they also make our code look cleaner.

let txt1 = `This is a string.`;
let txt2 = `A string with a 'quote' in it`;
let txt3 = `A string with "double quote" in it`;

Multi-line Strings

First, we will see how strings with multiple lines were declared before ES6, and then how template literals made this easier.

let address = 
  'Stree # 12' + 
  'main city name' + 

Also, we can use the backslash to write multi-line strings,

let address = 
  'Stree # 12 \
  main city name \

Template literals make it simple to create multiline strings. You can remove the plus sign and backslashes.

As an example,

let address = 
  `Stree # 12,
  main city name,

Expression Interpolation and Template Literals

Prior to JavaScript ES6, you would concatenate variables and expressions in a string using the + operator.

As an example,

let username = 'John';
console.log('Hello ' + username); // Hello John

An expression can be inserted into a placeholder using template literals. A placeholder is represented by ${ }.

Anything inside curly brackets is treated as JavaScript code and anything outside the brackets is treated as a string:

let username = 'John';
console.log(`Hello ${ username }`); // Hello John

You can also use template literals with expressions

console.log(`2 + 2 is ${2 + 2}`); // 2 + 2 is 4

Add comment