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>