Javascript 意外的字符串连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46858840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unexpected string concatenation
提问by David Brierton
I am trying to fix my code using eslint and its throwing an error saying:
我正在尝试使用 eslint 修复我的代码并抛出一个错误说：
cName: "" + ANR + "",
Unexpected string concatenation
意外的字符串连接
const ANR = 'Animal Friend,ANR,ANP,';
const specialityPlates = [{
cName: 'Environmental / Wildlife',
oSubMenu: [{
cName: "" + ANR + "",
cReturn: "" + ANR + "|27.00"
},
{
What is wrong with the concatenation in this string?
这个字符串中的连接有什么问题？
回答by Arman Charan
Try using a template literal.
尝试使用模板文字。
ie.
IE。
const ANR = 'Animal Friend,ANR,ANP,'
const specialityPlates = [
{
cName: 'Environmental / Wildlife',
oSubMenu: [{
cName: `${ANR}`, // "Animal Friend,ANR,ANP,"
cReturn: `${ANR}|27.00` // "Animal Friend,ANR,ANP,|27.00"
}]
}
]
回答by radiovisual
To be clear: there is nothing wrong with your syntax1.
需要明确的是：您的语法1没有任何问题。
It is not JavaScript throwing that error, it is your linter settings which have the no-useless-concatrule set to throw an error when it detects classic string concatenation:
抛出该错误的不是 JavaScript，而是您的 linter 设置，它的no-useless-concat规则设置为在检测到经典字符串连接时抛出错误：
// classic string concatenation
'a' + 'b' + 'c';
but a linter error is not always the same as a JavaScript error, so just to be clear, your use of string concatenation is not incorrect, and would not throw a JavaScript error if you tried to run that code in the browser, or Node, etc. You are only seeing an error because your linter rules have been configured to prefer template strings over string concatenation.
但是 linter 错误并不总是与 JavaScript 错误相同，所以需要明确的是，您使用的字符串连接并不是错误的，如果您尝试在浏览器或 Node 中运行该代码，则不会抛出 JavaScript 错误，等等。您只会看到错误，因为您的 linter 规则已配置为更喜欢模板字符串而不是字符串连接。
The no-useless-concatrule assumes you are in an environment where ES6 template literals are supported, and using the no-useless-concatrule helps enforce the preference for template literals over string concatenation. So your linter found an example of string concatenation, and threw an error to remind you that template literals should be used instead (keep in mind that your linter is configurable, so you have this setting turned on by choice, or the project you are working on is trying to enforce a specific coding style).
该no-useless-concat规则假设您处于支持 ES6 模板文字的环境中，并且使用该no-useless-concat规则有助于强制使用模板文字而不是字符串连接。所以你的 linter 找到了一个字符串连接的例子，并抛出一个错误提醒你应该使用模板文字（请记住你的 linter 是可配置的，所以你可以选择打开这个设置，或者你正在工作的项目on 试图强制执行特定的编码风格）。
So with the no-useless-concatrule,
所以按照no-useless-concat规则，
// This will throw an error
"" + ANR + "|27.00";
// Use template literals instead
`${ANR}|27.00`;
If you want to learn more about the rule (how to disable it, change the error setting, disable it all together, etc), then here is the documentation: https://eslint.org/docs/rules/no-useless-concat
如果您想了解有关规则的更多信息（如何禁用它、更改错误设置、一起禁用它等），那么这里是文档：https: //eslint.org/docs/rules/no-useless-连接
1While there is nothing wrong with your syntax per se, its not necessary to pad empty strings for string concatenation if you already know that the value you are printing is a string. Doing ANR + 'something'is enough, no need for '' + ANR + 'something' + ''. The only time you would ever need to pad empty strings is if you were trying to ensure that the value you were printing was cast to a stringbefore the concatenation happened, but typically, you would want to know the datatype of the variable you are printing before printing it.
1虽然您的语法本身没有任何问题，但如果您已经知道要打印的值是字符串，则没有必要为字符串连接填充空字符串。做ANR + 'something'就够了，不需要'' + ANR + 'something' + ''。唯一需要填充空字符串的情况是，如果您试图确保在连接发生之前将打印的值转换为字符串，但通常情况下，您会想知道正在打印的变量的数据类型在打印之前。
回答by Gil Perez
Here is a different example using eslint error: Unexpected string concatenation | prefer-template:
这是一个使用 eslint 错误的不同示例：Unexpected string concatenation | 喜欢模板：
(YES)
（是的）
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
vs
对比
(NO)
（不）
const value = '; ' + document.cookie;
const parts = value.split('; ' + name + '=');
回答by LMS5400
Add this comment to the line "// eslint-disable-line prefer-template"
将此注释添加到“// eslint-disable-line prefer-template”行
Linting is completely superficial and unless there is a real need to use a template, the author (you) should not be burdened by superficial changes.
Linting 完全是肤浅的，除非确实需要使用模板，否则作者（您）不应该被肤浅的更改所累。
