Literais de modelo reutilizáveis: expondo o potencial oculto

Embora os literais de modelo no ES6 sejam amplamente utilizados, persiste a percepção de que eles estão eternamente vinculados a no momento de sua criação, sem flexibilidade para serem reutilizados e atualizados dinamicamente. Este artigo desafia essa noção, explorando a possibilidade de transformar literais de modelos em documentos reutilizáveis ​​e dinâmicos.

A essência de um modelo tradicional reside na capacidade de injetar tokens em tempo de execução, avaliáveis ​​sempre que necessário. No entanto, os literais de modelo ES6 parecem avaliar suas substituições no momento da declaração, limitando sua praticidade.

O catalisador essencial: o construtor de função

Para superar essa aparente limitação, nós empregar o construtor Function como intermediário. Ao utilizar esta construção, podemos adiar o processo de interpolação até que a função seja invocada:

const templateString = "Hello ${this.name}!";
const templateVars = {
  name: "world",
};

const fillTemplate = function (templateString, templateVars) {
  return new Function(
    "return `"   templateString   "`;"
  ).call(templateVars);
};

console.log(fillTemplate(templateString, templateVars));

Neste exemplo, a função fillTemplate aceita a string do modelo e um conjunto de variáveis ​​a serem interpoladas. Dentro da função, construímos uma função que, quando executada, retorna a string do modelo com os valores de templateVars injetados em tempo de execução.

Benefícios dos literais de modelo reutilizáveis

Os os literais de modelo reutilizáveis ​​resultantes oferecem inúmeras vantagens:

• Interpolação dinâmica: os valores podem ser interpolados no modelo em tempo de execução, proporcionando maior flexibilidade.
• Interpolação externa: os modelos podem ser provenientes de arquivos externos , permitindo fácil manutenção e colaboração.
• Recursos estendidos: recursos adicionais, como tags de modelo, podem ser integrados com alguma engenhosidade.

Embora esta solução apresente certas limitações, como a incapacidade de lógica JavaScript inline, soluções alternativas podem ser desenvolvidas.

Conclusão

Ao empregar o construtor Function, desbloqueamos o verdadeiro potencial dos literais de modelo ES6. Nós os transformamos de strings estáticas em modelos dinâmicos e reutilizáveis, abrindo novas possibilidades de organização e flexibilidade de código. Embora a jornada para recriar totalmente a funcionalidade dos mecanismos de modelo tradicionais continue, essa técnica fornece uma base robusta para estender os recursos dos literais de modelo.