Javascriptで小数点を切り捨てる方法を徹底解説！

今回の記事は、

• Javascriptを使って小数点を切り捨てる方法が知りたい
• Javascriptを使って小数点を切り捨てる方法は知ってるけど、どの関数を使えばよいか分からない

というお悩みを解消できる記事になっています。

数値を扱うシステムで忘れてはならないのが、「いかに正しく（正確に）小数点を処理できるか」ですよね。

これまでであれば、複雑な計算はサーバーサイド側で処理することが比較的多かったのですが、最近ではフロントエンド側だけで処理を完結させる実装も増えてきています。

当然、Javascriptにも小数点を処理する関数は実装されているのですが、その使用に際してはいくつか注意点があり、今回はその中でも「小数点の切り捨て」処理について焦点を当てようと思います。

この記事を読んでいただき、『Javascriptで小数点を切り捨てるにはどのように実装すれば（どの関数を使用すれば）よいのか』をご理解いただければと思います。

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

【結論】小数点の切り捨てにはMath.trunc()関数を使う

Javascriptを使って小数点を切り捨てる方法としては、主に以下の3つの関数があります。

• 1. parseInt
• 2. Math.floor()
• 3. Math.trunc()

結論から申し上げると、小数点を切り捨てる際には必ずMath.trunc()関数を使用するようにしてください。

parseInt関数やMath.floor()関数も一見すると良さそうですが、実はとんでもない落とし穴が潜んでいます。それぞれ順を追って解説していきますので、ぜひ最後までご覧くださいね。

小数点の切り捨てその１ parseInt関数

parseIntの基本的な構文は以下のとおりです。

parseInt(string, radix)

このうち、stringという部分に数値を代入し（※stringとなっていますが、数値を代入すると関数側で文字列に変換してくれます）、radixには基数（2進数、10進数 など）を代入します。

なお、この基数は省略可能で、その場合には10進数が設定されます。

parseIntは、元々は文字列を整数に変換するためのJavascriptの関数なのですが、その特徴を活かして、小数点の切り捨てにも利用されることがあります。

実際に利用方法を見ていきましょう。

const number = parseInt(123.678)

console.log(number)
=> 123

このように小数点以下が切り捨てられているのがお分かりいただけるかと思います。

しかしこのparseIntですが、「小数点の切り捨て」には推奨できません。

parseInt関数を使ってはいけない理由

というのも、以下の通り、parseIntの第1引数の小数点以下に一定数の0が続いた場合に思いもよらない数値が返ってきてしまうのです。

const number = parseInt("123.678")

console.log(parseInt(0.1))
=> 0

console.log(parseInt(0.00001))
=> 0

console.log(parseInt(0.0000001))
=> 1

console.log(parseInt(0.0000005))
=> 5

このように、小数第6位まで0が続き、第7位以降に0以外の数字がある場合、その戻り値が期待した値(0)ではなくなっているのがお分かりいただけると思います。

これは主に以下の3つの原因によります。

• 1. parseIntの第1引数はまず文字列に変換されるため
• 2. JavaScriptにおいて、「数値→文字列」の変換は特定の値から指数表記に切り換わるため
• 3. parseIntでは、指数表記のeを見るとそれ以降の文字列を無視してしてしまうため

上記の原因を実際の数値に当てはめてみると、以下のようになります。

このように、その性質上、parseIntを使うと時に期待しない結果が返ってきますので、「小数点を切り捨てる」ためには使用しないでおきましょう。

小数点の切り捨てその２ Math.floor()関数

続いてご紹介するのは、Math.floor()です。

こちらの関数の基本的な構文は以下のとおりです。

Math.floor(number)

このうち、numberという部分に数値を代入することで、小数点以下を切り捨てた値を返してくれます。

console.log(Math.floor(123.678))
=> 123

また、parseIntで見られた不具合も発生しません。

console.log(Math.floor(0.1))
=> 0

console.log(Math.floor(0.00001))
=> 0

console.log(Math.floor(0.0000001))
=> 0

console.log(Math.floor(0.0000005))
=> 0

ただし、使い方は非常に簡潔で分かりやすいのですが、このMath.floor()関数も「小数点の切り捨て」には推奨できません。

Math.floor()関数を使ってはいけない理由

というのも、ここまで小数点を「切り捨てる」方法としてご紹介してきましたが、実際には小数点を「切り下げる」ための関数なのです。

この「切り捨て」と「切り下げ」の違いは、正負の数で比較してみると分かりやすいかと思います。

console.log(Math.floor(1.2))
=> 1

console.log(Math.floor(1.6))
=> 1

console.log(Math.floor(-1.2))
=> -2

console.log(Math.floor(-1.6))
=> -2

console.log(Math.floor(-0.2))
=> -1

このように、引数に負の数を指定すると、単に小数点以下を切り捨てているとは考えられませんよね。

これは、Math.floor()関数が、「引数として指定した数値以下で最大の整数を返す」仕様になっているためです。

このように、厳密には「小数点の切り捨て」のための関数ではないため、「小数点の切り捨て」には使用しないでおきましょう。

小数点の切り捨てその３ Math.trunc()関数

最後にご紹介するのが、Math.trunc()関数です。

冒頭でもお伝えしました通り、「小数点の切り捨て」には、このMath.trunc()関数を使用しましょう。

一部懸念点はある（※後述します）ものの、Math.trunc()関数を使用すると、これまでの関数（parseInt、Math.floor()）の問題点は払拭されます。

基本的な使い方はMath.floor()関数と同じであるため、早速具体例を見ていきましょう。

console.log(Math.trunc(1.2))
=> 1

console.log(Math.trunc(1.6))
=> 1

console.log(Math.trunc(-1.2))
=> -1

console.log(Math.trunc(-1.6))
=> -1

このように、負の数であっても「小数点の切り捨て」処理が行われていることがお分かりいただけるかと思います。

ただし、こちらも一つだけ注意点があります。

Math.trunc()関数を使用する際の注意点

非常に便利なMath.trunc()関数ですが、実はIE(Internet Explorer)ではサポートされていないのです。

Javascriptへの対応状況が芳しくないIEですが、ここでもその本領を発揮してしまうのです…。
（※なお、Javascriptを使ってブラウザを判定する方法についてはこちらの記事（【2020年版】Javascriptでブラウザを判定する方法まとめ【コピペで使える】）にて詳しく解説していますので、ぜひこちらもご覧ください。）

こればかりは仕方ないため、Polyfill (ポリフィル) でその穴を埋めてあげましょう。
（※「Polyfill」とは、「未対応のブラウザ（ここではIE）であっても使いたい機能が問題なく動くように、同等の機能を自ら実装しよう」という考え方で、多くの場合Javascriptに関する文脈で使用されます。）

具体的な実装例は以下の通りです。こちらはコピペしてそのまま使用可能です。

Math.trunc = Math.trunc || function(num) {
  return num < 0 ? Math.ceil(num) : Math.floor(num)
}

これで、ブラウザ間の差異を気にせずにMath.trunc()関数を使用することができます。

最後に

さて、ここまで、Javascriptを使って小数点を切り捨てる方法について解説してきましたがいかがでしたか？

今でも「小数点を切り捨てるにはparseInt関数やMath.floor()関数を使いましょう」としているサイトやブログは非常に多いため、くれぐれもそれらに惑わされないでくださいね。

Javascriptで「小数点を切り捨てる」には、迷わずMath.trunc()関数を使用しましょう！

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。