Unexpected string concatenation

Question

I am trying to fix my code using eslint and its throwing an error saying:

cName: "" + ANR + "", 

Unexpected string concatenation

const ANR = 'Animal Friend,ANR,ANP,$30';          const specialityPlates = [{       cName: 'Environmental / Wildlife',       oSubMenu: [{         cName: "" + ANR + "",         cReturn: "" + ANR + "|27.00"       },       { 

What is wrong with the concatenation in this string?

Answer 1

Try using a template literal.

ie.

const ANR = 'Animal Friend,ANR,ANP,$30' const specialityPlates = [   {     cName: 'Environmental / Wildlife',     oSubMenu: [{       cName: `${ANR}`, // "Animal Friend,ANR,ANP,$30"       cReturn: `${ANR}|27.00` // "Animal Friend,ANR,ANP,$30|27.00"     }]   } ] 

Answer 2

To be clear: there is nothing wrong with your syntax¹.

It is not JavaScript throwing that error, it is your linter settings which have the no-useless-concat rule set to throw an error when it detects classic string concatenation:

// classic string concatenation 'a' + 'b' + 'c'; 

but a linter error is not always the same as a JavaScript error, so just to be clear, your use of string concatenation is not incorrect, and would not throw a JavaScript error if you tried to run that code in the browser, or Node, etc. You are only seeing an error because your linter rules have been configured to prefer template strings over string concatenation.

The no-useless-concat rule assumes you are in an environment where ES6 template literals are supported, and using the no-useless-concat rule helps enforce the preference for template literals over string concatenation. So your linter found an example of string concatenation, and threw an error to remind you that template literals should be used instead (keep in mind that your linter is configurable, so you have this setting turned on by choice, or the project you are working on is trying to enforce a specific coding style).

So with the no-useless-concat rule,

// This will throw an error "" + ANR + "|27.00";  // Use template literals instead `${ANR}|27.00`; 

If you want to learn more about the rule (how to disable it, change the error setting, disable it all together, etc), then here is the documentation: https://eslint.org/docs/rules/no-useless-concat

---

¹ While there is nothing wrong with your syntax per se, its not necessary to pad empty strings for string concatenation if you already know that the value you are printing is a string. Doing ANR + 'something' is enough, no need for '' + ANR + 'something' + ''. The only time you would ever need to pad empty strings is if you were trying to ensure that the value you were printing was cast to a string before the concatenation happened, but typically, you would want to know the datatype of the variable you are printing before printing it.