JavaScript: come si usano i template letterali

I template letterali aggiungono nuove funzionalità alla manipolazione delle stringhe in JavaScript.

I template letterali usano la sintassi ${espressione} e sono racchiusi da apici.

const str = 'Test';

console.log(`Lorem ipsum ${str}.`); // 'Lorem ipsum Test'

Possono anche includere interruzioni di riga che verranno incluse.

const str = `1) Test
2) Lorem 
3) Ipsum`;

Un tipico caso d'uso è la creazione di stringhe HTML.

fetch('https://api.example.com/posts')
  .then(response => response.json())
  .then(data => {
      let html = '';
      data.posts.forEach(post => {
          html += `<article><h2>${post.title}</h2><p>${post.excerpt}</p></article>`;
      });
      document.querySelector('#content').innerHTML = html;
  });

Come si può notare, in questo caso evitiamo di usare più volte l'operatore di concatenazione +.