JavaScript で数値をフォーマットする

さまざまな国や地域の人々が、数値をフォーマットするさまざまな方法に従うさまざまな方法があります。また、訪問者が当社の Web サイトにアクセスする世界のどの部分に基づいて、当社の Web サイトで数値をフォーマットしたい場合があります。

ユーザーの場所に基づいてこれを手動で実行しようとすると、困難になる可能性があります。ただし、JavaScript で数値をフォーマットするより良い方法があるため、手動で行う必要はありません。これは、toLocalString() メソッドを使用することです。このメソッドは、数値の言語固有の表現を含む文字列を返します。

JavaScript の toLocaleString() メソッドを使用して数値をフォーマットする

最初のパラメータは locales で、2 番目のパラメータは options です。これらのパラメーターは両方ともオプションです。つまり、必須ではありません。これらのパラメータを渡さなくても、メソッドを直接実行できます。数値をフォーマットする場合（この場合はフォーマットします）、それらのパラメーターを渡す必要があります。

最初にこれらの各パラメーターの意味を理解しましょう。その後、コードでそれらを使用する方法を説明します。

1. locales パラメータ

locales は、toLocalString() メソッドが受け入れる最初のパラメーターです。これは、BCP47 言語タグの文字列またはそのような文字列の配列を表します。BCP 47 言語タグは、人間の言語を識別するためのコードです。

たとえば、タグ ar-SA は、サウジアラビアの SA の地域で話されている ar で表されるアラビア語用であることを示しています。したがって、この文字列を最初の引数として渡すと、アラビア語で記述されるように数値がフォーマットされます。

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});

console.log(eArabic(12345));

出力：

١٢٬٣٤٥

ここでは、パラメータとして数値をとる eArabic と呼ばれる矢印関数を作成しました。ここで、この矢印関数に番号 12345 を渡します。この関数は、toLocalString() メソッドを使用して、数値 12345 をアラビア語の同等の形式 ar-SA に変換することを目的としています。

上記のコード全体を直接コピーして貼り付け、ブラウザのコンソールウィンドウで実行して、出力を確認できます。

すべての BCP47 言語タグの詳細については、このリソースを参照してください。

ロケールとして undefined を渡すこともできます。訪問者のブラウザで設定されているデフォルトの言語を使用します。したがって、誰かがブラウザの言語をドイツ語に変更した場合、これはドイツ語形式で番号を表示します。

2。options パラメータ

options はオブジェクトであり、toLocalString() メソッドが受け入れる 2 番目のパラメーターです。これはオブジェクトであるため、このパラメーターは、currency、currencySign、style、unitDisplay などのさまざまなプロパティを取ることができます。

上記と同じ例を取り上げて、options パラメーターを理解するように変更してみましょう。以前は、番号 12345 を取得してアラビア語にフォーマットしていました。次に、通貨記号を使用して currency のスタイルを指定し、その数値の最後に options を使用して小数桁を追加することにより、数値に通貨フォーマットを指定しましょう。

let eArabic = (number => {
  return number.toLocaleString(
      'ar-SA', {style: 'currency', currency: 'SAR', minimumFractionDigits: 3});
});

console.log(eArabic(12345));

出力：

١٢٬٣٤٥٫٠٠٠ ر.س

この場合、toLocaleString() メソッドに、オブジェクトである options パラメーターも追加しました。現在、3つのプロパティが必要です。style プロパティは数値を通貨形式でフォーマットし、currency プロパティはそれが表す通貨を示します。この場合、Saudi Riyal SAR および minimumFractionDigits プロパティはその数を表します。数値の最後に表示する小数桁。

ここで、style プロパティに値 currency を設定する場合は、プロパティ currency にも何らかの値を設定する必要があります。そうしないと、タイプエラーが発生します：Currency code is required with currency style.

上記のプログラムの出力では、最初に通貨名がサウジアラビアリヤルر.س. になります。USD の場合、$ 記号になります。次に、アラビア語 ١٢٬٣٤٥ の番号自体があります。米ドルの場合、12,345 になります。最後に、アラビア語で٫٠٠٠ として表され、USD が .000 として表されるドットの後に 3 桁の小数桁があります。

// USD format
$12, 345.000

ここでは、アラビア語を理解するのが難しい場合があるため、米国の通貨形式の出力をサウジアラビアの通貨形式の出力と簡単に関連付けることができるように提供しています。

数値のフォーマット方法に応じて、コードでこれらのパラメーターとオブジェクトプロパティのいずれかを使用できます。また、この記事で提供されているさまざまなリンクにアクセスして、JavaScript で数値をフォーマットするための toLocalString() の詳細を確認することもできます。