小数点以下の桁数を固定した表現を得る

JavaScript

JavaScriptで小数点以下1桁に固定した数値を表示させる方法について悩んでいる人がいたので調べてみた。


というのも、何も考えずに次のようなコードを書くと2.0と表示させたいのに2と表示されてしまうようだ。

var value = 2.0;
target_element.innerHTML = value;

valueが2.1や2.01であればその通りに表示されるのだが、小数点以下の省略可能な0は省略されてしまうらしい。


で、安直な解決方法としては整数の場合に文字列として".0"を連結するという案が思いつくわけだが、他人にソースを見られたときに格好悪いのでスマートな解決方法があるなら知りたい、ということらしい。


まぁ、上手くやってくれそうなメソッドぐらいあるだろうとなんとなく思ったので調べてみたらあった。

Number.toFixed(丸め位置);

数値またはNumberオブジェクトのメソッドで、引数に小数点以下の丸め位置を指定すると、その桁数の文字列表現を得られるらしい。
収まらない場合は四捨五入されるし、不足分は0が付く。


というわけで、次のようにすれば期待通りに2.0という表示が得られる。

var value = 2.0;
target_element.innerHTML = value.toFixed(1);

// ドットが2つあって気持ち悪いけど問題なし
target_element.innerHTML = 2.0.toFixed(1);


姉妹品にNumber.toExponential()とNumber.toPrecision()というメソッドも存在する。
Number.toExponential()は指数表示に変換するメソッド。
Number.toPrecision()は指定の桁数に収まらない場合は指定の桁数に収まるように指数表示にし、収まる場合は指定桁数に変換するメソッド。


【参考】
Internet Explorer
Number.prototype.toFixed() - JavaScript | MDN（MSDN Library）

Mozilla
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Number:toFixed（Core JavaScript 1.5 Reference）