Javascriptで少数2桁に固定してみた

2024年2月27日

PHPで計算を行った結果を表示する場合、小数点以下を固定化するのに「round関数」を使用します。
ズバリ小数点桁数を指定できます。

今回はこれをJavascriptで実装する必要がありました。
計算をJavascriptで行うためです。

そもそもなぜ小数点桁数を固定化するのか?

ズバリ見栄えです。

例えば10 ÷ 3 を実行すると答えは「3.3333333333･････」と小数点の桁数が表示可能な限りつづきます。
複数の小数点を持つ数値の桁数が不ぞろいだと、見にくくなります。
そこで、小数点以下を2桁に固定化して、見栄えを整えたいというのが動機です。

Javascriptで小数点以下を固定化する方法

次のように記述すると、小数点を固定化できます。

変数に、.toFixed(2)をつけるだけで、小数点を固定化できました。

疑問：toFixedって何をする関数？

変数に.toFixed関数を付け足せば小数点を固定化できることはわかりました。
ただ、「toFixedって何？」という素朴な疑問が残りました。

というわけで調べてみました。

調べたら、そのまんまでした。

まず、toFixed関数の説明が書かれたサイトを見てみました。
この手のサイトは正確に書かれていますが、少々玄人向けに書かれています。

そのため、パット見では「わかるような、わからないような」感じがします。

ただ、いろいろ調べてみると「小数点の桁数を固定化するだけの関数」ということがわかりました。
PHPをやっていると、関数の特性を利用して、結果的にそうなるようにするパターンが多く、Javascriptも同様にそうなんだろうと思っていました。

ところが、ド直球な関数でした。

注意点としては以下の通りです。

• 割り切れる場合も小数点以下が表示される

例えば4÷2の答えは2ですが、toFixed(2)を指定すると「2.00」と表示されます。
必ず指定した桁数が表示されます。

• 指定する桁数が多いと答えが不正確な場合がある

例えば10÷3は3.33333333 ･･･と小数点以下がずっと続きます。
しかしtoFixed(30)と、小数点以下を30桁に指定してみると「3.333333333333333481363069950021」と途中から答えが変になります。

これは、Javascriptの数値（Number型）が計算値の桁数に制限があるため、一定の桁数を超えると計算誤差が出るためです。

ちょっとしっくりこなかったのですが、32bit変数で64bit計算をするようなものだと思えば、理解できました。要は桁数オーバーフローを起こし誤差がでるのです。

とはいえ、小数点2桁程度であればそこまでの誤差は出ません。
表示桁数を固定化する目的であればそこまでシビアでなくても大丈夫です。

Javascriptは調べると思いもよらぬ関数が多い

Javascriptはブラウザサイドの言語のため、予想しない関数があったりします。
処理を実現するために、関数を自作していたら、すでにその機能があったなど、思いのほか親切関数が多いです。

Javascriptで悩んだ場合、まずは調べてみると労せず目的の機能が見つかることが多いです。