Help us understand the problem. What is going on with this article?

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 は非対応

なのでご注意を。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした