【问题标题】：ESLint error about Unexpected String Concatenation关于意外字符串连接的 ESLint 错误
【发布时间】：2020-06-03 20:21:56
【问题描述】：

我有以下几点：

return (useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + '\u2026';

Eslint 拒绝我的代码说：

建议使用模板文字而不是字符串连接。（首选模板）

上面有什么问题？

【问题讨论】：

【解决方案1】：

这是一个风格问题。在您的示例中，可以说使用模板文字没有太多好处：

return `${useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString}\u2026`;

在其他情况下，它使代码更具可读性：

return `Hello, ${name}!`;

// vs.

return 'Hello, ' + name + '!';

如果您选择这样做，您可以通过评论选择性地禁用特定行的规则：

// eslint-disable-next-line prefer-template
return (useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + '\u2026';

【讨论】：

【解决方案2】：

模板文字也称为字符串插值。

您的代码必须遵循以下语法：

return `${(useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString)} '\u2026'`;

看到了吗？不必使用+ 运算符进行连接。

var greeting = "Hello";

var completeGreeting = `${greeting} World!`;

console.log(completeGreeting);

看？使用此表达式中的参数构建字符串：${}

资源

【讨论】：

【解决方案3】：

基于that rule's documentation，它只是用+ 标记任何字符串连接。相反，它建议使用 ES6 模板文字。以下是您如何在代码中执行此操作：

return `${(useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString)}\u2026`;

【讨论】：

【解决方案4】：

这是一个使用 eslint 的不同示例 error: Unexpected string concatenation |首选模板：

（是）

const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);

对比

（否）

const value = '; ' + document.cookie;
const parts = value.split('; ' + name + '=');

【讨论】：

【解决方案5】：

就我而言，我发现它不仅对模板相关变量有用，而且对脚本变量也有用，例如：我在连接时收到此错误，因为它是这样的：

   if ($('#' + data.id_field).children().length === 0) {
  $(e.target).prepend($(e.target), ContactWrapper);
}

所以我用这样的方式修复了它：

    if ($(`#${data.id_field}`).children().length === 0) {
  $(e.target).prepend($(e.target), ContactWrapper);
}

希望这个例子有所帮助！

【讨论】：