Javascript — Template String

Oi pessoal este post pode parecer simples, mas vai ajudar muita gente que ainda fica concatenando strings no javascript.

Todos os dias você se vê concatenando strings no javascript, seja por interpolação de strings ou multiplas linhas.

Vamos fazer aqui abaixo um exemplo interpolando a string.

function dadosCliente(nome, telefone, email){
 return 'Nome: '+nome+' Telefone: '+telefone+' Email: '+email;
}
dadosCliente('Cleyton', '99999–9999','[e-mail]');

Interpolação de String
Isto funciona perfeitamente do jeito que espera, porém podemos melhorar e deixar o código muito mais elegante. Vamos fazer abaixo usando template string ( Template String é da especificação do ECMAScript2015).

function dadosCliente(nome, telefone, email){
 return `Nome: ${nome} Telefone: ${telefone} Email: ${email}`;
}
dadosCliente('Cleyton', '99999–9999','[e-mail]');

Multiplas Linhas
Muitos usam isto principalmente para montar códigos html. A grande questão é que da muito trabalho e o código começa a ficar ruim para dar manutenção. Vamos colocar abaixo um exemplo usando concatenação com o +

function viewDadosCliente(nome, email){
    return '<table>'+
    '<tr>'+
    '<th>Nome</th>'+
    '<th>Email</th>'+ 
    '</tr>'+
    '<tr>'+
    '<td>'+nome+'</td>'+
    '<td>'+email+'</td>'+
    '</tr>'+
    '</table>';
}
viewDadosCliente('Cleyton', '[e-mail]');

Funciona muito bem, porém é trabalhoso dar manutenção com códigos assim, imagine muitas linhas fazendo as concatenações.

Vamos fazer abaixo usando Template String:

function viewDadosCliente(nome, email){
     return `<table>
     <tr>
     <th>Nome</th>
     <th>Email</th>
     </tr>
     <tr>
     <td>${nome}</td>
     <td>${email}</td>
     </tr>
     </table>`;
}
viewDadosCliente('Cleyton', '[e-mail]');

Conclusão
Template String é a forma mais elegante para trabalhar com concatenação de strings e deixar o código bonito, e também pode ser explorado com outras formas, inclusive pode usar com arrays, etc.

Espero ter ajudado com esta informação.