小数点以下を揃える

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

戻る

実例

例文

<form name="form_point">
<input type="text" name="f_input" value="123456.7890">
<input type="text" name="f_point" value="2" size="2">
<input type="button" value="→" onClick="setPoint()">
<input type="text" name="f_output">
</form>

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

//小数点以下を揃える
function getPointNumber(num,point) {
	if (num.indexOf(".") < 0) num += "."; //小数点を付加(*4)
	var s = num.split("."); //整数部と小数部を分割(*5)
	s[1] = s[1] + repeatText("0",point); //対応する桁数分の「0」を追加(*6)
	return s[0] + "." + s[1].substr(0,point); //小数点以下の桁数を揃える(*7)
}

//文字を繰り返す
function repeatText(s,num) {
	var t,n;
	t = "";
	for (n=0;n<num;n++) {
		t += s;
	}
	return t;
}
</script>

解説

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

ユーザー関数getPointNumber
(*4)変数numが整数の場合、小数点を付加します。
(*5)整数部と小数部を分割して、配列変数sに入れます。
(*6)小数部に「0」が足りない場合のために、「0」を揃えたい桁数の数だけ付け加えます。
(*7)小数部の桁数を変数pointに合わせて取り出し、整数部と一緒に戻り値とします。

応用

桁数が固定で決まっている場合は次のように（*6）を単純化することができます。

//小数点以下を揃える
function getPointNumber(num) {
	if (num.indexOf(".") < 0) num += "."; //小数点を付加
	var s = num.split("."); //整数部と小数部を分割(*5)
	s[1] = s[1] + "0000"; //対応する桁数分の「0」を追加(*6)
	return s[0] + "." + s[1].substr(0,4); //小数点以下の桁数を揃える(*7)
}

ユーザー関数repeatTextを使用せず、桁数に応じた数の0を付けます。
ここでは桁数が4桁に固定されているので、引数を受け取る変数pointも必要ありません

応用

このスクリプトにカンマを付けることもできます。 上記の例文(*3)を次のように表記します。

 document.f_point.f_output.value = getComma(getPointNum(num,point)); //(*3)

「数字にカンマを付ける」で利用したユーザー関数getCommaを使って出力前の時点で処理を行っています。

戻る