Tag para função literal de modelo genérico em javascript [duplicado]

Oct 10 2020

Meu objetivo é escrever uma função de modelo com tag como

myTemplateTagFunction`some text ${variable} etc. etc.`

... que se comporta como a função literal de modelo padrão em javascript.

Minha primeira tentativa foi

let myTaggedTemplate = args => `${args}`

Mas isso quebra muito rapidamente ...

> myTaggedTemplate`hello world ${2 + 5}` // "hello world ," > `hello world ${2 + 5}`
// "hello world 7"

Deve haver uma maneira mais fácil de fazer isso que estou perdendo?

Respostas

3 domenikk Oct 10 2020 at 21:59

Talvez haja uma maneira mais curta de fazer isso, mas esta é a minha abordagem:

const myTaggedTemplate = (strings, ...vars) => {
    let result = '';
    strings.forEach((str, i) => {
        result += `${str}${i === strings.length - 1 ? '' : vars[i]}`;
    });
    return result;
};
PeterLehnhardt Oct 10 2020 at 22:07

Como definir uma função de modelo com tag

Se você definir uma função de modelo marcada, ela deve receber uma matriz de strings como primeiro argumento e expressões de número arbitrário como parâmetros subsequentes. As strings são todas strings entre suas expressões inseridas (entre todas ${...}) e todas as expressões são os valores do que você colocou ${...}.

Código de exemplo

let numExp = 2;

function tagFunction(strings, ...expressions) {
  let returnString = "";
  for (let i = 0; i < expressions.length; i++) {
    returnString += strings[i] + expressions[i];
  }
  returnString += strings[strings.length - 1];
  return returnString;
}

console.log(
  tagFunction`Using function \"${tagFunction.name}\" with ${numExp} expressions`
);