Enea Xharja

Software Engineer

Template Literals in JavaScript

JavaScript has always had two syntaxes for strings: single quotes '' or double quotes "". Thanks to the introduction of Template Literals (or Template Strings) in ES6, there is a third type of string written with backticks.

const name = 'Mario';
const occupation = 'plumber';

// Using single quotes
const sentence1 = 'My name is ' + name + ' and I am a ' + occupation + '.';

// Using double quotes
const sentence2 = "My name is " + name + " and I am a " + occupation + ".";

// Using backticks
const sentence = `My name is ${name} and I am a ${occupation}.`;

Backticks allow us to use ${} to interpolate variables into the string. This is called a template literal. It is a more readable and concise way of concatenating strings.

Template literals can also span multiple lines without the need for escape characters.

// Without template literals
function greetTemplate(name) {
  return "Hello, " + name.toUpperCase() + "!\n" + "How are you today?";
}

// With template literals
function greetTemplate(name) {
  return `
    Hello, ${name.toUpperCase()}!
    How are you today?
  `;
}

Template literals are a great addition to JavaScript and make working with strings much easier.