小粋空間  -  a cheap joke and a play on words site

JavaScriptの時間を0パディングする方法

JavaScriptの時間を0パディングする方法を紹介します。

１．問題点

下記の、今日の年月日を表示する簡単なサンプルを作ってみました。

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
alert(year + '/' + month + '/' + day);

このスクリプトを実行すると、"2018/5/15"のように表示されます。

できれば、"2018/05/15"のように、月や日が1桁のときに0パディングしたいのですが、方法が分かりません。

ということで、JavaScriptの時間を0パディングする方法を紹介します

２．JavaScriptの時間を0パディングする

JavaScriptの時間を0パディングするには、スクリプトに赤色の2行を追加します。

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
month = ('0' + month).slice(-2);
day = ('0' + day).slice(-2);
alert(year + '/' + month + '/' + day);

slice()は、文字列の中から、指定した開始位置から終了位置までの部分を返却するメソッドです。

foo = 'abc';
alert(foo.slice(0,2));

と書けば、変数fooの左から数えて0番目から2文字、つまり"ab"を取り出します。

このように、通常はslice()のパラメータに正の値を設定しましが、負の値を設定すれば、右側から取得してくれます。

foo = 'abc';
alert(foo.slice(-2));

と書けば、変数fooの右端から数えて2文字、つまり"bc"を取り出します。

この機能を利用して、

month = ('0' + month).slice(-2);

と書くことで、monthが1～9の場合は2桁になるよう0パディング、10～12の場合は加えた0をはずして2桁にします。