数値の桁数を合わせたいときの処理

JavaScript数値の桁数をそろえたいときに使う処理のサンプルです。
for文で2桁以上の連番を扱いたいときなんかに覚えておくと便利と思います。

数値の桁数を合わせたいときの処理のデモページ

サンプルコード

<ul id="number">
	<li>0</li>
	<li>1</li>
	<li>2</li>
～略～
	<li>18</li>
	<li>19</li>
	<li>20</li>
</ul>

$(function() {
	$('#number li').each(function() {
		var digit = 3; // 桁数の指定
		var no = $(this).text();
		while(no.length < digit) {
			no = '0' + no;
		}
		$(this).text(no);
	});
});

digitに揃える桁数を指定。（「3」の場合は百の位で揃える）
noに対象の数字を入れて、桁数が満たない場合は先頭に0をつける処理を、桁数が揃うまで繰り返します。

上記サンプルではhtml上にある数字の桁数を合わせましたが、
連番の画像を挿入したい場合などは以下のようにします。

$(function() {
	var insert = '';
	for (var i = 0; i < 20; i++) {
		var digit = 2; // 桁数の指定
		var no = String(i+1);
		while(no.length < digit) {
			no = '0' + no;
		}
		insert += '<img src="image' + no + '.jpg" />'
	};
});

最初のサンプルでは、変換対象をhtml上から取得してきていたので、
数字が文字列として処理されていました。
今回の場合は数字が文字列ではなく数値として処理されるため、no = ‘0’ + no;が
通常の演算として処理されてしまします。
これを回避するために、一旦数値から文字列に変換して、桁数を合わせる処理を行うようにします。