数値から桁数を取得する

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

実例

例文

<form>
<input type="text" id="f_number" value="12345" size="10" onKeyUp="getLog10()">
<span id="keta"></span>
</form>

<script type="text/javascript">
//数値から桁数を取得する
function getLog10() {
	var n,m,s;
	n = document.getElementById("f_number").value; //数値取得(*1)
	m = parseInt(n).toString(10).length; //桁数(*2)
	//出力(*3)
	s = "";
	if (n > 0) {
		s = m + "桁";
	}
	document.getElementById("keta").innerHTML = s;
}
</script>

解説

(*1)フォームから数値を取得
(*2)取得した数値から整数部の桁数を取得
(*3)桁数を画面に出力

【メモ】

（*2）の計算式について
常用対数を使って「m = Math.floor(Math.log(n) / Math.log(10)) + 1」または「m = Math.floor(Math.log(n) / Math.LN10) + 1」で計算できますが、n = 1000のとき、m = 3となります。これは二進数の計算エンジンによる誤差かと思われます。（FirefoxとSafariで確認）
また「m = Math.floor(Math.log10(n)) + 1」とすることで正しく計算できるものの、IEではlog10に未対応です。（FirefoxとSafariは対応）

応用

最大値から桁数を取得し、数値に合わせてゼロで桁数を揃えます。1以上の整数（自然数）のみに対応します。
例えば、最大値が1000ならば4桁なので、全ての数値を4桁になるように0で調整します。

//サンプルとなる乱数を出力
function getRandom() {
	var n,m,r,s;
	var max_num = document.getElementById("max_number").value; //最大値
	//乱数を10回発生
	s = "";
	for (n=0;n<10;n++) {
		r = Math.floor(Math.random() * max_num) + 1; //乱数で最大値までの数値を取得
		s += "[" + getZeroAuto(max_num,r) + "]"; //桁数を合わせて出力
	}
	document.getElementById("keta2").innerHTML = s;
}

//最大値に合わせてゼロで桁数を揃える
function getZeroAuto(max_num,num) {
	var n,m,s;
	s = "";
	m = parseInt(max_num).toString(10).length - parseInt(num).toString(10).length;
	//ゼロを桁数に合わせて出力
	for (n=0;n<m;n++) {
		s += "0";
	}
	s += num;
	return s;
}

最大値の桁数と対象の数値の桁数を差し引きして、その差の数だけゼロを使って桁数を揃えています。

桁揃えの0を見えなくしたい場合は、出力する0に背景色と同じ色を適用します。
0の代わりに半角スペース、 、&ensp;、&emsp;など使用しても画面上に出力した数字の幅が同じにならないため、この方法をお薦めします。

	for (n=0;n<m;n++) {
		s += "<span class='bg-color'>0</span>";
	}

for文を上記のように変更し、<head>内にCSSの記述を足します。背景色が白の場合次のようになります。

<style type="text/css">
.bg-color {
	color: #fff; //白
}
</style>

戻る