javascript - 关于意外字符串连接的 ESLint 错误

Question

我有以下内容：

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

Eslint拒绝我的代码说：

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

以上有什么问题？

Answer 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';

Answer 2

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

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

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

看？不需要使用+运算符连接。

var greeting = "Hello";

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

console.log(completeGreeting);

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

资源

• 模板文字（字符串插值）

Answer 3

根据该规则的文档，它只是将任何字符串连接标记为+. 相反，它建议使用 ES6 模板文字。这是您在代码中执行此操作的方法：

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

您可以在此处阅读有关模板文字的更多信息：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 4

这是一个使用 eslint错误的不同示例：意外的字符串连接 | 首选模板：

（是的）

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

对比

（不）

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

Answer 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);
}

希望这个例子有帮助！