Intl.DateTimeFormat() で日時フォーマット

Intl.DateTimeFormat() は言語に応じた日時のフォーマットができます。

例えば曜日を漢字一文字で欲しいだけで、それだけのために day.js や date-fns などのライブラリをインストールしたくない状況であれば、以下のように取得したことがある人は少なくないと思います。

const date = new Date();
const weekList = ["日", "月", "火", "水", "木", "金", "土"];
const week = weekList[date.getDay()];

これは Intl.DateTimeFormat() を使うと次のように記述できます。

const date = new Date();
const week = Intl.DateTimeFormat("ja-JP", { weekday: "narrow" }).format(date);

実際に出力を確認できるサイトも作ってみたので、色々なブラウザで出力を確認してみたい場合には使ってみてください。

Intl.DateTimeFormat() の引数にはいずれも任意で言語を指定する locales と フォーマット形式を指定する options があります。

locales

locales は省略可能です。省略されたり、undefined や空の配列だった場合、実行時のデフォルトのロケールが使用されます。

Unicode 拡張キーも使用できます。ja-JP で 2021/5/25 となる結果は、ja-JP-u-nu-hanidec-ca-japanese とすると R三/五/一三 となりますブラウザによって異なる表示になることがあります）。

Chrome 90	Safari 13.1

Unicode 拡張キーによる変更は options でも指定可能です。ただし Mac Safari 13.1 では options の calendar や numberingSystem が期待した値になりませんでした。

Chrome 90	Safari 13.1

options

時間表示

時間の桁表示で思っていた結果にならないことが気になって仕様もみてみましたが、どうなるのが正しいのか結局よくわからなかったので、気になったオプションでの実際の表示結果をいくつか見てみました。以下は Chrome と Safari ともに同様の結果となったものです。

2-digit は期待通りといった感じなのですが、numeric のほうは、分と秒も一桁で表示されるのかなと思ったのですが、二桁になりました。

これは分と秒のみを指定したときも同様です。

ただしこれらを単独で指定すると……

時間は0埋めで二桁になり、「時」の単位付き。

今度は逆に分と秒が 2-digit で0埋めされませんでした。「分」や「秒」の単位もつきません。（こういった使い方をすることがないとはなさそうですが）

timeStyle でのそれぞれの表示は以下のようになります。

日付の表示

日付の表示は期待するイメージ通りの表示になりました。

月は設定が5つありますが、日本語の場合いくつかの設定で変化がありません。hour と同じように「月」の単位付きで、2-digit では0埋めされます。

日は hour と同じように「日」の単位付きで、2-digit では0埋めされます。

曜日の表示

曜日の設定は3つありますが、日本語の場合いくつかの設定で変化がありません。

まとめ

思ったよりも自由にフォーマットを変更できるというわけではないので、期待するフォーマットにすることができないことがあるかもしれません。

単に日付から曜日だけを取得したいときや、一般的なフォーマットである場合にはライブラリを使用しない選択の検討ができそうです。