Template literals (Template strings) 💪

String interpolation and multi-line strings are probably most of the template strings concepts you’ll encounter working with modern Javascript.Template strings are declared using backticks.

//ES5
let exampleString = "I am an ES5 String" // or  exampleString = 'I am a String'

//ES6
let exampleString = `I am an ES6 String`

You can get strings in multiple lines by using the string literals instead of the more cumbersome ES5 alternative.

//ES5
console.log('string text line 1\n' +
'string text line 2');

//ES6
console.log(`string text line
string text line 2
string text line 3`)

Template literals provide an easy way to interpolate expressions into strings. You do so by using the ${…} syntax:

//ES5
function es5String() {
 const name = "John"
 let age = "20"
 const country = "Nigerian"
 const introduction = "My name is " + name + " I am a " + age + "year old " + country
 console.log(introduction)
}

//ES6
function es6String() {
 const name = `John`
 let age = 20
 const country = `Nigerian`
 const introduction = `My name is ${name} I am a ${age}old ${country}. I will be ${age + 5} years old in 5 years`
 console.log(introduction)
}

Template strings are commonly used with styled-components library in React

//Styled-Component example
const fontSize = calculateFontSize();
RedCenteredText = styled.h1`
  color: red;
  text-align: 'center;
  font-size: ${fontSize}`