no-mixed-operators

禁止混合二元运算符

此规则在 ESLint v8.53.0 中已弃用。请在 @stylistic/eslint-plugin-js 中使用 相应的规则。

¥This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.

用括号括起来复杂的表达式可以阐明开发者的意图，从而使代码更具可读性。当在表达式中连续使用不带括号的不同运算符时，此规则会触发警告。

¥Enclosing complex expressions by parentheses clarifies the developer’s intention, which makes the code more readable. This rule warns when different operators are used consecutively without parentheses in an expression.

var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
var foo = (a && b) || c || d;  /*GOOD*/
var foo = a && (b || c || d);  /*GOOD*/
1
2
3

注意：预计此规则会为一对中的每个混合运算符触发一个错误。因此，对于使用的每两个连续混合运算符，将显示一个明显的错误，指出使用了违反规则的特定运算符：

¥Note: It is expected for this rule to emit one error for each mixed operator in a pair. As a result, for each two consecutive mixed operators used, a distinct error will be displayed, pointing to where the specific operator that breaks the rule is used:

var foo = a && b || c || d;
1

会产生

¥will generate

1:13  Unexpected mix of '&&' and '||'. (no-mixed-operators)
1:18  Unexpected mix of '&&' and '||'. (no-mixed-operators)
1
2

规则详情

¥Rule Details

此规则检查 BinaryExpression、LogicalExpression 和 ConditionalExpression。

¥This rule checks BinaryExpression, LogicalExpression and ConditionalExpression.

此规则可能与 no-extra-parens 规则冲突。如果同时使用此规则和 no-extra-parens 规则，则需要使用 no-extra-parens 规则的 nestedBinaryExpressions 选项。

¥This rule may conflict with no-extra-parens rule. If you use both this and no-extra-parens rule together, you need to use the nestedBinaryExpressions option of no-extra-parens rule.

此规则的错误代码示例：

¥Examples of incorrect code for this rule:

/*eslint no-mixed-operators: "error"*/

var foo = a && b < 0 || c > 0 || d + 1 === 0;
var foo = a + b * c;
1
2
3
4

此规则的正确代码示例：

¥Examples of correct code for this rule:

/*eslint no-mixed-operators: "error"*/

var foo = a || b || c;
var foo = a && b && c;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 || c > 0 || d + 1 === 0);
var foo = a + (b * c);
var foo = (a + b) * c;
1
2
3
4
5
6
7
8

选项

¥Options

{
    "no-mixed-operators": [
        "error",
        {
            "groups": [
                ["+", "-", "*", "/", "%", "**"],
                ["&", "|", "^", "~", "<<", ">>", ">>>"],
                ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
                ["&&", "||"],
                ["in", "instanceof"]
            ],
            "allowSamePrecedence": true
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

此规则有 2 个选项。

¥This rule has 2 options.

• groups(string[][]) - 指定要检查的运算符组。groups 选项是组列表，组是二元运算符列表。默认运算符组定义为算术、按位、比较、逻辑和关系运算符。注意：三元运算符(?:) 可以是任何组的一部分，并且默认情况下允许与其他运算符混合。

  ¥groups (string[][]) - specifies operator groups to be checked. The groups option is a list of groups, and a group is a list of binary operators. Default operator groups are defined as arithmetic, bitwise, comparison, logical, and relational operators. Note: Ternary operator(?:) can be part of any group and by default is allowed to be mixed with other operators.

• allowSamePrecedence(boolean) - 指定是否允许混合运算符，如果它们具有相同的优先级。默认为 true。

  ¥allowSamePrecedence (boolean) - specifies whether to allow mixed operators if they are of equal precedence. Default is true.

groups

以下运算符可用于 groups 选项：

¥The following operators can be used in groups option:

• 算术运算符："+", "-", "*", "/", "%", "**"

  ¥Arithmetic Operators: "+", "-", "*", "/", "%", "**"

• 位运算符："&", "|", "^", "~", "<<", ">>", ">>>"

  ¥Bitwise Operators: "&", "|", "^", "~", "<<", ">>", ">>>"

• 比较运算符："==", "!=", "===", "!==", ">", ">=", "<", "<="

  ¥Comparison Operators: "==", "!=", "===", "!==", ">", ">=", "<", "<="

• 逻辑运算符："&&", "||"

  ¥Logical Operators: "&&", "||"

• 合并运算符："??"

  ¥Coalesce Operator: "??"

• 关系运算符："in", "instanceof"

  ¥Relational Operators: "in", "instanceof"

• 三元运算符：?:

  ¥Ternary Operator: ?:

现在，考虑以下组配置：{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}。此配置中指定了 2 个组：按位运算符和逻辑运算符。此规则检查运算符是否仅属于同一组。在这种情况下，此规则检查位运算符和逻辑运算符是否混合，但忽略所有其他运算符。

¥Now, consider the following group configuration: {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}. There are 2 groups specified in this configuration: bitwise operators and logical operators. This rule checks if the operators belong to the same group only. In this case, this rule checks if bitwise operators and logical operators are mixed, but ignores all other operators.

使用 {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

/*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a && b < 0 || c > 0 || d + 1 === 0;
var foo = a & b | c;
1
2
3
4

/*eslint no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/

var foo = a || b ? c : d;

var bar = a ? b || c : d;

var baz = a ? b : c || d;
1
2
3
4
5
6
7

使用 {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

/*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a || b > 0 || c + 1 === 0;
var foo = a && b > 0 && c + 1 === 0;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
var foo = (a & b) | c;
var foo = a & (b | c);
var foo = a + b * c;
var foo = a + (b * c);
var foo = (a + b) * c;
1
2
3
4
5
6
7
8
9
10
11

/*eslint no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/

var foo = (a || b) ? c : d;
var foo = a || (b ? c : d);

var bar = a ? (b || c) : d;

var baz = a ? b : (c || d);
var baz = (a ? b : c) || d;
1
2
3
4
5
6
7
8
9

allowSamePrecedence

使用 {"allowSamePrecedence": true} 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with {"allowSamePrecedence": true} option:

/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/

// + and - have the same precedence.
var foo = a + b - c;
1
2
3
4

使用 {"allowSamePrecedence": false} 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with {"allowSamePrecedence": false} option:

/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - have the same precedence.
var foo = a + b - c;
1
2
3
4

使用 {"allowSamePrecedence": false} 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with {"allowSamePrecedence": false} option:

/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - have the same precedence.
var foo = (a + b) - c;
1
2
3
4

何时不使用

¥When Not To Use It

如果你不想收到有关混合运算符的通知，那么禁用此规则是安全的。

¥If you don’t want to be notified about mixed operators, then it’s safe to disable this rule.

相关规则

• no-extra-parens

版本

此规则是在 ESLint v2.12.0 中引入。

资源

• 规则源码
• 测试源码