Zenn
📆

formatToPartsとObject.fromEntriesで自由に日付や時間をformatする

2022/10/20に公開
JavaScript
TypeScript
tech

日付をフォーマットしたい場合、モダンブラウザであればIntl.DateTimeFormatが利用できる

localeやオプションを設定が色々あるので、だいたいは可能だ。

例えばo月x日みたいな表記であればこのようになる

new Intl.DateTimeFormat("ja-JP",{month:"long", day:"numeric" })
        .format(new Date())
// => 10月20日

とはいえどのオプションがどれだったかを覚えてられなかったり、もう少し自由なフォーマットをしたいときもある。

formatToPartsから取り出す

そこでformatToPartsを使うとそれぞれの部位の配列として受け取ることが出来る

new Intl.DateTimeFormat("ja-JP")
  .formatToParts(new Date())

[
  {"type": "year","value": "2022"},
  {"type": "literal", "value": "/"},
  {"type": "month", "value": "10"},
  {"type": "literal", "value": "/"},
  {"type": "day", "value": "20"}
]

ただこのままだとformatするには少し扱いづらい

Object.fromEntriesで扱いやすくする

ここからObject.fromEntiresと組み合わせてやるとObjectとして扱えるので取り回しやすい


const getFormatParts = (date: Date) => {
  return Object.fromEntries(
      new Intl.DateTimeFormat("ja-JP", {dateStyle:"full", timeStyle:"full"})
          .formatToParts(date)
          .map(({type, value}) => [type,value])
      )
}

{
    "year": "2022",
    "literal": "秒 ",
    "month": "10",
    "day": "20",
    "weekday": "木曜日",
    "hour": "20",
    "minute": "58",
    "second": "24",
    "timeZoneName": "日本標準時"
}

あとは下記のように利用できる

const dateParts = getFormatParts(new Date())
const formatted = `${dateParts.month}月${dateParts.day}日 [${dateParts.weekday}]`

// => '10月20日(木曜日)'
GitHubで編集を提案

Discussion