3

Atualmente estou estudando WebComponents, Polymer, LitElement e afins e me deparei com essa característica da criação do template usando LitElement que eu nunca havia visto:

html`<div>Teste</div>`

O mesmo vale para CSS:

css`div {color: blue}`

O código pode ser conferido aqui e o resultado aqui

Tentando entender melhor como funciona essa declaração js fui no código fonte e descobri que não passa de uma função diferentona:

/**
 * Interprets a template literal as an HTML template that can efficiently
 * render to and update a container.
 */
export const html = (strings: TemplateStringsArray, ...values: unknown[]) =>
  new TemplateResult(strings, values, 'html', defaultTemplateProcessor);

Então tentei implementar algo do tipo pra entender como funciona:

html = (t, i) => {
  console.log(t, i);
  console.log(typeof t, typeof i);
}

html('teste');

html`teste`;

No console aparece:

inserir a descrição da imagem aqui

O que me fez entender menos ainda essa declaração:

<function>`<parameter>`

Onde eu passo uma string e na verdade eu recebo um objeto que parece um array.... afinal, do que se trata essa declaração? E como atingir a segunda variável da função? Quais são os reais benefícios e quando devo usar esse tipo de declaração? Tem alguma coisa a ver com String.raw()?

1 Resposta 1

6

Essa notação é chamada de tagged template. Quando a função é invocada com essa notação, a string recebida é transformada num array utilizando os placeholders ${} como delimitadores, e os valores dentro dos delimitadores são passados como os demais parâmetros.

Ou seja:

function log(strings, ...values) {
  console.log(strings, values)
}

log `<ul> <li>${123}</li> <li>${456}</li> </ul>`

Irá gerar uma lista contendo <ul> <li>, </li> <li> e </li> </ul> em strings, e todos os demais valores serão coletados em values por causa do operador ..., gerando uma lista contendo 123 e 456.


Qual a vantagem disso?

Você pode criar uma função "middleware" para ser executada antes do Javascript atribuir os valores dos placeholders na sua string literal.

function toUpper(strings, ...values) {
  var upperValues = values.map(v => v.toUpperCase())
  return String.raw(strings, ...upperValues)
}

var company = "Alfreds Futterkiste"
var contact = "Maria Anders"
var country = "Germany"

var template = toUpper `
  <tr>
    <td>${company}</td>
    <td>${contact}</td>
    <td>${country}</td>
  </tr>`

console.log(template)

Não é um exemplo terrivelmente útil, você também poderia chamar o método toUpperCase manualmente em cada variável, mas essa é a ideia.


Outro caso de uso clássico é escapar tags HTML prevenindo ataques de XSS, exemplo retirado daqui:

function sanitize(strings, ...values) {
  const dirty = strings.reduce((prev, next, i) => `${prev}${next}${values[i] || ''}`, '');
  console.log(dirty);
  console.log(aboutMe);
  return DOMPurify.sanitize(aboutMe);
}
const name = 'petyr baelish';
const aboutMe = `I love to do evil <img src="http://unsplash.it/100/100?random" onload="alert('I hacked you. Haha');" />`;
const html = sanitize `
    <h3>${name}</h3>
    <p>${aboutMe}</p>
  `;


console.log(html);
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/0.8.2/purify.min.js"></script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .