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

今回の記事は、

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

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

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

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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


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

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

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

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

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

小数点の切り捨てその1 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を見るとそれ以降の文字列を無視してしてしまうため

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

引数文字列への変換後実行結果
0.1“0.1”0
0.000001“0.000001”0
0.0000001“1e-7”1
0.0000005“5e-7”5

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

小数点の切り捨てその2 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()関数が、「引数として指定した数値以下で最大の整数を返す」仕様になっているためです。

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

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

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

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

一部懸念点はある(※後述します)ものの、Math.trunc()関数を使用すると、これまでの関数(parseIntMath.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()関数を使用することができます。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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