Before ES6/ES2015, you utilize either single quote (‘) or double quote (“) to wrap a string literal, there’s no distinction between single or double quote, except you’re using it in JSON (you use a double quote in JSON), using it principally comes down to personal preference.

In ES6/ES2015, template literals are a new form of making strings in JS, it helps to resolve a more complex problem since the string produced by single or double quotes have limited functionality.

In ES6, you create a template literal by wrapping your text with backticks (also called grave accent) as follows;

let str = `This is a template literal`

The functionality you get using template literals include;

• Multiline string: a string which will span multiple lines
• String formatting: replacing part of the string for the value of a variable.
• HTML escaping: this is transforming a string so that you can include it in your HTML.

BASIC SYNTAX

let str = `This is a template literal`
console.log(str) // This is a template literals
console.log(str.length) //26
console.log(typeof str) // string

In template literals, you can easily use single or double quotes by using backticks.

let newStr = `Let's use a new template literal with a single quote`.

If a string contains a backtick, you must escape it by using a backslash()

let backtickStr = `Template literals \` with backtick`.

Multiline String

Prior to ES6, to create a multiline string, you use a new line (\n) character in the string.

let newLineChar = 'This is a template literals. \n Let’s create a new line'

This technique of writing literal string is not consistent with JavaScript engine. When you use single or double quote in an array, to create a multiline string, you’ve got to concatenate it by using ‘join()’

let str = ['This string',
            'span',
            'multiple lines'].join('\n');

Meanwhile, the template literals permit you to write multiline string easily

let str = `This literals
span
multiple lines`;

You can simply say that a template literal is a better version of traditional string in JavaScript.

String Interpolation

The big difference between a template literal and a traditional string is that you can easily replace the placeholder of your variable or expression with values in template literals. You do that using ${…} syntax.

let firstName = 'John'
let lastName = 'Doe'
let greeting = `Hi ${firstName} ${lastName}`
console.log(greeting) // Hi John Doe

Tagged Template Literals

It gives you the opportunity to interpret and process template literals in whatever you like it, by combining tag function and template literals.

function tagged(strings, ...values) {
    return 'catch some fun';
}
let person  = 'John Doe'
let job  = 'software engineer'
let text = tagged`Hi! I’m ${person} and I’m a great ${job}`
console.log(text) // catch some fun

In conclusion, template literals have great functionality that helps you solve a more complex problem, and it is supported major JavaScript engine.

Don't forget to comment below and show your support by liking this article and follow me on Twitter