リストのローカライズに便利なIntl.ListFormatコンストラクタ

IntlオブジェクトはECMAScriptの国際化APIの名前空間で言語に依存した日付フォーマットや数字フォーマットを提供しています。Google Chrome72からリスト表記のローカライズに便利なIntl.ListFormatコンストラクタが利用可能になりました。

Intl.ListFormat

Intl.ListFormatコンストラクタは可変長リストをロケールに応じた方法でフォーマットしてくれます。

const listFormatter = new Intl.ListFormat('en');

listFormatter.format(['January']);
// → "January"
listFormatter.format(['January', 'February']);
// → "January and February"
listFormatter.format(['January', 'February', 'March']);
// → "January, February, and March"

Intl.ListFormatコンストラクタは第1引数にロケールの指定、第2引数にオプションをとります。このオプションにパラメーターを設定することで、接続語の切り替えやリストの長さを調整できます（詳細については言語仕様を参照してください）。

const listFormatter = new Intl.ListFormat('en', { type: 'disjunction' });
listFormatter.format(['January', 'February', 'March']);
// → "January, February, or March"

const listFormatter2 = new Intl.ListFormat('en', { style:'narrow', type:'unit' });
listFormatter2.format(['January', 'February', 'March']);
// → "January February March"

const listFormatter3 = new Intl.ListFormat('ja', { type: 'disjunction' });
listFormatter3.format(['1月','2月','3月']);
// → "1月、2月、または3月"

言語ごとに異なるリストのフォーマット規則と単語が存在するため、JavaScriptでローカライズされたリストフォーマッターを実装することは通常容易ではありません。Unicode CLDRはフォーマット規則などのデータを提供していますが、CLDRで提供されている大量のデータを解析して利用するのは高コストであり現実的ではないでしょう。

Intlオブジェクトはビルトインオブジェクトであるため、導入が容易な上に外部データやライブラリを読み込む必要もありません。Intl.listFormatコンストラクタが他のブラウザでも使えるようになればローカライズのハードルがまたひとつ下がりますね。

フロントエンドブログでは以前、「JavaScriptのビルトインオブジェクトから日本語が返ってくる面白さ」という記事でIntl.RelativeTimeFormatオブジェクトの紹介もしています。ぜひご覧ください。