6

Uma das novidades da ES6 são template strings.
Como funciona essa nova sintaxe aplicada a funções?

Por exemplo, o que faz este código?

applyStyle `
  #minhaDiv {
    background-color: ${'#ccf'};
    width: ${50}px;
    height: ${40}px;
    font-size: ${10}px;
    padding: ${5}px;
  }
`;

1 Resposta 1

6

Template strings com marcações (ou tags) são funções que recebem argumentos de maneira especial. Nas funções normais estamos habituados a uma sintaxe minhaFn(a, b, c); e depois, dentro da função, recebemos os argumentos que essas variáveis tinham no momento de invocar a função. Ou seja:

const a = 50;
const b = 5;
const c = 'Km/h';

minhaFn(a, b, c);

function minhaFn(velocidade, tempo, unidade){
  const res = (velocidade / tempo) + unidade;
  console.log(res);
}

Com tagged template string os argumentos são distribuidos desta forma:

o primeiro argumento é uma array, com o texto da template string, e o segundo argumento e seguintes são as interpolações que a string recebeu.

P: O que são interpolações?
R: No caso desta template string `Olá ${nome}! Como estás?`, a variável nome faz uma interpolação à string, e será passada ao argumento 1 da função, e o resto do texto será passado em pedaços ao argumento 0 da função.

Exemplo:

function saudacao(texto, pessoa){
  const frase = texto[0] + pessoa + texto[1]; 
  console.log(frase);
}

['Ana', 'João', 'Manuel'].forEach(nome => {
    saudacao`Olá ${nome}! Como estás?`
});

O exemplo da pergunta, com CSS, permite à função interagir com os argumentos caso seja necessário e reconfigurar esse CSS.

Exemplo:

const style = document.querySelector('style');
const zoom = 5; // 5x

function applyStyle(css, ...valores) {
    valores = valores.map(x => typeof x == 'number' ? x * zoom : x);
    const rules = css.map((rule, i) => rule.concat(valores[i] || '')).join('');
    style.innerHTML = rules;
}

applyStyle `
  #minhaDiv {
    background-color: ${'#ccf'};
    width: ${50}px;
    height: ${40}px;
	font-size: ${10}px;
    padding: ${5}px;
  }
`;
<style></style>
<div id="minhaDiv">Teste</div>

5
  • 1
    Que legal! Sabe me dizer se o Babel é capaz de traduzir para ECMA5 ou tagged template já é compatível com browsers antigos por padrão?
    – BrTkCa
    Commented 21/11/2016 às 20:35
  • 1
    @LucasCosta tirando o IE já é compativel :) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Sergio
    Commented 21/11/2016 às 20:36
  • 1
    @LucasCosta sim o babel traduz, neste caso o exemplo ficaria assim: jsfiddle.net/bt4p82ec
    – Sergio
    Commented 21/11/2016 às 20:37
  • Isso me lembrou Lua ao mesmo tempo.
    – user37626
    Commented 24/12/2016 às 15:55
  • 1
    @Phanpy interessante! Não conheço Lua, mas fiquei curioso agora :)
    – Sergio
    Commented 24/12/2016 às 16:36

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 .