Ao executar o ESLint em um código Javascript, NodeJs ou ExpressJs, podemos encontrar o erro de “concatenação de string inesperada” ou “Unexpected string concatenation”.

Este lint aponta para um possível código que manipula concatenação de strings, que foi escrito de maneira a resultar em uma leitura difícil.

Corrigindo o erro ESLint “Unexpected string concatenation”

Além de você poder alterar a configuração de seu lint, para corrigir o erro “Unexpected string concatenation” (concatenação de string inesperada) ao utilizar o ESLint como lint em nosso projeto JavaScript, devemos usar Template Literals (literais de modelo) em vez de concatenação direta de string.

Por exemplo, se escrevemos:

const ROTULO = ' com receita especial da casa'
const especial = [
   {
     cName: 'Pizza da casa',
     oSubMenu: [{
       cName: `Pizza ${ROTULO}`,
       cValue: `R$ 37.00`
   },
   {
     cName: 'Macarrão da casa',
     oSubMenu: [{
       cName: `Macarrão ${ROTULO}`,
       cValue: `R$ 17.00`
     }]
}]

Ao utilizarmos as aspas inversas para delimitar uma string, ela interpola variáveis e funções que serão executadas e são chamadas de substituições.

Desta maneira, no exemplo, as variáveis cName terão a porção de suas strings contidas entre o sinal de dólar e as chaves, interpoladas para o valor correspondente à constante ROTULO.

Sendo assim, para a primeira posição do array especial, a variável cName terá o valor: Pizza com receita especial da casa. Enquanto a mesma variável na segunda posição terá o valor: Macarrão com receita especial da casa.

Também é possível utilizar expressões em Template Literals para simplificar a construção de strings.

Veja o código a seguir:

const icms = 0.12
const frete = 100
const produto = 1500

console.log('O valor do produto é ' + produto + ', o icms é ' + (produto*icms) + ', e o valor do frete é ' + frete)

É possível melhorar sua legibilidade e diminuir a extensão do código usando literais de modelo:

const icms = 0.12
const frete = 100
const produto = 1500

console.log(`O valor do produto é ${produto}, o icms é ${produto*icms}, e o valor do frete é ${frete}.`)

Nosso segundo código deixa as variáveis e expressões ou funções mais explícitos na montagem da string, sendo possível identificá-los delimitados por ${ }.

Também permite uma leitura mais direta do código sem que aja a necessidade de decifrar onde a string inicia ou termina dentre as delimitações dos conjuntos de aspas simples concatenados com os sinais de adicção.

Conclusão

Para corrigir o erro de “Unexpected string concatenation” quando estamos usando ESLint para lint nosso projeto JavaScript, e também para melhorar a legibilidade e qualidade de nosso código, devemos usar Template Literals em vez de concatenação de string.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *