【JavaScript ECMAScript】Intl::Intl.NumberFormat.prototype.formatRangeインスタンスメソッドの使い方
Intl.NumberFormat.prototype.formatRange()インスタンスメソッドの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
Intl.NumberFormat.prototype.formatRange()メソッドは、2つの数値を国際化されたルールに基づいて整形し、それらの数値が示す範囲を表現する文字列を生成するメソッドです。
このメソッドは、Intl.NumberFormatオブジェクトのインスタンスに属するもので、ユーザーのロケール（言語と地域）に応じた数値の範囲表示を可能にします。具体的には、開始値と終了値をそれぞれstartとend引数として受け取ります。そして、Intl.NumberFormatインスタンスが作成された際に指定されたロケールや書式設定オプション（例えば、通貨、パーセンテージ、小数点以下の桁数、単位など）を適用して、整形された範囲文字列を返します。
例えば、英語圏の米国（en-US）ロケールで通貨スタイルが設定されている場合、formatRange(10.5, 20.0)は「$10.50 – $20.00」のような文字列を生成します。一方、日本語圏（ja-JP）で単位スタイルが設定されている場合、formatRange(10, 20)は「10個～20個」のような表現になることがあります。
この機能は、ECサイトで商品の価格帯を表示する場合や、データ分析アプリケーションで統計的な数値の範囲を示す場合、あるいはレポートで測定値の変動範囲を示す場合など、さまざまな国際化対応の場面で非常に役立ちます。開始値と終了値が同一の場合でも、このメソッドは単一の数値を適切に表示する形式で範囲文字列を生成します。このメソッドを活用することで、開発者は複雑なロケール固有の書式設定ロジックを自力で実装することなく、一貫性があり、かつユーザーにとって理解しやすい数値範囲の表示を実現できます。
構文(syntax)
1const numberFormat = new Intl.NumberFormat('en-US'); 2const formattedRange = numberFormat.formatRange(10, 20);
引数(parameters)
start, end
- start: フォーマットする範囲の開始値。数値または数値として解釈できるオブジェクト。
- end: フォーマットする範囲の終了値。数値または数値として解釈できるオブジェクト。
戻り値(return)
string
指定された範囲の数値に対して、ロケール固有の書式設定を適用した文字列を返します。