尾隨逗號

Baseline 廣泛可用 *

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

末尾逗號(有時也稱為“最終逗號”)在向 JavaScript 程式碼新增新元素、引數或屬性時非常有用。如果你想新增一個新屬性,如果上一行已經使用了末尾逗號,你就可以新增新行而無需修改上一行。這使得版本控制的差異(diff)更清晰,並且編輯程式碼可能也更省事。

JavaScript 從一開始就允許在陣列字面量中使用末尾逗號。現在,物件字面量、函式引數、命名匯入、命名匯出等也允許使用末尾逗號。

然而,JSON 不允許所有末尾逗號。

描述

JavaScript 允許在接受逗號分隔的值列表且最後一個項後可能還有更多值的地方使用末尾逗號。這包括:

在所有這些情況下,末尾逗號都是完全可選的,並且不會以任何方式改變程式的語義。

當新增、刪除或重新排序跨越多行的列表中的項時,它特別有用,因為它減少了需要更改的行數,這有助於編輯和審查差異(diff)。

diff
  [
    "foo",
+   "baz",
    "bar",
-   "baz",
  ]

示例

字面量中的末尾逗號

陣列

JavaScript 會忽略陣列字面量中的末尾逗號

js
const arr = [
  1,
  2,
  3,
];

arr; // [1, 2, 3]
arr.length; // 3

如果使用多個末尾逗號,則會產生一個省略(或空洞)。帶有空洞的陣列稱為稀疏陣列密集陣列沒有空洞)。當迭代陣列時,例如使用Array.prototype.forEach()Array.prototype.map(),陣列空洞會被跳過。稀疏陣列通常不受歡迎,所以你應該避免使用多個末尾逗號。

js
const arr = [1, 2, 3, , ,];
arr.length; // 5

物件

物件字面量中的末尾逗號也是合法的

js
const object = {
  foo: "bar",
  baz: "qwerty",
  age: 42,
};

函式中的末尾逗號

函式引數列表中也允許使用末尾逗號。

引數定義

以下函式定義對是合法的,並且彼此等價。末尾逗號不影響函式宣告的length屬性或它們的arguments物件。

js
function f(p) {}
function f(p,) {}

(p) => {};
(p,) => {};

末尾逗號也適用於類或物件的方法定義

js
class C {
  one(a,) {}
  two(a, b,) {}
}

const obj = {
  one(a,) {},
  two(a, b,) {},
};

函式呼叫

以下函式呼叫對是合法的,並且彼此等價。

js
f(p);
f(p,);

Math.max(10, 20);
Math.max(10, 20,);

非法的末尾逗號

僅包含逗號的函式引數定義或函式呼叫將丟擲SyntaxError。此外,當使用剩餘引數時,不允許使用末尾逗號

js
function f(,) {} // SyntaxError: missing formal parameter
(,) => {};       // SyntaxError: expected expression, got ','
f(,)             // SyntaxError: expected expression, got ','

function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','

解構中的末尾逗號

解構模式中也允許使用末尾逗號

js
// array destructuring with trailing comma
[a, b,] = [1, 2];

// object destructuring with trailing comma
const o = {
  p: 42,
  q: true,
};
const { p, q, } = o;

然而,如果存在剩餘元素,則不允許在剩餘元素之後使用末尾逗號

js
const [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

JSON 中的末尾逗號

由於 JSON 基於 JavaScript 語法的非常受限的子集,JSON 中不允許使用末尾逗號

這兩行都將丟擲SyntaxError

js
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse('{"foo" : 1, }');
// SyntaxError JSON.parse: unexpected character
// at line 1 column 14 of the JSON data

省略末尾逗號以正確解析 JSON

js
JSON.parse("[1, 2, 3, 4 ]");
JSON.parse('{"foo" : 1 }');

命名匯入和命名匯出中的末尾逗號

命名匯入命名匯出中允許使用末尾逗號。

命名匯入

js
import {
  A,
  B,
  C,
} from "D";

import { X, Y, Z, } from "W";

import { A as B, C as D, E as F, } from "Z";

命名匯出

js
export {
  A,
  B,
  C,
};

export { A, B, C, };

export { A as B, C as D, E as F, };

動態匯入中的末尾逗號

只有當執行時也實現了第二個options引數時,動態匯入中才允許使用末尾逗號。

js
import("D",);
import(
  "D",
  { with: { type: "json" } },
);

量詞字首

注意:量詞中的末尾逗號實際上會改變其語義,從匹配“恰好n個”變為匹配“至少n個”。

js
/x{2}/; // Exactly 2 occurrences of "x"; equivalent to /xx/
/x{2,}/; // At least 2 occurrences of "x"; equivalent to /xx+/
/x{2,4}/; // 2 to 4 occurrences of "x"; equivalent to /xxx?x?/

規範

規範
ECMAScript® 2026 語言規範
# prod-Elision
ECMAScript® 2026 語言規範
# prod-ObjectLiteral
ECMAScript® 2026 語言規範
# prod-ArrayLiteral
ECMAScript® 2026 語言規範
# prod-Arguments
ECMAScript® 2026 語言規範
# prod-FormalParameters
ECMAScript® 2026 語言規範
# prod-CoverParenthesizedExpressionAndArrowParameterList
ECMAScript® 2026 語言規範
# prod-NamedImports
ECMAScript® 2026 語言規範
# prod-NamedExports
ECMAScript® 2026 語言規範
# prod-QuantifierPrefix
ECMAScript® 2026 語言規範
# prod-annexB-InvalidBracedQuantifier

瀏覽器相容性

另見