8

Estava dando uma lida na documentação do ES6 que fala sobre interpolação (ou Template strings) e vi que eu posso criar "templates escapados", como no exemplo abaixo:

class InvalidParamError extends Error {
  static DEFAULT_MESSAGE = 'Invalid param: ${paramName}.'
  constructor(paramName) {
    super(InvalidParamError.DEFAULT_MESSAGE)
  }
}

O problema é que não sei como eu posso utilizar tal template. Até onde eu conheço de interpolação em JavaScript, eu teria apenas duas opções para trabalhar sobre o fato:

  • Transformar a propriedade DEFAULT_MESSAGE em um método que recebe os campos da mensagem;
  • Trabalhar com o replace (usando expressões regulares), sobrescrevendo nesse caso o ${paramName} pelo campo passado.

Existe alguma forma (utilizando interpolação) que eu possa mesclar os campos com a mensagem construída? O que procuro é algo como a interpolação do Python, veja no exemplo abaixo:

DEFAULT_MESSAGE = 'Invalid param: {param_name}'
print(DEFAULT_MESSAGE.format(param_name='foo'))

Existe algo semelhante em JS?

1 Resposta 1

8

O JavaScript não possui, nativamente, templates. Não confundir template strings com um "template real", que pode ser "avaliado" posteriormente — como a função format do Python faz.

As template strings do JavaScript permitem a interpolação de valores. Pense numa alternativa para a concatenação. Desse modo, você precisa ter todos os valores que quer interpolar quando a template string for avaliada.

Note também que template strings são denotadas com o sinal do acento grave (`), e não com aspas simples (') ou duplas ("). É por isso que você não está recebendo um erro no seu exemplo. No seu exemplo, você não usou template strings. Usou apenas "strings normais". Veja o erro que receberia se estivesse tentando interpolar um valor que não está disponível no momento da avaliação:

class InvalidParamError extends Error {
  // ❗️ Uncaught ReferenceError: paramName is not defined
  static DEFAULT_MESSAGE = `Invalid param: ${paramName}.`;
  
  constructor(paramName) {
    super(InvalidParamError.DEFAULT_MESSAGE);
  }
}

O erro ocorreu porque template strings não se trata de um template real (geralmente templates permitem avaliação posterior). Como vimos, template strings, em JavaScript, nada mais são do que um mero nome diferente para interpolação de strings. Sozinhas, as template strings não permitem avaliação posterior. Desse modo, você é obrigado a fornecer os valores a serem interpolados quando a template string for avaliada pelo runtime do JavaScript. Caso contrário, um ReferenceError será lançado.

No seu exemplo, não ocorreu erro porque a string utilizada (denotada com aspas simples) não avaliara paramName (uma referência que, naquele momento, não poderia ser encontrada).

Se você quiser "emular" o comportamento de um template, pode criar uma função para tornar a avaliação da string "lazy", isto é, preguiçosa. Assim, avaliá-la-emos somente em posse de paramName:

class InvalidParamError extends Error {
  static DEFAULT_MESSAGE = (paramName) =>
    `Invalid param: ${paramName}.`;
  
  constructor(paramName) {
    super(InvalidParamError.DEFAULT_MESSAGE(paramName));
  }
}

console.log(new InvalidParamError('Foo').message); // `Invalid param: Foo.`

Note que, nesse caso, não faz diferença usar template strings (interpolação) ou uma mera concatenação:

class InvalidParamError extends Error {
  static DEFAULT_MESSAGE = (paramName) =>
    'Invalid param: ' + paramName + '.';
  
  constructor(paramName) {
    super(InvalidParamError.DEFAULT_MESSAGE(paramName));
  }
}

console.log(new InvalidParamError('Foo').message); // `Invalid param: Foo.`

No entanto, nesse caso, não creio que tornar DEFAULT_MESSAGE "lazy", transformando-o num método, seja realmente benéfico. O benefício disso, nesse caso, é quase nulo.

Nada lhe impede de avaliar a string diretamente no construtor, que é, nesse caso, bem mais simples:

class InvalidParamError extends Error {
  constructor(paramName) {
    super(`Invalid param: ${paramName}.`);
  }
}

console.log(new InvalidParamError('Foo').message); // `Invalid param: Foo.`

Em suma, para tornar a avaliação da template string (interpolação) lazy, o que fizemos foi basicamente criar um método estático (utilizando a notação de arrow functions), conforme sugerido na própria pergunta. Uma outra opção, também sugerida, é utilizar expressões regulares para fazer o replace.

Enfim, como sempre digo, mais um dos exemplos de como é possível fazer várias coisas na programação. Avalie os custos de cada opção e faça como preferir. :)

3
  • A intenção de criar uma DEFAULT_MESSAGE é que eu possa "mockar" e testar mensagens de erros sem depender de ter o erro já construído. podendo então compará-los. Eu uma string com aspas simples como exemplo, e eu já sei que seria possível usar como função, tanto que eu já coloco na questão. Por isso eu perguntei, se havia outra forma de fazê-lo. Commented 9/10/2020 às 4:33
  • 5
    @LeandroLuk, então, na minha opinião, postergar a avaliação da template string (torná-la “lazy”), isto é, transformar em um método, me parece ser o mais ideal. :) Recorrer a uma biblioteca de templates ou até mesmo expressões regulares em casos como esse me parece ser o típico “matar a formiga com bazuca”. :D Commented 9/10/2020 às 5:00
  • 4
    Falando em matar formiga com bazuca, olha o que eu achei: npmjs.com/package/python-format
    – hkotsubo
    Commented 9/10/2020 às 12:16

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 .