padStart で日付・時刻を二桁表示する書き方

Date オブジェクトで月日、時間や分を取得することは多いですね。
例えば 分 を取得したいとき、 14:05 などの場合 getMinutes() を使いますが、結果は 5 となってしまいます。
こと時刻の分の表示に関しては、二桁じゃないと時刻っぽくないですね。

二桁記述にする際によくある実装方法と、別の実装方法と合わせて紹介します。

よくある記述

const date = date = new Date('2020-01-01 14:05:30')
// Wed Jan 01 2020 14:05:30 GMT+0900 (日本標準時)

('0' + date.getMinutes()).slice(-2)
// "05"

これで実装は問題ないんですが、 slice でやってるあたりが「上手い !!」と思いつつもあまり美しいコードではないなと常々思っていました。

それを解消できたコードが以下です。とはいえまだ課題はあるかなと思ってます。

padStart を使った記述

const date = date = new Date('2020-01-01 14:05:30')
// Wed Jan 01 2020 14:05:30 GMT+0900 (日本標準時)

date.getMinutes().toString().padStart(2, '0')
// "05"

String.prototype.padStart() は、文字列を任意の長さに変えるのに使えるメソッドなのでこちらを使ってみました。

padStart() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の先頭から適用されます。

残っている課題としては getMinites の結果が Number で返ってくるため、 toString() で文字列化してあげないといけないことですかね。それでもだいぶモヤモヤは抜けました。

ただし IE は非対応

なのでご注意を。