Não entendi o template string

Oi Victor,

O template string é utilizado para fazer a interpolação entre valores e strings.

A crase é utilizada para definir que aquilo é um template string, e o cifrão($) seguido de chaves ({}) para definir que o que está dentro é um valor, e não uma string.

Segue um exemplo:

        const numero1 = 10;
        const numero2 = 5; 
        const soma = numero1 + numero2; 

        const fraseComTemplateString = `O resultado de ${numero1} + ${numero2} é igual a ${soma}`; 
        const fraseSemTemplateString = "O resultado de " + numero1 + " + " + numero2 + " é igual a " + soma; 

        console.log(fraseComTemplateString);
        console.log(fraseSemTemplateString);

Ao rodar esse código, a saída no console será: O resultado de 10 + 5 é igual a 15.

Perceba que o resultado é o mesmo para ambos os logs, mas a construção da frase com o template string é muito mais simples de ser entendida, o que consequentemente facilita a manutenção futura do código.

No curso em questão, vi que o template string é utilizado para pegar o id do áudio desejado, então #som_${elementoAudio} resultaria em #som_tecla_pom, #som_tecla_clap, etc. Onde elementoAudio é a segunda classe do botão.

Olá Victor, tudo bem?

O template string é uma maneira mais otimizada de concatenar ou unir dados para formar uma expressão, com ele é possível misturar diferentes tipos (variáveis, textos, operadores etc) de forma mais eficiente e no final irá converter a expressão em uma string única.

Sem o template string, o código ficaria:

  const idAudio = "#som_" + instrumento

Parece que não faz diferença, mas a maneira acima é mais antiga e tem os seus problemas, veja no trecho de exemplo abaixo, em que estamos consologando a frase:

"Quinze é 15 e

não 20"

• Sem template string

const a = 5;
const b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");

// "Quinze é 15 e
// não 20."

• Com template string

const a = 5;
const b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

// "Quinze é 15 e
// não 20."

Repare que com o template string, a sintaxe fica menos verbosa, evita possíveis erros de digitação e torna o código até mais legível e por isso é a maneira mais recomendada de ser utilizada.

No caso do código da aula está sendo concatenada a expressão #som_${instrumento} em que está pegando o valor contido na variável instrumento e somando ao texto "som_" para formar texto que compreende o id, por exemplo: "som_tecla_pom".

Sendo assim, para utilizar o template string, utiliza-se crase para englobar toda a frase e ${} passando dentro a variável.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Abraços e bons estudos!