JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのtoFixed()メソッドとは？数値の小数点以下を固定する方法を解説

JavaScriptのtoFixed()メソッドとは？

JavaScriptのNumberオブジェクトには、数値の小数点以下の桁数を指定した桁で固定し、その結果を文字列として返すtoFixed()メソッドが用意されています。本記事では、このメソッドの基本構文と実際の使い方を、サンプルコードとともにわかりやすく解説します。

前提知識：プリミティブ値とラッパーオブジェクト

JavaScriptにおける「プリミティブ」とは、オブジェクトではなく、それ自身はメソッドを持たない値のことです。プリミティブな値をあたかもオブジェクトのように扱いたい場合には、「ラッパーオブジェクト」で値を包むことで実現できます。

数値にもプリミティブラッパーオブジェクトが存在します。これを利用すると、文字列として表現された数値を、各種メソッドを呼び出せるNumberオブジェクトへと変換することが可能です。

たとえば、Webフォームでユーザーが入力した数値は、文字列として受け取られます。この入力値をNumber型に変換すれば、数値向けのさまざまなメソッドを自由に活用できるようになります。

フォーム入力値にtoFixed()を適用するサンプルコード

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <form onsubmit=handleSubmit(event)>
     <label for="to-fixed">数値を入力：</label>
     <input id="to-fixed" onchange=handleChange(event) type="text" name="inputVal" value=""/>
     <label for="num-digits">小数点以下の桁数：</label>
     <input id="num-digits" onchange=handleChange(event) type="text" name="numVal" value=""/>

     <input type="submit" value="送信" />
   </form>

   <h3 id="root"></h3>

   <script>
     let inputVal = '';
     let numVal = '';

     const handleChange = e => {
       if(e.target.name === "inputVal") {
         inputVal = e.target.value;
       } else {
         numVal = e.target.value;
       }
       console.log(e.currentTarget, e.target)

     }
     const handleSubmit = e => {
       e.preventDefault();
       console.log(e)
       const root = document.querySelector("#root");
       root.innerHTML = Number(inputVal).toFixed(Number(numVal));
       console.log(Number(inputVal).toFixed(5))

     }
     const inputValue = document.getElementById("to-fixed").value
   </script>
 </body>
</html>

このコードでは、NumberオブジェクトのtoFixed()メソッドを使い、数値を希望する桁数に整えて表示しています。

toFixed()メソッドの構文

const toFixedNumDigits = Number([x]).toFixed(Number([y]));

フォームを扱う際に必ず押さえておきたいポイントがあります。それは、フォームから取得できる値はすべて文字列であるという点です。そのため、toFixed()メソッドを使う前に、Number型へ変換しておく必要があります。

上記のコードでは、入力値をNumber(n)で囲むことで変換を行っています。変数xは桁数を調整したい浮動小数点数、変数yは小数点以下を何桁にするかを指定する値です。

実行例：さまざまな数値で試してみよう

いくつかの数値を実際に入力して、コードエディタでどのような結果が返ってくるか確認してみましょう。

数値を入力：              小数点以下の桁数：
// 浮動小数点数
45.45678                3  // '45.457' を返す
// 整数
45                      5  // '45.00000' を返す
// 指数表記
1e-10                   3  // '0.00' を返す
1.23e+20                2  // '123000000000000000000.00' を返す
1.23e-10                2  // '0.00' を返す

ご覧のとおり、出力される桁数は「小数点以下の桁数」として入力したyの値によって変化します。元の数値が指定桁数に満たない場合は、0で埋める（ゼロパディング）ことで、目標の長さまで文字列が引き伸ばされます。

反対に、数値が長く、小数点以下の有効桁数が指定値より多い場合には、数値が短縮され、末尾が四捨五入された文字列が返されます。

注意：toFixed()の戻り値は文字列です。加工後の値をロジックの中で数値として使いたい場合は、前述の例と同様にNumberラッパーで囲み、再び数値へ戻す必要があります。

次に学ぶべき関連記事

  • JavaScriptで乱数を生成する方法：完全ガイド
  • JavaScript parseInt：ステップバイステップガイド
  • JavaScriptカウントダウンタイマーの作り方：チュートリアル
  • JavaScript toStringメソッドの使い方
  • JavaScript toUpperCase／toLowerCaseメソッド
  1. JavaScriptでプロトタイプを使ってメソッドを共有する方法

    JavaScriptにおけるメソッドの共有JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。通常、コンストラクタ内でthis.displayInfo = function(){...}のようにメソッドを定義すると、生成されるインスタンスごとに関数のコピーが作成され、メモリを無駄に消費します。一方、prototypeに定義すれば、関数は一度だけ生成され、すべてのインスタンスから参照・呼び出しできるようになります。これはメモリ効率の面でも大きなメリットがあります。以下は、JavaS

  2. JavaScriptで数字パターンを表示する方法【初心者向けサンプルコード】

    本記事では、テキスト入力欄とボタンを備えたJavaScript・HTMLプログラムの作成方法を解説します。ユーザーが入力欄に任意の数値(例：5)を入力してボタンをクリックすると、画面に以下のような数字パターンが表示される仕組みです。(n = 5 の場合の出力例)01 01 02 01 02 03 01 02 03 04 01 02 03 04 05仕組みのポイントこのパターンは二重ループ(ネストしたforループ)を使うことで実現できます。外側のループが「行」を制御し、内側のループがその行に表示する「数字の個数」を制御します。i 行目には 1 から i までの数字が順番に出力されるため、行が進む