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 adição.
Considerações finais
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.
Comentários