Template literals

Prior to ES6, JavaScript developers would need to do ugly string concatenation to creat dynamic strings.

Template literals allows you to work with strings in a new way compared to ES5. These are just string literals allowing embedded expressions denoted by the dollar sign and curly braces (${expression}). Also, these literals are enclosed by the backtick (`) character instead of double or single quotes.

ES6 has two new kinds of literals:

1. Template literals: string literals which exists across multiple lines and include interpolated expressions(i.e, ${expression})

const firstName = 'John';
console.log(`Hello ${firstName}!
Good morning!`);

2. Tagged template literals: Function calls which are created by mentioning a function before a template literal.

The real world use case is creating components in CSS-In-JS styled components to use across the application

const Button = styled.a`
display: inline-block;
border-radius: 3px;
`