关于意外字符串连接的 ESLint 错误
ESLint error about Unexpected String Concatenation
我有以下内容：
return (useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + '\u2026';
Eslint 拒绝我的代码说：
Suggest using template literals instead of string concatenation.
(prefer-template)
以上有什么问题吗？
基于that rule's documentation，它只是用+ 标记任何字符串连接。相反，它建议使用 ES6 模板文字。以下是您在代码中的做法：
return `${(useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString)}\u2026`;
您可以在此处阅读有关模板文字的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
模板文字也称为字符串插值。
您的代码必须遵循以下语法：
return `${(useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString)} '\u2026'`;
看到了吗？没有必要使用 + 运算符连接。
var greeting = "Hello";
var completeGreeting = `${greeting} World!`;
console.log(completeGreeting);
看？该字符串是使用此表达式中的参数构建的：${}
资源
确实是个风格问题。在您的示例中，可以说使用模板文字没有太多好处：
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';
这是一个使用 eslint 的不同示例 错误：意外的字符串连接 |首选模板:
（是）
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
对比
（否）
const value = '; ' + document.cookie;
const parts = value.split('; ' + name + '=');
在我的案例中，我发现它不仅对模板相关变量有用，而且对脚本变量也有用，例如：
我在连接时收到此错误，因为它是这样的：
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);
}
希望这个例子对您有所帮助！
我有以下内容：
return (useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + '\u2026';
Eslint 拒绝我的代码说：
Suggest using template literals instead of string concatenation. (prefer-template)
以上有什么问题吗？
基于that rule's documentation，它只是用+ 标记任何字符串连接。相反，它建议使用 ES6 模板文字。以下是您在代码中的做法：
return `${(useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString)}\u2026`;
您可以在此处阅读有关模板文字的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
模板文字也称为字符串插值。
您的代码必须遵循以下语法：
return `${(useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString)} '\u2026'`;
看到了吗？没有必要使用 + 运算符连接。
var greeting = "Hello";
var completeGreeting = `${greeting} World!`;
console.log(completeGreeting);
${}
资源
确实是个风格问题。在您的示例中，可以说使用模板文字没有太多好处：
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';
这是一个使用 eslint 的不同示例 错误：意外的字符串连接 |首选模板:
（是）
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
对比
（否）
const value = '; ' + document.cookie;
const parts = value.split('; ' + name + '=');
在我的案例中，我发现它不仅对模板相关变量有用，而且对脚本变量也有用，例如： 我在连接时收到此错误，因为它是这样的：
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);
}
希望这个例子对您有所帮助！