WDD 131: Fundamentos da Web Dinâmica

Template Literals (Template Strings)

Visão Geral

Template literals do JavaScript são strings que permitem expressões incorporadas. Você pode usar strings multilinhas e recursos de interpolação de strings com eles. Elas eram chamadas de "template strings" em edições anteriores da especificação ES2015.

Preparação

1. Leia Template Literals – MDN
2. Os parâmetros a seguir são os conceitos básicos de template literals:
   • Coloque a string entre acentos graves (``).
   • Use texto de string para construir o template literal.
   • Use expressões JavaScript inseridas em um local específico dentro do template literal usando a notação ${expressão}.

Avalie Seu Conhecimento

1. Transforme esta string concatenada em um template literal:

   let output = "Boas-vindas a " + assuntoCurso + " " + numeroCurso + "!Créditos: "+ creditosCurso + "Duração: "+ duracaoCurso;

   Avalie Seu Conhecimento

   let output = `Boas-vindas a ${assuntoCurso} ${numeroCurso}!Créditos: ${creditosCurso}Duração: ${duracaoCurso}`;

2. Dado o script a seguir, conclua o snippet para gerar uma lista de três templos com base no array templos:

   let templos = ["Roma", "Salt Lake", "Nauvoo"];
   let listaItens = "";
   for (const templo of templos) {
     listaItens += `<li>__________</li>`;
   }
   document.querySelector("ul").innerHTML = listaItens;

   Avalie Seu Conhecimento

   listaItens += `<li>${templo}</li>`;