【初心者向け】toLocaleStringで数値や日付のフォーマット

はじめに

こんにちは。
JavaScriptには「toLocaleString」という、数値や日付を地域や言語ごとに適した形式でフォーマットできるメソッドがあります。このメソッドは、金額や日付の表示など、さまざまな場面で役立ちます。
この記事ではtoLocaleStringメソッドの基本的な使い方や注意点を紹介します。

基本的な使い方

まずは、toLocaleStringメソッドの使い方を簡単に説明します。
toLocaleStringメソッドには、第一引数と第二引数があります。

toLocaleString(ロケール, オプション);

◆第一引数には、ロケールを指定します。指定する際には、BCP47言語タグを使いますが、これは言語や地域の識別子になります。ちなみに日本の場合は、「ja-JP」になります。
引数が無い場合は、実行環境によって自動的に設定されます。

ロケールとは
地域や言語の設定のこと。他に時間帯や日付・時刻の表記、通貨単位などの設定も含まれる。

BCP47言語タグに関する参考サイト

◆第二引数は、オプションを指定することでき、通貨フォーマットや日付フォーマットなど、様々な形式にフォーマットすることができます。
数値に関するオプション
日付に関するオプション

様々なフォーマット

次に、基本的なフォーマットからオプションを使った活用例をいくつか紹介します。

1.数字フォーマット

数字をロケールによってフォーマットする例になります。
地域や言語で小数点やカンマ区切りが異なります。

javascript

const number = 1234567.89;
console.log(number.toLocaleString('ja-JP'));  //出力：1,234,567.89 (日本語)
console.log(number.toLocaleString('de-DE'));  //出力：1.234.567,89 (ドイツ語)

2.通貨フォーマット

通貨を指定して通貨記号を付けることができます。
スタイルとしてcurrencyを使い、通貨コードを設定します。
※通貨コードはWikipediaを参考にさせていただきました。

javascript

const money = 1234567.89;
console.log(money.toLocaleString('ja-JP', {style:'currency', currency: 'JPY'}));
//出力：￥1,234,568 (日本円)
console.log(money.toLocaleString('en-US' ,{style: 'currency', currency: 'USD'}));
//出力：$1,234,567.89  (米ドル)

3.単位の表示

スタイルunitを使うと、数値に対して単位を付けて表示することができます。

javascript

const distance = 1000.47;
console.log(distance.toLocaleString('ja-JP', {style: 'unit', unit:'meter'} ));
// 出力：1,000.47 m

const speed = 100;
console.log(speed.toLocaleString('ja-JP', {style: 'unit', unit: 'kilometer'}));
// 出力：100 km

4.日付と時間のフォーマット

toLoacalStringメソッドは、日時のフォーマットにも使えます。
日付や時間を特定の形式で表示することができます。

javascript

const date = new Date();
console.log(date.toLocaleString(`ja-JP`));  //出力：2024/10/24 9:28:38 (日本語)
console.log(date.toLocaleString('en-US'));  //出力：10/24/2024, 9:28:38 AM (英語)

5.日付を和暦で表示

オプションを使うことで日付を和暦表示にすることができます。

javascript

const date = new Date();
console.log(date.toLocaleString('ja-JP-u-ca-japanese', {era: 'long', year: 'numeric', month: 'long', day:'numeric'}));
//出力：令和6年10月24日　(和暦)

ここで登場するja-JP-u-ca-japaneseは、日付を和暦で表示するためのロケールになります。

1.ja-JP：「基本的な使い方」で説明した通り、言語と地域を指定しています。
2.u-ca-japanese：和暦で表示するための指定になります。言語タグの拡張属性といわれるもので、u-の後に属性を付けることができます。今回は、「カレンダー」を表すキーca、「和暦」を表すjapaneseを指定しています。

指定できる属性を詳しく知りたい方は下記リンク先をご覧ください。
※参考サイト

使用上の注意

toLocaleStringメソッドを使う際には、いくつかの注意点があります。
これを理解することで、期待通りの出力が得られるようになります。

1.ロケールの影響

「1.数字フォーマット」を例に挙げると、ロケールによって小数点やカンマ区切りの位置が変わっていることが分かります。この違いには注意が必要です。

javascript

const number = 1234567.89;
console.log(number.toLocaleString('ja-JP'));  //出力：1,234,567.89 (日本語)
console.log(number.toLocaleString('de-DE'));  //出力：1.234.567,89 (ドイツ語)

2.デフォルトロケールに注意

toLocaleStringメソッドは、引数を指定しない場合、実行環境の設定(ロケール)に従って出力されます。これにより、環境によって異なる結果になる可能性があります。
可能であればロケールは指定するのが安全です。

3.オプションに注意

toLocalStringメソッドには様々なオプションがありますが、指定したオプションがサポートされていない可能性もあります。テスト環境で期待通りに動作することを確認しましょう。

まとめ

toLocaleStringメソッドの基本的な使い方や注意点を紹介しました。
様々な形式にフォーマットできる便利なメソッドですが、ロケールやオプションの種類が豊富で指定方法も複雑です。この記事を通して、概念やオプションの使い方について理解が深まっていれば幸いです。
ここまでお読みいただき、ありがとうございました。