LoginSignup
4
2

More than 1 year has passed since last update.

TypeScript: Date を "YYYY年MM月DD日" にしたい

Posted at

背景

Date を特定の書式にしようとしたところ・・また詰まったので、調査してみた記録

2022/02/02 みたいなのであれば、intl.DateTimeFormat が一番かな、とは思うんですけどね

結論

Intl.NumberFormat / dayjs のどちらかを使う、かな・・と
前者の方が速いけど、書式フォーマットで出来るので dayjs のが分かりやすい

Intl.NumberFormat を使う

フォーマット
const intlNumberFormat = new Intl.NumberFormat('ja-JP', { minimumIntegerDigits: 2 });
const getDateString2 = (date: Date) => {
    return `${date.getFullYear()}${(intlNumberFormat.format(date.getMonth() + 1))}${intlNumberFormat.format(date.getDate())}日`;
};

dayjs を使う

フォーマット
const getDateString = (date: Date) => {
    return dayjs(date).format("YYYY年MM月DD日");
};

TypeScript で使う

Format はこちらで

調査記録

DateTimeFormat を使う

dateStyle: 'long' でいい感じなんだけど、月日の表示が一桁に省略されてしまう・・。

format
const date = new Date(Date.UTC(2022, 1, 2, 3, 23, 16, 738));

console.log(new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full', 
                                              timeZone: 'JST' }).format(date));
console.log(new Intl.DateTimeFormat('ja-JP', { dateStyle: 'long', 
                                              timeZone: 'JST' }).format(date));
console.log(new Intl.DateTimeFormat('ja-JP', { dateStyle: 'medium', 
                                              timeZone: 'JST' }).format(date));
console.log(new Intl.DateTimeFormat('ja-JP', { dateStyle: 'short', 
                                              timeZone: 'JST' }).format(date));

結果はこんな感じ

"2022年2月2日水曜日"
"2022年2月2日"
"2022/02/02"
"2022/02/02"

で、month: day: を '2-digit' で指定出来れば完璧だったんですが・・以下があって両立できず
image.png

ということで、結論に書いた二つへと

計測

以下な感じで計測してみた。
結果は共有してないけど、dayjs の方が遅いかな?って程度

measure
function measureExeFunc(executeFunction: { (timestamp: Date): string; (arg0: Date): void; }, date: Date) {
    var startTime = performance.now();
    executeFunction(date);
    var endTime = performance.now();
    console.log(`${executeFunction.name}: `, endTime - startTime);
}

measureExeFunc(getDateString, date);
measureExeFunc(getDateString2, date);

あとがき

目的は、DynamoDB で日付文字列でソートが使えるように、zero padding したかった
ぶっちゃけ日本語である必要はない

まぁ、日本語好きな場合もありますし、調査することは大切かなぁ、って程度でした。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2