`Intl.ListFormat`
モダンなWebアプリケーションでは、動的なデータで構成されたリストがよく使用されます。例えば、写真ビューアアプリでは以下のような表示がされることがあります:
この写真にはAda、Edith、_および_Graceが含まれます。
テキストベースのゲームでは、異なる種類のリストが用いられるかもしれません:
あなたの超能力を選んでください:不可視化、念動力、_または_共感力。
各言語ごとにリストのフォーマットの慣例や単語が異なるため、ローカライズされたリストフォーマッタを実装するのは簡単ではありません。サポートしたいすべての言語の単語(上記の例では「and」や「or」など)のリストが必要なだけでなく、それらの言語における特定のフォーマットの慣例もすべてエンコードする必要があります。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'
英語で「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' |
unit-short | { type: 'unit', style: 'short' } | 短い形式の単位向けのリスト | '3 ft, 7 in' |
unit-narrow | { type: 'unit', style: 'narrow' } | 画面スペースが非常に限られている場合の狭い形式の単位向けのリスト | '3′ 7″' |
多くの言語(英語など)では、これら多くのリスト間で違いがない可能性があります。一方、他の言語では、スペーシング、接続詞の長さや存在、あるいは区切り記号が異なることがあります。
結論
Intl.ListFormat
APIが広く利用可能になるにつれて、ライブラリはハードコードされたCLDRデータベースへの依存を放棄し、ネイティブのリストフォーマット機能を採用して、ロードタイムのパフォーマンス、解析およびコンパイルタイムのパフォーマンス、実行時のパフォーマンス、メモリ使用量を向上させるでしょう。