Question

我正在尝试使用eslint修复我的代码并抛出错误说：

cName: "" + ANR + "",

意外的字符串连接

const ANR = 'Animal Friend,ANR,ANP,$30';

        const specialityPlates = [{
      cName: 'Environmental / Wildlife',
      oSubMenu: [{
        cName: "" + ANR + "",
        cReturn: "" + ANR + "|27.00"
      },
      {

此字符串中的串联有什么问题？

Answer 1

尝试使用template literal。

即

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

要清楚：您的语法¹ 没有任何问题。

不是JavaScript抛出该错误，它是您的linter设置，其中no-useless-concat规则设置为在检测到经典字符串连接时抛出错误：

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

但是linter错误并不总是和JavaScript错误相同，所以为了清楚起见，你对字符串连接的使用并不正确，如果你试图在浏览器中运行该代码，就不会抛出JavaScript错误，您只看到一个错误，因为您的linter规则已经配置为更喜欢模板字符串而不是字符串连接。

no-useless-concat规则假定您处于支持ES6模板文字的环境中，并且使用no-useless-concat规则有助于在字符串连接上强制实施模板文字的首选项。所以你的linter发现了一个字符串连接的例子，并提出错误提醒你应该使用模板文字（请记住你的linter是可配置的，所以你可以通过选择打开这个设置，或者你正在工作的项目on正试图强制执行特定的编码风格。）

使用no-useless-concat规则，

// This will throw an error
"" + ANR + "|27.00";

// Use template literals instead
`${ANR}|27.00`;

如果您想了解有关规则的更多信息（如何禁用它，更改错误设置，将它们全部禁用等），那么这里是文档：https://eslint.org/docs/rules/no-useless-concat

¹虽然您的语法本身没有任何问题，但如果您已经知道要打印的值是填充字符串连接的话，则无需填充空字符串一个字符串。执行ANR + 'something'就足够了，不需要'' + ANR + 'something' + ''。您需要填充空字符串的唯一时间是，如果您在连接发生之前尝试确保打印的值为cast to a string，但通常情况下，您需要知道变量的数据类型打印前打印。

Answer 3

以下是使用eslint错误的不同示例：意外的字符串连接|喜欢模板：

<强>（YES）

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

VS

<强>（NO）

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

Answer 4

将此评论添加到“// eslint-disable-line prefer-template”

行

Linting是完全肤浅的，除非确实需要使用模板，否则作者（你）不应该受到肤浅变化的负担。

意外的字符串连接

4 个答案: