Zenn
⏰

標準機能でDateをformatする色々（toLocaleString/Intl.DateTimeFormat/etc)

2020/09/17に公開
JavaScript
tech

moment.jsがメンテナンスモードになって、「とはいえdayjsとか入れるのも億劫だしチャチャっとvanillaになんとかできないかな」と思って調べた。

いちばんスマートなやり方

(new Date()).toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" })

> "2020/9/17 21:00:00"

昔は自前する必要があったがいつのまにかそんな必要はなくなっていた。良い世の中…

その他の方法

結構色々他の手法もあって惑わされたので、他のちょっと遠回りな手法も下記に記載

toISOString

(new Date()).toISOString()

> "2020-09-17T12:00:00:000Z"

簡易だけどタイムゾーン指定できない

Intl.DateTimeFormat

new Intl.DateTimeFormat('ja-JP', {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "Asia/Tokyo"}).format(new Date())

> "2020/09/17 21:00:37"

一番ナウいやり方。かなり細かく指定出来るので需要はあるが、デフォルトでは日付しか表示しないので「とりあえず日付のわかりやすくしたい」程度だとちょっと長い

date.toLocaleDateString & date.toLocaleTimeString

const date = new Date()
const dateString = `${date.toLocaleDateString("ja-JP", { timeZone: "Asia/Tokyo" })} ${date.toLocaleTimeString("ja-JP", { timeZone: "Asia/Tokyo" })}`

> "2020/9/17 21:03:08"

フルでDateTimeにしたいときは冗長なだけだが、もし日付か時間をバラで出したい場合は使える

その他

Discussion