What are Template Literals in JavaScript?

const name = 'John';
const age = 30;

// String concatenation (old)
const msg1 = 'Hello, ' + name + '! You are ' + age + '.';

// Template literal
const msg2 = `Hello, ${name}! You are ${age}.`;

// Expressions
const msg3 = `Next year you'll be ${age + 1}.`;

// Old way
const html1 = '<div>\n' +
  '  <p>Content</p>\n' +
  '</div>';

// Template literal
const html2 = `
<div>
  <p>Content</p>
</div>
`;

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    return acc + str + (values[i] ? `<mark>${values[i]}</mark>` : '');
  }, '');
}

const name = 'John';
const result = highlight`Hello, ${name}!`;
// 'Hello, <mark>John</mark>!'

const items = ['Apple', 'Banana', 'Orange'];
const html = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;