最新のウェブアプリケーションでは、動的なデータからなるリストがよく使用されます。例えば、写真ビューアーアプリでは次のような表示を行う場合があります。
この写真には、Ada、Edith、と Graceが含まれています。
テキストベースのゲームでは、次のような種類のリストを使用する場合があります。
あなたの超能力を選択してください：透明化、念動力、または共感。
各言語には異なるリストの書式設定規則と単語があるため、ローカライズされたリストフォーマッタを実装することは容易ではありません。サポートする各言語について、（上記の例にある「and」や「or」などの）すべての単語のリストが必要なだけでなく、それらの言語すべてに対する正確な書式設定規則をエンコードする必要があります。Unicode CLDRはこのデータを提供していますが、JavaScriptで使用するには、他のライブラリコードと一緒に埋め込んで配布する必要があります。これは残念ながら、そのようなライブラリのバンドルサイズを増加させ、ロード時間、解析/コンパイルコスト、メモリ消費に悪影響を与えます。
最新のIntl.ListFormat APIは、その負担をJavaScriptエンジンに移行します。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'選言（英語では「or」）も、オプションのoptionsパラメータを使用してサポートされています。
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で定義されているリストパターンとの対応について説明します。
| タイプ | オプション | 説明 | 例 |
|---|---|---|---|
| 標準（またはタイプなし） | {}（デフォルト） | 任意のプレースホルダーに対する一般的な「and」リスト | January, February, and March |
| または | { type: 'disjunction' } | 任意のプレースホルダーに対する一般的な「or」リスト | January, February, or March |
| 単位 | { type: 'unit' } | 幅広い単位に適したリスト | 3 feet, 7 inches |
| 単位（短縮形） | { type: 'unit', style: 'short' } | 短い単位に適したリスト | 3 ft, 7 in |
| 単位（狭義） | { type: 'unit', style: 'narrow' } | 画面のスペースが非常に限られている狭い単位に適したリスト | 3′ 7″ |
多くの言語（英語など）では、これらのリストの多くに違いがない場合があります。他の言語では、スペース、接続詞の長さや存在、セパレータなどが変わる場合があります。
結論 #
Intl.ListFormat APIがより広く利用可能になるにつれて、ライブラリはハードコーディングされたCLDRデータベースへの依存を、ネイティブのリスト書式設定機能に置き換えるようになり、ロード時間のパフォーマンス、解析時間とコンパイル時間のパフォーマンス、実行時間のパフォーマンス、メモリ使用率が向上します。
Intl.ListFormat のサポート #
- Chrome: バージョン 72以降でサポート
- Firefox: サポートされていません
- Safari: サポートされていません
- Node.js: バージョン 12以降でサポート
- Babel: サポートされていません