Understanding the "Unexpected String Concatenation" Error in ESLint: From Traditional Concatenation to Template Literals

Problem Context and Phenomenon

During JavaScript development, when using ESLint for code quality checking, developers may encounter the "Unexpected string concatenation" error message. This error typically appears when using traditional string concatenation syntax, especially when the code contains structures like "" + variable + "". Superficially, this concatenation method is completely valid JavaScript syntax that can run normally in browsers or Node.js environments without throwing errors.

Root Cause Analysis

This error does not originate from the JavaScript engine itself but stems from ESLint's no-useless-concat rule. This rule is configured by default to issue warnings or errors when it detects unnecessary string concatenation. The design philosophy of the rule is based on modern JavaScript development best practices, particularly after ES6 (ECMAScript 2015) introduced template literals, making traditional string concatenation considered an outdated and less elegant coding approach.

Consider the following typical example:

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

In this code, both cName: "" + ANR + "" and cReturn: "" + ANR + "|27.00" use the traditional concatenation method with empty strings as padding. While this approach works correctly, it presents several issues: first, adding empty strings as prefixes and suffixes is redundant since ANR is already of string type; second, this pattern reduces code readability and maintainability.

Solution: Template Literals

ES6 introduced template literals, which provide more concise and powerful string handling capabilities. By wrapping string content with backticks (`) and embedding expressions through the ${expression} syntax, the cumbersome nature of traditional concatenation can be completely avoided.

The improved code looks like this:

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

This approach not only eliminates ESLint errors but also offers the following advantages:

1. Code Conciseness: Removes unnecessary empty strings and plus operators
2. Improved Readability: Variable embedding becomes more intuitive, especially when handling multiline strings
3. Type Safety: Template literals automatically handle string conversion of expressions
4. Extended Functionality: Supports advanced features like nested templates and tagged templates

Rule Configuration and Project Practice

The no-useless-concat rule is one of ESLint's configurable options. In a project's ESLint configuration file (such as .eslintrc.js), this rule can be managed in the following ways:

module.exports = {
  rules: {
    'no-useless-concat': 'error', // Default set to error level
    // or
    'no-useless-concat': 'warn', // Set to warning level
    // or
    'no-useless-concat': 'off'  // Completely disable the rule
  }
};

In actual project development, whether to enable this rule should consider the following factors:

• Browser Compatibility: If the project needs to support older browsers that don't support ES6, traditional concatenation might need to be retained
• Team Conventions: Unified code style helps improve collaboration efficiency
• Build Tools: Using transpilers like Babel can ensure compatibility of template literals in older environments

Special Case Handling

While template literals are the preferred solution, traditional string concatenation still has value in certain specific scenarios:

1. Type Coercion: When explicit conversion of a value to string is needed, "" + value remains a concise conversion method
2. Performance-Sensitive Scenarios: In extreme performance requirements, some JavaScript engines might optimize simple concatenation better
3. Legacy Code Maintenance: In large legacy systems, gradual refactoring might be more feasible than complete rewrites

However, for most modern JavaScript projects, especially those already configured with ESLint and Babel, adopting template literals represents best practice. This not only aligns with language development trends but also helps maintain code consistency and maintainability.

Conclusion

ESLint's "Unexpected string concatenation" error prompts developers to transition from traditional string concatenation methods to more modern template literal syntax. This shift represents more than just a syntactic change—it's an update in coding philosophy, pursuing code styles that are more concise, readable, and aligned with language evolution. By properly configuring linting rules and understanding the appropriate contexts for different syntax choices, development teams can establish more efficient and consistent code quality standards.