かえでBlog

色々なことを徒然と……

【JavaScript】小数点以下桁数を0埋めする方法

   

HTMLで数値入力をした場合、小数点以下の桁数を自動的に合わせたい場合があります。

その場合、JavaScriptの関数【toFixed】を使用するの便利です。

toFixed

使い方:Number.toFixed(表示したい小数点以下の桁数);

例)小数点以下3桁表示

<script type="text/javascript">
$(function(){
	$("#fixedTest").on("focusout",function(){
		//数値型に変換しないとtoFixedがうまく動作しない。
		var num = parseFloat($(this).val());
		$(this).val(num.toFixed(3));
	});
});
</script> 
<p>
  <input type="text" id="fixedTest" name="fixedTest" value="" placeholder="数値を入れてください"  />
</p>

 

上記の例だと6.6⇒6.600、6.1234⇒6.123と表示してくれます。

足らない場合は0で埋めてくれるし、多すぎる場合は切り落としてくれる便利な関数です。

小数点以下桁数以上の数値を入力した場合、近似値で表示される。

先ほどのテキストボックスに9.9996を入力してみると10.000で表示されると思います。

toFixed([digits])は[digits]以上の桁数を入力されると近似値(≒四捨五入)で表示されます。

そのため単純な数値の切り落としでは使用できないんですよね。

近似値で表示してほしくない場合、floorやceilを使用して先に小数点以下桁を切り捨てる方法があります。

<script type="text/javascript">
    $(function(){
	    var digits = 3;//小数点以下桁数
	    $("#fixedTest2").on("focusout",function(){
		    $(this).val(omission($(this).val() , digits));
	    });
    });
    /**
    * 指定された小数点桁数以下切り捨て
    * @param {float} num 入力値
	* @param {integer} digit 小数点有効桁数
    * @returns {float} 返却値(数値以外の場合空値)
    */
    function omission(num,digits){
		var pattern = new RegExp("^[-]?([1-9]\\d*|0)(\\.\\d+)?$");
        if(pattern.test(num)){
            //入力された値が数値の場合
			num = num * Math.pow(10,digits);
            if(num >= 0){
                num = Math.floor(num);
            }else{
                num = Math.ceil(num);
            }
			var returnVal = num * Math.pow(10, -1 * digits);
			return returnVal.toFixed(digits);
        }
		return "";
    }
</script> 
<input type="text" id="fixedTest2" name="fixedTest2" value="" placeholder="数値を入れてください"  />

単純に指定された値×10小数点桁数行い、余った小数点を切り捨てた後小数点桁数分10-(小数点桁数)かけています

ただこれだと小数点桁数が3・入力値が0.143にすると0.14300000000000002と表記されるため、toFixedで再度指定小数点以下切り捨てを行っています。

toFixedだと指定小数点に満たない0埋めされますが、不要な場合は25行目の「return returnVal.toFixed(digits);」⇒「return parseFloat(returnVal.toFixed(digits));」にすればいいと思います。

 

色々処理が煩雑になっているのでもう少しどうにかならないかな。

 - JavaScript , ,