【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

【JavaScript】指定した任意の桁数で少数を丸める【toFixed/toPrecision】

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで少数を丸める際に桁数を指定して任意の箇所で丸める方法をご紹介しています。

下記の記事では、Mathオブジェクトで少数を丸めて整数にする方法をご紹介しました。

今回は数値を整数に丸めるのではなく、特定の桁数で少数を丸める場合に有効な方法になります。ある値を取得あるいは出力する際に桁数を揃えたい! といった場合に有効な方法かと思います。

では、解説していきます。

桁数を揃える2つのメソッド

少数を指定した任意の桁数で丸める場合、Numberオブジェクトの下記のメソッドを使用します。

  • toFixed()
  • toPrecision()

それぞれ数値を丸めるという点では同じメソッドとなりますが、用途が若干異なりますので、使い方を詳しく見てみましょう。

toFixed()

toFixed()メソッドは、小数点以下がメソッドの引数に指定された桁数に丸める処理を実行するメソッドです。そのため引数に残したい少数の桁数を指定します。

試しにサンプルを実行してみます。

let value = 123.456

value.toFixed(1);
//実行結果:123.5:

value.toFixed(2);
//実行結果:123.46

実行結果を確認すると、引数に指定した桁数で少数が丸まっていますね。残したい少数の桁数が固定されている場合はtoFixed()メソッドを活用しましょう。

では、続いてもう一つのtoPrecision()メソッドの使い方と実行結果を見てみましょう。

toPrecision()

toPrecision()メソッドは、整数・少数を合わせた数値全体が引数に指定された桁数になるように丸める処理を行うメソッドです。そのため引数には数値全体の桁数を指定します。

試しにサンプルを実行してみます。

let value = 123.456

value.toPrecision(4);
//実行結果:123.5

value.toPrecision(5);
//実行結果:123.46

実行結果を確認すると、数値全体の桁数が引数に指定した値と等しい桁数になっています。整数・少数を含めた全体の桁数が固定の場合はtoPrecision()メソッドを活用しましょう。

toFixed()とtoPrecision()の共通点

基本的にプログラムの実行結果として返ってくるデータは一定ではないことが多いです。桁数より少ない場合も想定されます。桁数が多い場合はメソッドが丸めてくれますが、少ない場合はどうなるでしょうか。

せっかくなので試してみましょう。

let value = 123.456

console.log(value.toFixed(7));
//toFixedの実行結果:123.4560000

console.log(value.toPrecision(10));
//toPrecisionの実行結果:123.4560000

上記サンプルの実行結果を確認すると、桁数が満たない不足した分はゼロで補うという結果になりました。この結果も一緒に覚えておくと、組み込む際にコーディングがスムーズに進むかと思います。

最後に

少数を含めた処理は整数だけのものより正確差が求めらることが多いです。必要に応じて適切なメソッドが選択できるようにしておきましょう。

以上、JavaScriptで指定した任意の桁数で少数点数を丸める方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍