JavaScript

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

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

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

toFixed

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

例)小数点以下3桁表示

[javascript htmlscript="true" title="ソース"]
<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>
[/javascript]

 

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

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

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

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

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

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

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



[javascript htmlscript="true" title="ソース"]
<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="数値を入れてください" />
[/javascript]

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

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

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

 

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

-JavaScript
-, ,

© 2020 かえでBlog