DEV Community

Cover image for Template Literals in JavaScript
Anoop Rajoriya
Anoop Rajoriya

Posted on

Template Literals in JavaScript

#javascript #beginners #chaicode

This is a modern way to define string it introduce with JavaScript ES6 features. Now its become standard for dealing with complex string manipulation because of this it become foundation concept which every developer should know it. In this article we discussing what it is? how syntax look like? and what is the use case of it?

Problems with traditional string concatenation

In early developers use single (') and double (") quotes to define string. With this if they need to add variable with string they need to use (+) operator to do this, called string concatenation. This approach work well but if there are many variables then it becomes massy and hard to read or manage it.

But with template literals its easy to add any number of variables directly within the string, no need concatenation here. This approach is good for work with dozens of variables and also provide good readability.

const name = "Anoop"
const age = 20

// old way
console.log("Hello my name is " + name + " and i am " + age + " years old")

// new way
console.log(`Hello my name is ${name} and i am ${age} years old`)
Enter fullscreen mode Exit fullscreen mode

Template literal syntax

Traditional syntax of string use single or double quotes to define string but in the template literals syntax its use backtick symbols to define it.

Old Syntax:

console.log('Defining strings with single quotes')
console.log("Defining strings with double quotes")
Enter fullscreen mode Exit fullscreen mode

New Syntax:

console.log(`Defining strings with backticks`)
Enter fullscreen mode Exit fullscreen mode

Embedding variables in strings

In old way to embed variables developers need to use concatenation with (${}) operator or built-in method. In new way no need to do this anymore, template literals use dolor symbol and curly braces to wrap any kind of variable and place it within intended place of string, this called string interpolation. It also support expressions and function call which provide more flexibility to work with data.

Example:

const a = 10
const b = 15
console.log(`Sum of ${a} and ${b} is ${a+b}`)

function capitalize(name){
    return `${name.slice(0, 1).toUpperCase()}${name.slice(1)}`
}

const input = "wOrLd"
console.log(`Hello ${capitalize(input)}`)
Enter fullscreen mode Exit fullscreen mode

Multi-line strings

Working with multiline text data with older way developers use new line character () to add new line in string this method is not readable for larger data set. But with template literals it's easy as pressing enter, no need to put these characters here.

Example:

const multiLine = `This is line 1
This is line 2
This is line 3`
console.log(multiLine)
Enter fullscreen mode Exit fullscreen mode

Use cases in modern JavaScript

You seeing it lot's of time in multiple places during development. These are few uses i encounter during development:

  • Dynamic HTML Code Blocks: defining html code blocks in JavaScript to use it dynamically with html.

  • Constructing URLs: it used construct URLs with adding id's, parameters dynamically to fetch resources on apis.

  • Logs Messages: creating meaning full messages with system information which used in logging during debugging.

  • Math Expressions: creating math expressions explanations is very helpful because in complex logic older way become massy and hard to read.

No need to worry about it just read this and remember its concepts not syntax because syntax is only one google search far from you. Practice it and remember what problem it solve and what it's use cases is.

Top comments (0)