JavaScriptのtoFixedメソッドで誤差を修正する方法10選

●toFixedメソッドとは
●toFixedメソッドの誤差問題
●toFixedの誤差を修正する方法
●toFixedのよくあるエラーと対処法
●toFixedの応用例
まとめ

●toFixedメソッドとは

JavaScriptのtoFixedメソッドは、数値を指定された桁数で丸めた文字列を返すメソッドです。

小数点以下の桁数を指定して、数値を見やすい形式に整形することができるため、金額の表示などに便利ですね。

○toFixedの基本的な使い方

toFixedメソッドの使い方は至ってシンプルです。

数値の後ろにドット(.)をつけ、toFixedと記述し、丸めたい小数点以下の桁数を引数として渡すだけ。

例えば、数値を小数点第2位まで表示したい場合は、次のように記述します。

const num = 3.14159;
console.log(num.toFixed(2)); // "3.14"

num.toFixed(2)と書くことで、numの値を小数点第2位まで丸めた文字列が返されるわけです。

ただし、toFixedメソッドの戻り値が文字列であることに注意が必要ですね。

数値として扱いたい場合は、Number関数やparseFloatを使って数値に変換する必要があります。

○toFixedを使った小数点以下の桁数指定

先ほどの例では小数点第2位までの表示でしたが、toFixedメソッドを使えば任意の桁数で丸めることができます。

例えば、小数点第4位まで表示したい場合は、引数に4を指定すればOK。

const num = 3.14159;
console.log(num.toFixed(4)); // "3.1416"

このように、toFixedメソッドを使えば簡単に数値を指定した桁数で丸めることができるのです。

ただ、丸めた結果が指定した桁数より短くなる場合は、末尾に0が追加されることにも注意しましょう。

○サンプルコード1：toFixedで小数点第二位まで表示

それでは実際に、toFixedメソッドを使って小数点第二位までの表示を行うサンプルコードを見てみましょう。

function roundToTwo(num) {
  return num.toFixed(2);
}

const number1 = 3.14159;
const number2 = 2.71828;
const number3 = 1.41421;

console.log(roundToTwo(number1)); // "3.14"
console.log(roundToTwo(number2)); // "2.72"
console.log(roundToTwo(number3)); // "1.41"

roundToTwo関数は、引数で受け取った数値を小数点第二位まで丸めた文字列を返します。

number1からnumber3までの数値を、それぞれroundToTwo関数に渡して結果を出力しています。

実行すると、次のような結果が得られます。

"3.14"
"2.72"
"1.41"

数値が見やすい形式に整形されていますね。

このように、toFixedメソッドを使えば簡単に小数点以下の桁数を指定できます。

●toFixedメソッドの誤差問題

先ほどはtoFixedメソッドの基本的な使い方について解説しましたが、実はtoFixedメソッドを使う際には注意しなければならない点があります。

それが、浮動小数点数の計算誤差です。

○浮動小数点数の計算誤差とは

JavaScriptを含む多くのプログラミング言語では、小数点を含む数値を浮動小数点数として扱います。

しかし、浮動小数点数の計算には誤差が生じる場合があるのです。

例えば、次のような計算をしてみましょう。

console.log(0.1 + 0.2); // 0.30000000000000004

0.1と0.2を足した結果が0.3ではなく、0.30000000000000004になっています。

これが浮動小数点数の計算誤差です。

コンピューターの内部では、浮動小数点数を2進数で表現するため、このような誤差が発生するのです。

○toFixedを使うと誤差が発生するケース

toFixedメソッドは数値を丸めて文字列で返すメソッドですが、この浮動小数点数の計算誤差の影響を受けます。

つまり、toFixedメソッドを使っても、期待した結果が得られない場合があるのです。

例えば、以次のコードを見てみましょう。

const num = 1.35;
console.log(num.toFixed(1)); // "1.4"

numの値は1.35ですが、toFixed(1)で小数点第一位で丸めると”1.4″になります。

本来は”1.3″になってほしいところですが、浮動小数点数の計算誤差により、思わぬ結果になってしまうのです。

○サンプルコード2：toFixedで誤差が発生する例

それでは、toFixedメソッドを使った際に誤差が発生する例を、サンプルコードを交えて見ていきましょう。

const number1 = 1.35;
const number2 = 2.55;
const number3 = 3.14159;

console.log(number1.toFixed(1)); // "1.4"
console.log(number2.toFixed(1)); // "2.5"
console.log(number3.toFixed(3)); // "3.142"

number1は1.35を小数点第一位で丸めているため、本来は”1.3″になってほしいところですが、”1.4″になっています。

number2は2.55を小数点第一位で丸めているため、”2.5″になっていますが、これは期待通りの結果です。

number3は3.14159を小数点第三位で丸めているため、”3.142″になっていますが、これも本来は”3.142″になるはずです。

実行すると、次のような結果が得られます。

"1.4"
"2.5"
"3.142"

このように、toFixedメソッドを使うと、浮動小数点数の計算誤差の影響で、意図しない結果になることがあります。

●toFixedの誤差を修正する方法

toFixedメソッドを使うと、浮動小数点数の計算誤差の影響で意図しない結果になることがあるのでしたが、この誤差にはどのように対処すればよいのでしょうか。

ここでは、toFixedの誤差を修正する方法をいくつか紹介します。

○方法1：小数点以下を切り捨てる

toFixedメソッドで誤差が発生する原因は、丸めた結果が期待する値よりも大きくなってしまうことです。

そこで、まず小数点以下を切り捨てることで、誤差を小さくする方法があります。

JavaScriptでは、Math.floorメソッドを使うことで、小数点以下を切り捨てることができます。

Math.floorメソッドは、引数として与えられた数値以下の最大の整数を返します。

□サンプルコード3：Math.floorで切り捨て

const number = 1.35;
const flooredNumber = Math.floor(number * 10) / 10;
console.log(flooredNumber.toFixed(1)); // "1.3"

ここでは、numberに1.35を代入し、Math.floorメソッドを使って小数点以下を切り捨てています。

具体的には、numberに10を掛けて13.5にした後、Math.floorメソッドで13に切り捨て、再度10で割ることで1.3になります。

最後にtoFixed(1)で小数点第一位までの文字列に変換しています。

実行すると、次のような結果が得られます。

"1.3"

このように、Math.floorメソッドを使って小数点以下を切り捨てることで、toFixedメソッドの誤差を小さくすることができます。

ただし、この方法では常に切り捨てられるため、期待する結果よりも小さい値になる可能性があることに注意が必要です。

○方法2：小数点以下を四捨五入する

切り捨ての代わりに、小数点以下を四捨五入する方法もあります。

JavaScriptでは、Math.roundメソッドを使うことで、数値を四捨五入することができます。

□サンプルコード4：Math.roundで四捨五入

const number = 1.35;
const roundedNumber = Math.round(number * 10) / 10;
console.log(roundedNumber.toFixed(1)); // "1.4"

ここでは、numberに1.35を代入し、Math.roundメソッドを使って小数点以下を四捨五入しています。

具体的には、numberに10を掛けて13.5にした後、Math.roundメソッドで14に四捨五入し、再度10で割ることで1.4になります。

最後にtoFixed(1)で小数点第一位までの文字列に変換しています。

実行すると、次のような結果が得られます。

"1.4"

Math.roundメソッドを使った四捨五入では、切り捨てとは逆に、期待する結果よりも大きい値になる可能性があります。

状況に応じて、切り捨てと四捨五入を使い分ける必要がありますね。

○方法3：数値を整数に変換してからtoFixedを使う

もう一つの方法は、toFixedメソッドを使う前に、数値を整数に変換してしまうことです。

具体的には、10の累乗を掛けて整数にした後、toFixedメソッドで丸め、再度10の累乗で割ることで元の桁数に戻します。

□サンプルコード5：整数変換後にtoFixed

const number = 1.35;
const integerNumber = Math.round(number * 100);
const fixedNumber = (integerNumber / 100).toFixed(2);
console.log(fixedNumber); // "1.35"

ここでは、numberに1.35を代入し、100を掛けて135にした後、Math.roundメソッドで四捨五入して整数の135にしています。

その後、toFixed(2)で小数点第二位までの文字列に変換し、最後に100で割ることで元の桁数に戻しています。

実行すると、次のような結果が得られます。

"1.35"

この方法であれば、浮動小数点数の計算誤差の影響を受けずに、期待通りの結果を得ることができます。

ただし、数値が整数に変換されるため、元の数値の精度が失われてしまうことに注意が必要です。

○方法4：パフォーマンスを考慮した誤差の修正

ここまでは、toFixedメソッドの誤差を修正する方法として、小数点以下の切り捨てや四捨五入、整数への変換などを紹介してきました。

しかし、これらの方法では、計算のたびにMath.floorやMath.roundを呼び出すため、パフォーマンスが低下する可能性があります。

そこで、パフォーマンスを考慮した誤差の修正方法として、parseFloatとMath.roundを組み合わせる方法があります。

parseFloatは文字列を浮動小数点数に変換する関数で、数値に変換できない部分は無視されます。

□サンプルコード6：parseFloatとMath.roundの組み合わせ

const number = 1.35;
const fixedNumber = Math.round(parseFloat(number.toFixed(2)));
console.log(fixedNumber); // 1.35

ここでは、numberに1.35を代入し、toFixed(2)で小数点第二位までの文字列に変換しています。

その後、parseFloatで浮動小数点数に変換し、Math.roundで四捨五入しています。

実行すると、次のような結果が得られます。

1.35

このように、parseFloatとMath.roundを組み合わせることで、toFixedメソッドの誤差を修正しつつ、パフォーマンスの低下を抑えることができます。

ただし、parseFloatで数値に変換できない部分は無視されるため、数値以外の文字列が含まれている場合は注意が必要ですね。

○方法5：独自の丸め関数を作成する

最後に、独自の丸め関数を作成する方法を紹介します。

これまで紹介してきた方法は、状況に応じて使い分ける必要がありましたが、独自の関数を作成することで、統一的な丸め処理を行うことができます。

□サンプルコード7：独自丸め関数の実装

function customRound(number, precision) {
  const shift = Math.pow(10, precision);
  return Math.round(number * shift) / shift;
}

const number1 = 1.35;
const number2 = 2.55;
const number3 = 3.14159;

console.log(customRound(number1, 1)); // 1.4
console.log(customRound(number2, 1)); // 2.6
console.log(customRound(number3, 3)); // 3.142

ここでは、customRound関数を定義しています。

第一引数には丸める対象の数値を、第二引数には小数点以下の桁数を指定します。

関数内では、10の累乗を計算し、数値にかけた後、Math.roundで四捨五入し、再度10の累乗で割ることで丸め処理を行っています。

number1からnumber3までの数値を、それぞれcustomRound関数に渡して結果を出力しています。

実行すると、次のような結果が得られます。

1.4
2.6
3.142

独自の丸め関数を作成することで、プロジェクト全体で統一的な丸め処理を行うことができます。

また、関数内の処理を変更することで、切り捨てや四捨五入など、目的に応じた丸め処理を実装することも可能です。

●toFixedのよくあるエラーと対処法

toFixedメソッドは便利な機能ですが、時としてエラーが発生することがあります。

ここでは、toFixedのよくあるエラーとその対処法について解説します。

○toFixed is not a functionエラーの原因と対処

toFixedメソッドを使おうとしたときに、”toFixed is not a function”というエラーが発生することがあります。

このエラーは、toFixedメソッドを呼び出そうとしている対象が数値ではない場合に発生します。

例えば、次のようなコードを実行すると、このエラーが発生します。

const number = "1.23";
console.log(number.toFixed(1)); // エラー: toFixed is not a function

ここでは、numberに文字列の”1.23″を代入しています。

toFixedメソッドは数値に対して使用するメソッドなので、文字列に対して呼び出すとエラーになるのです。

このエラーを解決するには、対象を数値に変換してからtoFixedメソッドを呼び出す必要があります。

数値への変換には、Number関数やparseFloatを使用します。

const number = "1.23";
console.log(Number(number).toFixed(1)); // "1.2"
console.log(parseFloat(number).toFixed(1)); // "1.2"

Number関数やparseFloatを使って文字列を数値に変換してからtoFixedメソッドを呼び出すことで、エラーを回避できます。

○toFixedが意図した桁数で丸められない場合の対処

toFixedメソッドは、指定した桁数で数値を丸めた文字列を返します。

しかし、場合によっては意図した桁数で丸められないことがあります。

例えば、次のコードを見てみましょう。

const number = 1.2345;
console.log(number.toFixed(3)); // "1.234"

ここでは、numberに1.2345を代入し、toFixed(3)で小数点第三位までの文字列を取得しています。

しかし、実行結果は”1.234″となり、小数点第三位が切り捨てられています。

これは、toFixedメソッドの丸め処理が「偶数丸め」と呼ばれる方法で行われるためです。

偶数丸めでは、丸める桁の数値が5の場合、その前の桁が偶数ならそのまま、奇数なら切り上げられます。

この問題を解決するには、先ほど紹介した方法4のように、parseFloatとMath.roundを組み合わせる方法があります。

const number = 1.2345;
const fixedNumber = Math.round(parseFloat(number.toFixed(3)));
console.log(fixedNumber); // 1.235

parseFloatで文字列を浮動小数点数に変換し、Math.roundで四捨五入することで、意図した桁数で丸められた数値を得ることができます。

○toFixed(0)を使っても小数点以下に0が表示される問題

toFixedメソッドに引数として0を渡すと、小数点以下を丸めた整数部分の文字列が返ってくると期待するかもしれません。

しかし、実際には小数点以下に0が表示されてしまうのです。

const number = 1.23;
console.log(number.toFixed(0)); // "1"

ここでは、numberに1.23を代入し、toFixed(0)で小数点以下を丸めた整数部分の文字列を取得しています。

期待する結果は”1″ですが、実際には”1″になっています。

この問題を解決するには、Number関数やparseIntを使って文字列を整数に変換する方法があります。

const number = 1.23;
console.log(Number(number.toFixed(0))); // 1
console.log(parseInt(number.toFixed(0), 10)); // 1

Number関数やparseIntを使うことで、toFixed(0)で得られた文字列を整数に変換できます。

これで、小数点以下が表示されない結果を得ることができます。

●toFixedの応用例

ここまでtoFixedメソッドの基本的な使い方や誤差の修正方法について解説してきましたが、実際の開発現場ではどのように活用されているのでしょうか。

ここでは、toFixedメソッドの応用例をいくつか紹介します。

○サンプルコード8：toFixedで通貨フォーマットを実装

toFixedメソッドを使うと、数値を通貨のフォーマットに整形することができます。

次のサンプルコードでは、金額を引数として受け取り、通貨記号を付けて小数点第二位までの文字列を返す関数を実装しています。

function formatCurrency(amount) {
  const formattedAmount = amount.toFixed(2);
  return `$${formattedAmount}`;
}

console.log(formatCurrency(10)); // "$10.00"
console.log(formatCurrency(99.99)); // "$99.99"
console.log(formatCurrency(100.5)); // "$100.50"

この関数では、まずtoFixed(2)を使って小数点第二位までの文字列に変換し、その前にドル記号を付けて返しています。

実行すると、次のような結果が得られます。

"$10.00"
"$99.99" 
"$100.50"

金額が見やすい形式で表示されていますね。

このように、toFixedメソッドを使えば簡単に通貨のフォーマットを実装できます。

○サンプルコード9：toFixedで0埋めをする方法

toFixedメソッドを使うと、指定した桁数で0埋めをすることもできます。

次のサンプルコードでは、数値を引数として受け取り、3桁になるように0埋めをする関数を実装しています。

function padZero(number) {
  return number.toFixed(0).padStart(3, '0');
}

console.log(padZero(1)); // "001"
console.log(padZero(12)); // "012"
console.log(padZero(123)); // "123"

この関数では、まずtoFixed(0)を使って小数点以下を切り捨てた整数部分の文字列を取得しています。

その後、padStartメソッドを使って、文字列の長さが3になるように左側を0で埋めています。

実行すると、次のような結果が得られます。

"001"
"012"
"123"

数値が3桁になるように0埋めされていますね。

このように、toFixedメソッドとpadStartメソッドを組み合わせることで、簡単に0埋めを実装できます。

○サンプルコード10：toFixedと正規表現で桁数を動的に変更

これまでの例では、toFixedメソッドの引数として固定の桁数を指定していましたが、正規表現を使うことで桁数を動的に変更することもできます。

次のサンプルコードでは、数値と桁数を引数として受け取り、指定された桁数で丸めた文字列を返す関数を実装しています。

function roundToDigits(number, digits) {
  const regex = new RegExp(`(\\d+\\.\\d{${digits}})(\\d)`);
  const match = number.toString().match(regex);
  return match ? parseFloat(match[1]) : number.valueOf();
}

console.log(roundToDigits(1.2345, 2)); // 1.23
console.log(roundToDigits(1.2345, 3)); // 1.235
console.log(roundToDigits(1.2345, 4)); // 1.2345

この関数では、正規表現を使って指定された桁数までの数値部分を取得しています。

正規表現の(\\d+\\.\\d{${digits}})は、整数部分と小数点、指定された桁数までの小数部分にマッチします。

(\\d)は、指定された桁数の次の数字にマッチします。

matchメソッドを使ってマッチした結果を取得し、マッチした場合はmatch[1]を浮動小数点数に変換して返しています。

マッチしない場合は、元の数値をそのまま返しています。

実行すると、次のような結果が得られます。