Intl.ListFormat

發布時間 · 標籤為 Intl

現代網路應用程式經常使用包含動態資料的清單。例如，相片檢視器應用程式可能會顯示類似以下內容

此相片包含Ada、Edith、和 Grace。

文字遊戲可能會使用不同類型的清單

選擇你的超能力：隱形、心靈感應、或同理心。

由於每種語言都有不同的清單格式慣例和字詞，實作在地化清單格式器並非易事。這不僅需要為你想要支援的每種語言提供所有字詞的清單（例如上述範例中的「和」或「或」），此外，你還需要編碼所有這些語言的精確格式慣例！Unicode CLDR 提供這些資料，但若要在 JavaScript 中使用，必須將其嵌入並與其他函式庫程式碼一起發布。很遺憾，這會增加此類函式庫的套件大小，進而對載入時間、剖析/編譯成本和記憶體消耗產生負面影響。

全新的 Intl.ListFormat API 將此負擔轉移到 JavaScript 引擎，該引擎可以發布地區資料，並直接讓 JavaScript 開發人員使用。Intl.ListFormat 能在地化清單格式，同時不犧牲效能。

使用範例 #

以下範例說明如何使用英文建立用於連接詞的清單格式器

const lf = new Intl.ListFormat('en');
lf.format(['Frank']);
// → 'Frank'
lf.format(['Frank', 'Christine']);
// → 'Frank and Christine'
lf.format(['Frank', 'Christine', 'Flora']);
// → 'Frank, Christine, and Flora'
lf.format(['Frank', 'Christine', 'Flora', 'Harrison']);
// → 'Frank, Christine, Flora, and Harrison'

也可以透過選用的 options 參數支援析取（英文中的「or」）

const lf = new Intl.ListFormat('en', { type: 'disjunction' });
lf.format(['Frank']);
// → 'Frank'
lf.format(['Frank', 'Christine']);
// → 'Frank or Christine'
lf.format(['Frank', 'Christine', 'Flora']);
// → 'Frank, Christine, or Flora'
lf.format(['Frank', 'Christine', 'Flora', 'Harrison']);
// → 'Frank, Christine, Flora, or Harrison'

以下是如何使用不同語言（中文，語言代碼為 zh）的範例

const lf = new Intl.ListFormat('zh');
lf.format(['永鋒']);
// → '永鋒'
lf.format(['永鋒', '新宇']);
// → '永鋒和新宇'
lf.format(['永鋒', '新宇', '芳遠']);
// → '永鋒、新宇和芳遠'
lf.format(['永鋒', '新宇', '芳遠', '澤遠']);
// → '永鋒、新宇、芳遠和澤遠'

options 參數能支援更進階的使用方式。以下概述各種選項及其組合，以及它們如何對應到 UTS#35 定義的清單模式

類型選項說明範例
標準（或無類型）{}（預設）任意佔位符的典型「與」清單「一月、二月和三月」
或{ type: 'disjunction' }任意佔位符的典型「或」清單「一月、二月或三月」
單位{ type: 'unit' }適用於寬單位的清單「3 英尺，7 英寸」
單位簡寫{ type: 'unit', style: 'short' }適用於短單位的清單「3 英尺，7 英寸」
單位窄{ type: 'unit', style: 'narrow' }適用於窄單位的清單，螢幕空間非常有限'3′ 7″'

請注意，在許多語言（例如英文）中，這些清單之間可能沒有差異。在其他語言中，間距、連接詞的長度或存在與否，以及分隔符號可能會有所不同。

結論 #

隨著 Intl.ListFormat API 變得越來越普及，您會發現程式庫會放棄對硬編碼 CLDR 資料庫的依賴，轉而採用原生清單格式化功能，從而改善載入時間效能、解析和編譯時間效能、執行時間效能和記憶體使用量。

Intl.ListFormat 支援 #

關於此功能支援清單