quote-props

要求物件實字屬性名稱使用引號

物件實字屬性名稱可以用兩種方式定義：使用字面值或使用字串。例如，這兩個物件是等效的

var object1 = {
    property: true
};

var object2 = {
    "property": true
};
1
2
3
4
5
6
7

在許多情況下，選擇使用識別符號而不是字串，反之亦然，都沒關係。即便如此，您可能仍決定在程式碼中強制執行一致的風格。

然而，在某些情況下，您必須使用引號

1. 如果您使用的是 ECMAScript 3 JavaScript 引擎（例如 IE8），並且想要使用關鍵字（例如 if）作為屬性名稱。此限制已在 ECMAScript 5 中移除。
2. 您想要在屬性名稱中使用非識別符號字元，例如具有帶有空格的屬性，如 "one two"。

另一個引號確實重要的例子是當使用數字字面值作為屬性鍵時

var object = {
    1e2: 1,
    100: 2
};
1
2
3
4

乍看之下可能沒問題，但實際上此程式碼在 ECMAScript 5 嚴格模式下會拋出語法錯誤。發生這種情況是因為 1e2 和 100 在用作屬性名稱之前被強制轉換為字串。String(1e2) 和 String(100) 都恰好等於 "100"，這會導致「物件實字中不允許重複的資料屬性在嚴格模式下」錯誤。像這樣的問題可能很難偵錯，因此有些人更喜歡要求所有屬性名稱都加上引號。

規則詳情

此規則要求物件實字屬性名稱使用引號。

選項

此規則有兩個選項，一個字串選項和一個物件選項。

字串選項

• "always"（預設）要求所有物件實字屬性名稱都加上引號
• "as-needed" 禁止在非嚴格要求的物件實字屬性名稱周圍使用引號
• "consistent" 強制執行一致的引號樣式；在給定的物件中，所有屬性都應該加上引號，或者都不應該加上引號
• "consistent-as-needed" 如果任何名稱嚴格要求引號，則要求所有物件實字屬性名稱都加上引號，否則禁止在物件屬性名稱周圍使用引號

物件選項

• "keywords": true 要求用作物件屬性名稱的語言關鍵字使用引號（僅在使用 as-needed 或 consistent-as-needed 時適用）
• "unnecessary": true（預設）禁止在非嚴格要求的物件實字屬性名稱周圍使用引號（僅在使用 as-needed 時適用）
• "unnecessary": false 允許在非嚴格要求的物件實字屬性名稱周圍使用引號（僅在使用 as-needed 時適用）
• "numbers": true 要求用作物件屬性名稱的數字使用引號（僅在使用 as-needed 時適用）

always

使用預設 "always" 選項時，不正確 程式碼範例

/*eslint quote-props: ["error", "always"]*/

var object = {
    foo: "bar",
    baz: 42
};
1
2
3
4
5
6

使用預設 "always" 選項時，正確 程式碼範例

/*eslint quote-props: ["error", "always"]*/

var object1 = {
    "foo": "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
    'baz': 42,
    'qux-lorem': true
};

var object3 = {
    foo() {
        return;
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

as-needed

使用 "as-needed" 選項時，不正確 程式碼範例

/*eslint quote-props: ["error", "as-needed"]*/

var object = {
    "a": 0,
    "0": 0,
    "true": 0,
    "null": 0
};
1
2
3
4
5
6
7
8

使用 "as-needed" 選項時，正確 程式碼範例

/*eslint quote-props: ["error", "as-needed"]*/

var object1 = {
    "a-b": 0,
    "0x0": 0,
    "1e2": 0
};

var object2 = {
    foo: 'bar',
    baz: 42,
    true: 0,
    0: 0,
    'qux-lorem': true
};

var object3 = {
    foo() {
        return;
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

consistent

使用 "consistent" 選項時，不正確 程式碼範例

/*eslint quote-props: ["error", "consistent"]*/

var object1 = {
    foo: "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
    baz: 42
};
1
2
3
4
5
6
7
8
9
10
11
12

使用 "consistent" 選項時，正確 程式碼範例

/*eslint quote-props: ["error", "consistent"]*/

var object1 = {
    "foo": "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
    'baz': 42
};

var object3 = {
    foo: 'bar',
    baz: 42
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

consistent-as-needed

使用 "consistent-as-needed" 選項時，不正確 程式碼範例

/*eslint quote-props: ["error", "consistent-as-needed"]*/

var object1 = {
    foo: "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    'foo': 'bar',
    'baz': 42
};
1
2
3
4
5
6
7
8
9
10
11
12

使用 "consistent-as-needed" 選項時，正確 程式碼範例

/*eslint quote-props: ["error", "consistent-as-needed"]*/

var object1 = {
    "foo": "bar",
    "baz": 42,
    "qux-lorem": true
};

var object2 = {
    foo: 'bar',
    baz: 42
};
1
2
3
4
5
6
7
8
9
10
11
12

keywords

使用 "as-needed", { "keywords": true } 選項時，額外的 不正確 程式碼範例

/*eslint quote-props: ["error", "as-needed", { "keywords": true }]*/

var x = {
    while: 1,
    volatile: "foo"
};
1
2
3
4
5
6

使用 "consistent-as-needed", { "keywords": true } 選項時，額外的 不正確 程式碼範例

/*eslint quote-props: ["error", "consistent-as-needed", { "keywords": true }]*/

var x = {
    "prop": 1,
    "bar": "foo"
};
1
2
3
4
5
6

unnecessary

使用 "as-needed", { "unnecessary": false } 選項時，額外的 正確 程式碼範例

/*eslint quote-props: ["error", "as-needed", { "keywords": true, "unnecessary": false }]*/

var x = {
    "while": 1,
    "foo": "bar"  // Would normally have caused a warning
};
1
2
3
4
5
6

numbers

使用 "as-needed", { "numbers": true } 選項時，額外的 不正確 程式碼範例

/*eslint quote-props: ["error", "as-needed", { "numbers": true }]*/

var x = {
    100: 1
}
1
2
3
4
5

何時不該使用它

如果您不在意屬性名稱是否一致地用引號包裝，並且您的目標不是舊版 ES3 環境，請關閉此規則。

版本

此規則在 ESLint v0.0.6 中引入。

延伸閱讀

ECMAScript 5 相容性表格
kangax.github.io

JavaScript 中未加引號的屬性名稱 / 物件鍵 · Mathias Bynens
mathiasbynens.be

資源

• 規則來源
• 測試來源