javascriptで数値を桁揃えして出力する

以下の場合について検討する。

• 0詰めにする
• 任意文字列で詰める
• 小数点以下の桁数を揃える

非常に大きな数値や非常に小さな数値の場合は考慮しない。つまり、1.2e34 とか与えられても知りません。

0詰めにする

最も簡単な方法は、”0″を先頭に追加して、後ろから欲しい桁数分だけ切り出す方法だと思われる。

3から”03″を作る場合
(“00″+3).slice(-2);

sliceメソッドは、引数に負数を指定すると後ろから数えてくれる。第二引数を省略した場合は文字列の最後までを切り出すので、slice(-2)で後ろから2文字目以降の文字列を切り出すことができる。
これをふまえて、以下のような関数を作れば任意桁の0詰め文字列が得られる。

function zeroPadding(val, len) {
  len = len || 4; // len が指定されなかった場合 4 桁でそろえる。
  if ( String(val).length >= len ) return String(val);
  var zero = "0";
  while ( zero.length < len ) { zero += "0";}
  return (zero+val).slice(-len);
}

zeroPadding(3); // => “0003″
zeroPadding(3,2); // => “03″
zeroPadding(13,2); // => “13″

val で渡す数の桁数より小さい len を指定すると val をそのまま文字列にしたものが返る。
zeroPadding(1234, 2); // => “1234″

任意文字列で詰める

0詰めにする場合は後ろからn文字切り出すだけで良いが、任意文字列( など)で詰める場合はこのままではできない。
足りない桁数分だけ文字列を配列に入れ、joinした後に数値と結合する。

function strPadding(val, len, str) {
  len = len || 4; // len が指定されなかった場合 4 桁でそろえる。
  str = str || "0"; // str が指定されなかった場合 0 で詰める。
  var val_len = String(val).length;
  if ( val_len >= len ) return String(val);
  var pad = [];
  while ( pad.length < (len-val_len) ) { pad.push(str);}
  return pad.join("") + val;
}

strPadding(12, 4, “$”); // => “$$12″;
strPadding(12, 4, “hoge”); // => “hogehoge12″;

第三引数を指定しないか、”0″を指定すれば zeroPadding と同じ動作。
strPadding(12, 4); // => “0012″

小数点以下の桁数を揃える

(2009/10/15追記)
toFixed()メソッドという便利なメソッドがあるので、それを使うとよい。
ただし、四捨五入の挙動がブラウザによって微妙に違うので(特にIE)注意。

指定桁数より下の桁は切り捨て、足りない場合は0詰めする。
文字列にしてから処理する。四捨五入したい場合は少し改良する必要がある。

function decimalAlignment(val, len) {
  len = len || 2; // len が指定されなかった場合 2 桁でそろえる。
  var array = String(val).split(".");
  var zero = "0";
  while ( zero.length < len ) { zero += "0";}
  array[1] = (array[1] + zero).substr(0, len);
  return array.join(".");
}

decimalAlignment(1.23, 1); // => “1.2″
decimalAlignment(1.2345); // => “1.23″
decimalAlignment(1, 3); // => “1.000″

これと strPadding を使い、小数点の位置で表示を合わせたりできる。
strPadding(decimalAlignment(1.2), 6, “*”); // => “**1.20″
strPadding(decimalAlignment(123.456), 6, “*”); // => “123.45″