Usage of the backtick character (`) in JavaScript

The Power of Backticks

String Interpolation

Backticks empower you to embed JavaScript expressions right into your strings, with the ${expression} syntax. Expressions could range from simple variables to complex function calls, JavaScript handles them effortlessly!

let timeOfDay = 'morning';
let greeting = `Good ${timeOfDay}!`; // It's as simple as this

let exclamation = () => "!!!";
console.log(`Let's make this interesting${exclamation()}`); // Spicing it up with a function call


Multi-line Strings

Get rid of the clunky \n when writing multi-line strings. Backticks have support for multi-line strings built right in.

console.log(`Roses are red,
             // This is JavaScript poetry in the making 📜
Violets are blue,
I love backticks,
And you should too!`);


Handling Quotes

Inside backticks, you are free to use single (') or double (") quotes without the need to escape them. Finally, the quote nightmare is over!

console.log(`He said, "I'm ready."`); // No backslashes, pure freedom.


Tagged Template literals

Backticks come with their own superhero sidekick, the Tags. They can change the way the template literal works, giving you the power to custom format your strings.

function myTag(strings, ...values) {
  // Add your custom logic here
}
let name = 'John';
console.log(myTag`Hello, ${name}!`); // Hello John, but cooler.


String.raw() and .raw Property

JavaScript provides you the String.raw() method which lets you get the raw values in a template literal.

function getRawString() {
  return String.raw`This is a \n raw string`;
}
// Taking it old school with '\n'. Show them the raw power 💪🏻
console.log(getRawString()); // Output: "This is a \n raw string", not a new line.


Working with Backticks

Tagged Templates in styled-components

In certain JS libraries like styled-components, backticks can be used to work with CSS in JavaScript.

import styled from 'styled-components';

const Button = styled.button`
  /* Dynamic CSS? That's called modern solutions for modern problems.*/
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
`;


Escaping backticks

There might be times when you need to include a literal backtick within your template string. Simply use \ before the backtick.

const escapedBacktick = `This is an escaped backtick: \` `;
console.log(escapedBacktick); // Output: This is an escaped backtick: `
