【JavaScript】数値を指定した小数点以下の桁数で表す！tofixedメソッドの使い方！

この記事では数値を指定した小数点以下の桁数で表すメソッド『tofixedメソッド』について、以下の内容をサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

• tofixedメソッドとは
• tofixedメソッドの構文
• tofixedメソッドの使い方
  • 数値を固定小数点表記で表した文字列で取得する
  • 小数点以下を指定した桁数で丸める
  • toFixedメソッドで数値型を返す
• toFixedメソッドの特徴
  • 引数を省略した場合はdigitsが0として扱われる
  • 数値を表すのに必要な桁数よりも引数で指定した桁数が多い場合は0で埋められる
  • 整数リテラルに対して直接toFixedメソッドを実行するとエラーになる
  • 引数digitsが0以上100以下でない場合にエラーになる
  • 数値型以外をtoFixedメソッドに使うとエラーになる
  • numObjの絶対値が1e+21以上の場合は指数表記での文字列を返す
  • numObjの値が有限数でない場合、"Infinity"、"NaN"、"-Infinity"のいずれかを返す

などを図を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

tofixedメソッドとは

toFixedメソッドは、JavaScriptのNumberオブジェクトに使われるメソッドで、数値を指定した小数点以下の桁数で表した文字列として返します。数値を固定小数点表記（例えば、123.456のような形式）で扱いたい場合に非常に便利です。

後ほどtoFixedメソッドの構文や使い方について詳しく説明しますが、まずは簡単なサンプルコードを見てみましょう。

let num = 123.456;
console.log(num.toFixed(2));
// "123.46" ← 小数点2桁で丸めている

上記のサンプルコードでは、数値123.456を指定した小数点以下の桁数（2）で丸めています（四捨五入に似ていますが厳密には異なります）。そして、丸めた結果を文字列として取得しています。

tofixedメソッドの構文

tofixedメソッドの構文を以下に示します。

numObj.toFixed(digits)

tofixedメソッドの使い方

tofixedメソッドについて、以下に示している使い方をこれから説明します。

• 数値を固定小数点表記で表した文字列で取得する
• 小数点以下を指定した桁数で丸める
• toFixedメソッドで数値型を返す

上記の使い方について順番に説明します。

数値を固定小数点表記で表した文字列で取得する

toFixedメソッドを使うと、数値を固定小数点表記で表した文字列を取得できます。

以下にサンプルコードを示します。

let num = 1.23e20;
console.log(num.toFixed(2));
// "123000000000000000000.00"

上記のサンプルコードでは、指数表記で表されている数値1.23e20を固定小数点表記の文字列に変換しています。

小数点以下を指定した桁数で丸める

toFixedメソッドを使うと、数値を指定した小数点以下の桁数で丸めて、その結果を文字列として取得することができます。

以下にサンプルコードを示します。

let num = 123.456;
console.log(num.toFixed(2));
// "123.46"

上記のサンプルコードでは、数値123.456を小数点以下2桁に丸め、"123.46"という文字列として返しています。

toFixedメソッドで数値型を返す

toFixedメソッドは文字列を返しますが、結果を数値として扱いたい場合は、parseFloatメソッドを使って数値に変換できます。

サンプルコードを以下に示します。

let num = 123.456;
let fixedNum = parseFloat(num.toFixed(2));
console.log(fixedNum);
// 123.46

上記のサンプルコードでは、toFixedメソッドの返り値は文字列なので、parseFloatメソッドを使って文字列を数値に変換しています。

toFixedメソッドの特徴

toFixedメソッドの特徴を以下に示します。

• 引数を省略した場合はdigitsが0として扱われる
• 数値を表すのに必要な桁数よりも引数で指定した桁数が多い場合は0で埋められる
• 整数リテラルに対して直接toFixedメソッドを実行するとエラーになる
• 引数digitsが0以上100以下でない場合にエラーになる
• 数値型以外をtoFixedメソッドに使うとエラーになる
• numObjの絶対値が1e+21以上の場合は指数表記での文字列を返す
• numObjの値が有限数でない場合、"Infinity"、"NaN"、"-Infinity"のいずれかを返す

上記の特長について順番に説明します。

引数を省略した場合はdigitsが0として扱われる

toFixedメソッドに引数を指定しない場合、引数digitsが0として扱われます。そのため、返り値は整数で表示されます。

サンプルコードを以下に示します。

let num = 123.456;
console.log(num.toFixed()); 
// "123"

上記のサンプルコードでは、toFixedメソッドに引数を指定していないため、小数点以下の桁数は0として扱われます。結果として、123.456が丸められ、整数部分の"123"という文字列が返されています。

数値を表すのに必要な桁数よりも引数で指定した桁数が多い場合は0で埋められる

toFixedメソッドは、指定した小数点以下の桁数が数値の実際の桁数より多い場合、0で埋められます。

サンプルコードを以下に示します。

let num = 123.456;
console.log(num.toFixed(5));
// "123.45600"

上記のサンプルコードでは、小数点以下を5桁に指定していますが、元の数値の小数点以下は3桁しかありません。そのため、残りの2桁は0で埋められ、結果として"123.45600"という文字列が返されています。

整数リテラルに対して直接toFixedメソッドを実行するとエラーになる

整数リテラルに対して直接toFixedメソッドを直接呼び出すとエラーになります。この場合、整数リテラルを括弧で囲むか、整数リテラルの後に空白を追加することでエラーを回避できます。

サンプルコードを以下に示します。

console.log(10.toFixed(2)); // 整数リテラルに対して直接toFixedメソッドを実行
// Uncaught SyntaxError: Invalid or unexpected token

console.log((10).toFixed(2)); // 数値を括弧で囲む
// "10.00"

console.log(10 .toFixed(2)); // 数値の後に空白を入れる
// "10.00"

let num = 10;
console.log(num.toFixed(2));  // 数値型の変数に対してはエラーにならない
// "10.00"

上記のサンプルコードでは、10.toFixed(2)を実行しようとすると、構文エラーが発生します。これは、10という整数リテラルに対して.（ドット）が小数点かメソッド呼び出しを示すものかをJavaScriptが判別できないためです。

しかし、数値リテラルを括弧で囲むことで、JavaScriptは正しくメソッド呼び出しとして解釈することができ、"10.00"という結果が得られます。また、数値の後に空白を入れることでもエラーを回避できます。

また、変数に格納された整数に対して toFixedメソッドを呼び出す場合は、整数リテラルと異なり構文上の問題が発生しません。上記のように、numに数値10が代入されている場合、toFixedメソッドは正常に動作し、"10.00"という結果が得られます。

引数digitsが0以上100以下でない場合にエラーになる

toFixedメソッドで指定する桁数(digits)は0以上100以下でなければなりません。それ以外を指定するとエラーが発生します。

サンプルコードを以下に示します。

let num = 123.456;
console.log(num.toFixed(101));
// RangeError: toFixed() digits argument must be between 0 and 100

上記のサンプルコードでは、digitsに101を指定していますが、toFixedメソッドは小数点以下の桁数を0から100までしか指定できません。そのため、範囲外の桁数を指定するとRangeErrorが発生します。

数値型以外をtoFixedメソッドに使うとエラーになる

toFixedメソッドは数値型以外のデータ型には使用できません。

サンプルコードを以下に示します。

let num = 'hogehoge';
console.log(num.toFixed(2));
// TypeError: num.toFixed is not a function

上記のサンプルコードでは、numに文字列'hogehoge'を指定してtoFixedメソッドを実行しようとしていますが、エラーが発生します。toFixedメソッドは数値型（Number）のみに使用できるため、文字列や他のデータ型には使えません。

numObjの絶対値が1e+21以上の場合は指数表記での文字列を返す

numObjの絶対値が1e+21以上の場合、toFixedメソッドは単純にNumber.prototype.toString()を呼び出し、指数表記での文字列を返します。

サンプルコードを以下に示します。

let num = 1e22;
console.log(num.toFixed(2)); 
// "1e+22"

上記のサンプルコードでは、非常に大きな数値1e22に対してtoFixedメソッドを使っていますが、結果は固定小数点表記ではなく、指数表記で返されます。これは、toFixedメソッドが1e+21以上の数値に対しては自動的に指数表記を返すためです。

numObjの値が有限数でない場合、"Infinity"、"NaN"、"-Infinity"のいずれかを返す

数値が無限大や非数値の場合、toFixedメソッドはそれぞれに対応する文字列を返します。

サンプルコードを以下に示します。

let num = Infinity;
console.log(num.toFixed(2)); 
// "Infinity"

上記のサンプルコードでは、数値が無限大の場合にtoFixedメソッドを実行しています。この場合、toFixedメソッドは"Infinity"という文字列を返しています。

本記事のまとめ

この記事では数値を指定した小数点以下の桁数で表すメソッド『tofixedメソッド』について、以下の内容を説明しました。

• tofixedメソッドとは
• tofixedメソッドの構文
• tofixedメソッドの使い方
  • 数値を固定小数点表記で表した文字列で取得する
  • 小数点以下を指定した桁数で丸める
  • toFixedメソッドで数値型を返す
• toFixedメソッドの特徴
  • 引数を省略した場合はdigitsが0として扱われる
  • 数値を表すのに必要な桁数よりも引数で指定した桁数が多い場合は0で埋められる
  • 整数リテラルに対して直接toFixedメソッドを実行するとエラーになる
  • 引数digitsが0以上100以下でない場合にエラーになる
  • 数値型以外をtoFixedメソッドに使うとエラーになる
  • numObjの絶対値が1e+21以上の場合は指数表記での文字列を返す
  • numObjの値が有限数でない場合、"Infinity"、"NaN"、"-Infinity"のいずれかを返す

お読み頂きありがとうございました。