toFixed() について(JavaScript)

toFixed()とは

JavaScriptの関数。指定した少数点以下の桁数で数値を四捨五入してくれます。
こちらの記事で気象情報を扱うAPIを使用したのですが、その際に便利でした。

使用するメリット

シンプルにかける

例えばOpenWeatherMapというAPIから気温を取得した際、「20.46」℃というように返ってきます。
でも普段見慣れている気温の表示って小数点第一位までじゃないですか。この場合は四捨五入して「20.5」℃としたい。

そこでまず初めに思いつくのはMath.round()関数。
例えばvar numTmp = 20.46という値だった場合、

var numTmp = 20.46;
numTmp = Math.round(numTmp*10)/10;

とすることで「20.5」を取得しようと考える。
小数点を一桁残したいとはいえ、ちょっと無理やり感があります。
この時点でなんだかスマートじゃない。

さらに、APIからの戻り値ってJSONなので、つまり文字列なんですよね。
なので、実際はvar strTmp = "20.46"という値を四捨五入しようと思ったら、

var strTmp = "20.46";
strTmp = Math.round(parseFloat(strTmp)*10)/10;

となります。入れ子になっているのもあって、処理の順番が尚更ややこしく見えますよね。
私がこれを初めて見たとして、「小数点第一位までの」四捨五入をしているんだなとは、ぱっと見では思わないです。

toFixed() 関数を使用することで、以下のようにすっきり書くことができます。

var strTmp = "20.46";
strTmp = parseFloat(strTmp).toFixed(1);

まず文字列を数値型にparseし、次に小数点一桁までの四捨五入を行う。
という処理の流れがシンプルに書けて、視覚的にもわかりやすくなりました。
()の中の数値は小数点以下の桁数です。「1」なら小数点一桁ですね。
仮に何も指定しなかった場合は「0」として扱われます。
つまり整数値に変換してくれるということですね。

フォーマットが崩れない

計算した結果を文字列として渡したい、または出力したい、という場合があると思います。
Math.round()関数を使用すると、その後toString()した時にもし少数部分の最後が「0」だった場合、切り捨てられた状態で文字列型へ変換してしまいます。
例えば小数点第一位までの数字を並べて表示させているところに
19.5
20.1
20.6
20
と、一つだけ桁数がずれて表示されるのはちょっと不自然な感じがします。

対してtoFixed()関数を使用すれば、上記のような場合でも、指定した桁数まで表示されたままとなります。

  // toFixed()の後、toString()で文字列に戻す
  var strTmp = "20.02";
  strTmp = parseFloat(strTmp).toFixed(1);
    // strTmp = "20.0"

  // Math.round()のあと、toString()で文字列に戻す
  var strTmp2 = "20.02";
  strTmp2 = Math.round(parseFloat(strTmp)*10)/10;
  strTmp2 = strTmp2.toString();
    // strTmp2 = "20"

というのも、toFixed()関数を使用した際の戻り値が文字列だからなんですね。
試しに上記strTmpに+1すると、「20.01」となると思います。

ちなみに、数値型で返したいという場合は、toFixedしたい数値の先頭に+を付けるだけでいいです。

  var strTmp = "20.02";
  strTmp = parseFloat(strTmp).toFixed(1);
  strTmp = strTmp + 1;
    // この時、文字列結合なのでstrTmp = 20.01となる

  var strTmp = "20.02";
  strTmp = +parseFloat(strTmp).toFixed(1);
  strTmp = strTmp + 1;
    // この時、数値の足し算なのでstrTmp = 21.0となる

　
以上、toFixed()関数についてでした。