toLocaleString()とは
toLocaleStringはDate オブジェクトやNumber オブジェクトの値を人間が読みやすい形式の文字列に変換するためのメソッドです。
例えば、new Date()にtoLocaleString('ja-JP')を使用すると、「2025/1/23 12:34:56」の形式で日時を取得できます。
const date = new Date('2025/1/23 12:34:56')
console.log(date.toLocaleString('ja-JP'))
// 2025/1/23 12:34:56月日の頭に0を付けて、スラッシュの区切りをハイフンにしたい場合はオプションを追加して、「/」を「-」に置換します。
const date = new Date('2025/1/23 12:34:56')
const options = {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
}
const formattedDate = date.toLocaleString('ja-JP', options).replaceAll('/', '-')
console.log(formattedDate)
// 2025-01-23 12:34:56日時ではなく日付のみ、または時間のみの場合はtoLocaleDateString()またはtoLocaleTimeString()を使用します。
const date = new Date('2025/1/23 12:34:56')
console.log(date.toLocaleDateString('ja-JP'))
// 2025/1/23
console.log(date.toLocaleTimeString('ja-JP'))
// 12:34:56new Date()からtoLocaleDateString()を使用せずにYYYY/MM/DD形式の日付を生成しようとすると、getFullYear(), getMonth(), geteDate() などをそれぞれ取得しなければならなくなるので、これを避けるために日付の表示にはtoLocaleDateString()が使用されていることが多いです。
'ja-JP' を省略すると表示形式が変わってしまう
'ja-JP' を省略してtoLocaleString()やtoLocaleDateString()を使用しているWebサイトがありますが、このようなサイトだと海外からアクセスした際にその国の形式で表示されてしまうことがあります。
例えばアメリカで以下のコードを実行すると「2025/1/23 12:34:56」ではなく「1/24/2025, 8:27:33 PM」形式で表示されてしまいます。
const date = new Date('2025/1/23 12:34:56')
console.log(date.toLocaleString())
// アメリカで実行した場合
// 1/23/2025, 12:34:56 PM
console.log(date.toLocaleDateString())
// アメリカで実行した場合
// 1/23/2025
console.log(date.toLocaleTimeString())
// アメリカで実行した場合
// 12:34:56 PM
console.log(date.toLocaleString('en-US'))
// 'en-US' を付けるとアメリカ(英語)で実行した場合と同じ表示結果になる
// 1/23/2025, 12:34:56 PM日本人が見ることを想定したWebサイトの場合、閲覧する国によって日時の表示内容を変えるのは不適切なので、toLocaleString()で 'ja-JP' を省略してはいけません。
日本人向けのWebサイトを日本人が国内で閲覧するとは限らないです。
カンマ区切りの利用でも注意が必要
toLocaleString()を数値のカンマ区切りに使用されていることがあります。
こちらのケースでも 'ja-JP' を省略するとカンマ区切りにならないことがあります。
例えばドイツの場合は数値はカンマではなくドットで区切るため、表示内容が異なります。
const num = 123456789
console.log(num.toLocaleString('ja-JP'))
// 設定が日本の場合
// 123,456,789
console.log(num.toLocaleString('de-DE'))
// 設定がドイツの場合
// 123.456.789また、toLocaleString()を数値ではなく文字列に使用した場合はカンマ区切りにはなりません。
このような間違いもたまに見かけますので注意が必要です。
const stringNum = '123456789'
console.log(stringNum.toLocaleString('ja-JP'))
// 数値ではなく文字列の数字だとカンマ区切りが追加されない
// 123456789まとめ
toLocaleString()を 'ja-JP' を省略すると、国によって表示形式が変わるので日本人の閲覧を前提としている場合は必ず 'ja-JP' を指定してください。
toLocaleString() は日時の形式だけでなく、数値のカンマ区切りにも使用されているケースがあるので、その場合も必ず 'ja-JP' を指定したほうが良いです。
