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?
To fix the “Unexpected string concatenation” error when we are using ESLint to lint our JavaScript project, and also to improve the readability and quality of our code, we should use Template Literals instead of string concatenation.
In formal language theory and computer programming, string concatenation is the operation of joining character strings end-to-end. For example, the concatenation of "snow" and "ball" is "snowball".
Concatenation is the process of appending one string to the end of another string. You concatenate strings by using the + operator. For string literals and string constants, concatenation occurs at compile time; no run-time concatenation occurs. For string variables, concatenation occurs only at run time.
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" }] } ]
To be clear: there is nothing wrong with your syntax1.
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
1 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With