ゼロで桁を揃える

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

例文

<form name="form_zero">
<input type="text" name="f_number" value="123456.7890">
<input type="text" name="f_digit" value="5" size="2">
<input type="button" value="→" onClick="setDigit()">
<input type="text" name="f_output">
</form>

<script type="text/javascript">
//フォームから数値を取得
function setDigit() {
	var num = document.form_zero.f_number.value; //数値(*1)
	var digit = document.form_zero.f_digit.value; //揃える桁数(*2)
	document.form_zero.f_output.value = getZeroDigit(num,digit); //(*3)
}

//ゼロで桁数を揃える
function getZeroDigit(num,digit) {
	var n,m,s;
	//数値を文字列化(*4)
	if (isNaN(num)) {
		s = num; //10進数以外にも対応
	} else {
		s = num.toString(); //数値のままではlengthが使えない
	}
	//足りない桁数分の0を加える(*5)
	m = digit - s.length;
	for (n=0;n<m;n++) {
		s = "0" + s;
	}
	//戻り値（テキスト）
	return s;
}
</script>

解説

(*1)でフォームから元となる数値を変数numに取得し、(*2)で変数digitに桁数をフォームから取得しています。(*3)で専用のユーザー関数を呼び出して結果を出力しています。

ユーザー関数getZeroDigit
(*4)ここでは変数numが文字列の場合と数値の場合に処理を分けています。入力される数値が10進数以外の場合、文字列として入って来ます。数値の場合は文字列に変換して変数sに入れています。
(*5)まず、変数digitと変数sの長さ（数値numの桁数）を差引して、足りない桁数の数だけ0を変数s（文字列化した数値num）の頭に加えています。

応用

最大の桁数が固定で決まっている場合、（*5）の処理を単純化することができます。
以下は4桁に揃える場合の処理です。

	//足りない桁数分の0を加える(*5)
	s = "000" + s; //4桁以上に揃える
	s = s.substr(s.length-4,4);
	//戻り値（テキスト）
	return s;

変数sには一桁以上入っているので頭に0を３つ足してから、後ろの4文字を取得しています。そうすれば、足しすぎた0が消えて4桁の数字となります。

応用

日付や時刻の場合、2桁に揃えるのでif文を使います。

function getZeroDigit2(num) {
	if (num < 10) num = "0" + num;
	return num;
}

数値が一桁の場合にのみ0を付加します。

戻る