quote-props

要求在物件字面值屬性名稱周圍加上引號

此規則在 ESLint v8.53.0 中已被棄用。請使用 @stylistic/eslint-plugin-js 中對應的規則。

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

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

資源

• 規則來源
• 測試來源