うちの子供は、身の回りの小物を棚や箱に綺麗に並べるのが好きな性格だそうです。
先日、近所のスーパーに行った時に、一生懸命果物を並べていて、店員の並べていた状態よりも、綺麗に仕上げていました。
その前は、駅前のデパートに行った時も、文房具コーナーにあったボールペンを向きも高さも綺麗に並べていました。
そうです、人間は、思考力がある分、物事を揃える事が好きなんですね。
なんでも揃っていると、「整っている」と感じる生き物なんです。
そして、データ表示をするようなプログラムを書いた時に、桁数を合わせるという事が非常に重要な場面も多々あります。
今回はそんな時に使えるスニペットを掲載しておきます。
どんな時に使うの？
カレンダーで日付を並べて書いた時に、
2018年1月1日（月）
2018年12月12日（月）
と書いてあると気持ち悪くないですか？
この場合は、
2018年01月01日（月）
2018年12月12日（月）
となって欲しいはずです。
また、10個以上のリストをナンバリングして表示する時、
1. A
2. B
3. C
4. D
5. E
6. F
7. G
8. H
9. I
10. J
11. K
12. L
これでは少し落ち着かなくないですか？
01. A
02. B
03. C
04. D
05. E
06. F
07. G
08. H
09. I
10. J
11. K
12. L
こういう桁数を0で埋めて合わせる事を「ゼロパディング(zeroPadding)」って言うらしいですが、PHPではsprintf関数で簡易に実装できるのに、javascriptでは、この機能に該当するものがないので、是非下記のソースを使って実現してみてください。
ソース
function sprintf(mode , num){
num = Number(num);
var reg = RegExp(/%(0*)(\.?)([0-9]+?)([dfF])/);
var res = mode.match(reg);
console.log(res);
switch(res[4]){
case "d": // 整数
var str = res[1];
var len = Number(res[3]);
return ( Array(len).join(str) + num ).slice( -len );
case "f": // double,float
var len = Number(res[3]);
return num.toFixed(len);
}
return res;
}
使い方
はじめにお断りしておきますが、今回は0で桁数を埋める事を前提にしているため、PHPのsprintfの本来の機能のような、文字列を表示する機能は搭載していません。
var string = sprintf( %mode , %number );
%mode : %03d,%03f （整数、少数）の２つが利用可能
%number : 整数値、少数値が利用できます
現在は簡易に桁合わせをしているだけなので、dとfのみが利用できるだけに留めています。
数値を送ると、文字列型で、桁数が合わせられた値が返ります。
最後に
少数の桁合わせは、以下の桁数を四捨五入する仕様にしていますが、整数の桁合わせは、それを超える桁数を全て削除するようになっているため、例えば"%03d"と指定した時に、"1000"という数値の場合は、"000"と削られてしまいます。
これは、既知不具合として、修正版を検討したいと思います。
でも、javascriptで簡易に桁合わせする場面って、システム系の人は多いと思うので、是非便利に使ってもらえると幸いです。
