DateのtoLocaleStringメソッドで引数「locales」や「options」を指定した際の表示の違い
JavaScriptでDateオブジェクトに格納された日時をライブラリを使わずにフォーマットする方法はないと思っていましたが、IEを気にしなくていいのであれば、「toLocaleDateString」や「toLocaleString」のメソッドがある程度使えることを知ったので、引数の「locales」や「options」を指定した際に表示がどのように変わるのか確認してみました。
目次
- toLocaleString
- toLocaleDateString
- 補足
- 参考リンク
toLocaleString
toLocaleStringメソッドで、ロケールやタイムゾーンの指定、また和暦やゼロ埋め表示などの設定は以下の通りです。
var now = new Date();
// 指定なし
console.log(now.toLocaleString());
// ロケール
console.log(now.toLocaleString('ja-JP'));
// ロケール（和暦）
console.log(now.toLocaleString('ja-JP-u-ca-japanese'));
// タイムゾーン
console.log(now.toLocaleString('ja-JP', { timeZone: 'Asia/Tokyo'}));
// 西暦2桁
console.log(now.toLocaleString('ja-JP', { year: '2-digit', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }));
// ゼロ埋め
console.log(now.toLocaleString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }));
// 12時間表示
console.log(now.toLocaleString('ja-JP', { hour12: true }));
それぞれの実行結果は以下の通り。
| 指定なし | |
|---|---|
| ロケール（ja-JP） | |
| ロケール（ja-JP-u-ca-japanese） | |
| タイムゾーン（Asia/Tokyo） | |
| 西暦2桁 | |
| ゼロ埋め | |
| 12時間表示 |
toLocaleDateString
時間が不要な場合、toLocaleDateStringメソッドを使います。設定方法は同じ。
var now = new Date();
// 指定なし
console.log(now.toLocaleDateString());
// ロケール
console.log(now.toLocaleDateString('ja-JP'));
// ロケール（和暦）
console.log(now.toLocaleDateString('ja-JP-u-ca-japanese'));
// タイムゾーン
console.log(now.toLocaleDateString('ja-JP', { timeZone: 'Asia/Tokyo'}));
// 西暦2桁
console.log(now.toLocaleDateString('ja-JP', { year: '2-digit', month: 'numeric', day: 'numeric' }));
// ゼロ埋め
console.log(now.toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' }));
それぞれの実行結果は以下の通り。
| 指定なし | |
|---|---|
| ロケール（ja-JP） | |
| ロケール（ja-JP-u-ca-japanese） | |
| タイムゾーン（Asia/Tokyo） | |
| 西暦2桁 | |
| ゼロ埋め |
補足
タイムゾーンについてはブラウザからアクセスした場合は自動で日本（Asia/Tokyo）での表示となりますが、サーバ側で使用する場合は指定しないとUTCでフォーマットされてしまうことがあります（FirebaseのCloud Functionsで使用したらデフォルトではUTCでフォーマットされた）。
実行結果についてはページ表示時にフォーマットしているので各種ブラウザで動作確認してみてください。IEでは引数 options の timeZone が使えないのでエラーになります。
日本式の表示の場合、ロケールには ja、ja-JP、ja-JP-u-ca-japanese（和暦） が使えます。ja と ja-JP はブラウザによって認識できるかどうかが違うようなので、それを考えると、ちゃんとしたサイトに日付のフォーマットを実装する場合は、まだまだ、ライブラリや自前で用意した方が安心かもしれません。