意外的字符串连接答案

【问题标题】：Unexpected string concatenation意外的字符串连接
【发布时间】：2017-10-21 00:07:46
【问题描述】：

我正在尝试使用 eslint 修复我的代码，但它会抛出错误：

cName: "" + ANR + "",

意外的字符串连接

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

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

这个字符串的连接有什么问题？

【问题讨论】：

只要ANR 中没有'，一切都应该没问题。
如果 ANR 已经是一个字符串，只需执行 cName: ANR,
也许可以用有用的信息更新您的答案，而不仅仅是在评论中。 . .
见stackoverflow.com/help/mcve, stackoverflow.blog/2014/09/16/…
使用模板文字。试试这个${ANR}。

标签： javascript jquery

【解决方案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"
    }]
  }
]

【讨论】：

【解决方案2】：

要明确：你的语法没有问题¹。

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

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

但是 linter 错误并不总是与 JavaScript 错误相同，所以为了清楚起见，您对字符串连接的使用并不正确，如果您尝试在浏览器中运行该代码，也不会引发 JavaScript 错误，或 Node 等。您只会看到一个错误，因为您的 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

¹ 虽然您的语法 per se 没有任何问题，但如果您已经知道要打印的值是一个字符串。做ANR + 'something'就够了，不需要'' + ANR + 'something' + ''。唯一需要填充空字符串的情况是，如果您试图确保在连接发生之前打印的值是 cast to a string，但通常，您会想知道之前打印的变量的数据类型打印出来。

【讨论】：

我不知道真正的原因，但就我而言，我不得不禁用“首选模板”规则：eslint.org/docs/rules/prefer-template
@FernandoTholl 如果禁用该规则对您有用，这仅意味着您的 linter 将不再关心您对字符串连接或模板字符串所做的事情，从而允许您选择所需的任何功能。我发现启用规则的唯一原因是为了更好的可读性（模板字符串更容易被人类阅读），所以想法是“如果模板在您的环境中可用，我们更喜欢您使用它们”我>
可以通过将此注释放在发生连接的语句上方来禁用该规则：// eslint-disable-next-line no-useless-concat

【解决方案3】：

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

（是）

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

对

（否）

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

【讨论】：

【解决方案4】：

将此注释添加到“// eslint-disable-line prefer-template”行

Linting 完全是肤浅的，除非确实需要使用模板，否则作者（您）不应该被肤浅的变化所累。

【讨论】：