Template literals

JavaScript, ES6

Template literals provide an easy way to create multiline strings and include expressions.

Explanation

  • Template literals use backticks (`) instead of quotes.
  • You can embed expressions using ${expression}.

Usage

To create a template literal, use the following code:

const person = {
  name: 'Ash',
  job: 'Frontend development director',
  town: 'Eastbourne',
  bio: 'Bacon ipsum dolor amet capicola ribeye filet mignon alcatra, corned beef pork chop shankle',
};

const markup = `
  <div class="card">
    <h2>
        ${person.name}
    </h2>
    <p class="job">${person.job}</p>
    <p class="location">${person.town}</p>
    <p class="bio">${person.bio}</p>
  </div>
`;