【JavaScript】月日を0埋めして2桁で表示する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで日付の月日を0埋めして2桁で表示する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

日付の月日や数字を0埋めする2つの方法

日付の月日や数字を0埋めする際に使用する代表的はメソッドは以下の2つが挙げられます。

• slice()
• padStart()

それぞれ詳しい使い方をご紹介します。

slice()で月日や数字を0埋めして2桁で表示する方法

slice()は元の文字列を変更せずに指定された一部分を取り出して返すメソッドです。0埋めして2桁表示にしたい数字の先頭に意図的に0を付け、末尾の2文字を取り出すことで、0埋めされた月日や数字を得ることができます。

JavaScript

let month = 7;
let day = 5;

month = (`0${month}`).slice(-2);
day = (`0${day}`).slice(-2);

console.log({month, day});

実行結果

{
  "month": "07",
  "day": "05"
}

参考：String.prototype.slice()

padStartで月日や数字を0埋めして2桁で表示する方法

padStart()は、文字列を指定した長さに調整するメソッドです。引数1には桁数の数値を、引数2には指定した長さになるまで付加する文字列を指定します。padStart()は先頭に文字列を追加して調整しますが、padEnd()は末尾に文字列を追加して調整します。

JavaScript

let month = 7;
let day = 5;

// padStartは文字列にのみ使用できるメソッドです
// 変数の値は数値のためtoString()で文字列に変換します
month = month.toString().padStart(2, '0');
day = day.toString().padStart(2, '0');

console.log({month, day});

実行結果

{
  "month": "07",
  "day": "05"
}

参考：String.prototype.padStart()

最後に

本記事で紹介したslice()とpadStart()は、数字を0埋めする際によく利用されるメソッドです。slice()も扱いやすいメソッドですが、0埋めに関してはpadStart()の方が直感的で理解しやすい印象があります。padStart()は桁数の調整も容易なため、padStart()をおすすめします！

以上、JavaScriptで月日を0埋めして2桁で表示する方法のご紹介でした！