What are Template Literals?

What are Template Literals?

Dec 2, 2020ยท

2 min read

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

Let's see the syntax

`This is a single line template literal`

`0 looks this is a beautiful multi-line template literal`

`A template literal with and ${expression} in the middle`

Instead, of being enclosed by a single or double quotes template literals are enclosed by backticks(``).

Template literals can contain placeholders, these are indicated by the dollar sign and curly braces, ${expression}.

Multi-line string is so easy NOW!

// Normal multi-line string 
console.log('Line 1\n' + 'Line 2');

// Using template literals
console.log(`Line 1 Line 2`);

/*   Both return
      Line 1
      Line 2

Let's take a better look at those expressions interpolations.

Adding a variable to a string is super easy!

const age = 16;
console.log(`I'm ${age} years old.`);

// I'm 16 years old.

Even an inline, shorthand is is easily added to a template literal!

const str = `This is a normal string`;
console.log(`This is a ${str.length > 10 ? 'long' : 'short'} string.`);

// This is a long string.

โšก Thanks For Reading | Happy Coding ๐Ÿ˜

Published at -> RAHULISM

Did you find this article valuable?

Support Rahul by becoming a sponsor. Any amount is appreciated!