【JavaScript】小数点以下を切り捨てできるMath.floorメソッドについて解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptで小数点以下を切り捨てできるMath.floorメソッドについて

Math.floorメソッドとは
Math.floorメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件：実行環境について
Math.floorメソッドとは
Math.floorメソッドを解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：Math.floorメソッドを使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

Math.floorメソッドとは

Math.floorメソッドとは、引数の数の小数点以下を切り捨てした数を返すメソッドです。

使い方サンプルは以下です。

var result = Math.floor(7.9)

1	var result = Math.floor(7.9)

変数resultには

7

という値が返されます。

では、次の章で実際に使ってみます。

Math.floorメソッドを解説するプログラムの概要

Math.floorメソッドを解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

Math.floorメソッドの引数に

正の数（小数点以下が4以下）
正の数（小数点以下が5以上）
負の数（小数点以下が4以下）
負の数（小数点以下が5以上）

4パターンを与えて、結果をHTMLに表示させます。

フォルダ構成は以下のようになっています。
Math.roundメソッドを解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Math.floorメソッドサンプル</title>
    </head>
    <body>
        <h2>Math.floorメソッドサンプル</h2>
        <h3>正の数を切り捨て</h3>
        <div id="resultPositiveFloor1"></div>
        <div id="resultPositiveFloor2"></div>
        <h3>負の数を切り捨て</h3>
        <div id="resultNegativeFloor1"></div>
        <div id="resultNegativeFloor2"></div>
        <script src="js\sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Math.floorメソッドサンプル</title>

</head>

<body>

<h2>Math.floorメソッドサンプル</h2>

<h3>正の数を切り捨て</h3>

<h3>負の数を切り捨て</h3>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

HTMLで外部のJavaScriptを読み込むやり方を解説します

JavaScriptサンプルプログラム

// 正の数を切り捨て
var positiveDecimal1 = 3.4
var positiveDecimalFloor1 = Math.floor(positiveDecimal1)
var resultPositiveFloor1 = document.getElementById('resultPositiveFloor1');
resultPositiveFloor1.innerHTML = positiveDecimal1 + "の小数点以下を切り捨て：" + positiveDecimalFloor1

var positiveDecimal2 = 8.6
var positiveDecimalFloor2 = Math.floor(positiveDecimal2)
var resultPositiveFloor2 = document.getElementById('resultPositiveFloor2');
resultPositiveFloor2.innerHTML = positiveDecimal2 + "の小数点以下を切り捨て：" + positiveDecimalFloor2

// 負の数を切り捨て
var negativeDecimal1 = -3.3
var negativeDecimalFloor1 = Math.floor(negativeDecimal1)
var resultNegativeFloor1 = document.getElementById('resultNegativeFloor1');
resultNegativeFloor1.innerHTML = negativeDecimal1 + "の小数点以下を切り捨て：" + negativeDecimalFloor1

var negativeDecimal2 = -8.8
var negativeDecimalFloor2 = Math.floor(negativeDecimal2)
var resultNegativeFloor2 = document.getElementById('resultNegativeFloor2');
resultNegativeFloor2.innerHTML = negativeDecimal2 + "の小数点以下を切り捨て：" + negativeDecimalFloor2

// 正の数を切り捨て

var positiveDecimal1 = 3.4

var positiveDecimalFloor1 = Math.floor(positiveDecimal1)

var resultPositiveFloor1 = document.getElementById('resultPositiveFloor1');

resultPositiveFloor1.innerHTML = positiveDecimal1 + "の小数点以下を切り捨て：" + positiveDecimalFloor1

var positiveDecimal2 = 8.6

var positiveDecimalFloor2 = Math.floor(positiveDecimal2)

var resultPositiveFloor2 = document.getElementById('resultPositiveFloor2');

resultPositiveFloor2.innerHTML = positiveDecimal2 + "の小数点以下を切り捨て：" + positiveDecimalFloor2

// 負の数を切り捨て

var negativeDecimal1 = -3.3

var negativeDecimalFloor1 = Math.floor(negativeDecimal1)

var resultNegativeFloor1 = document.getElementById('resultNegativeFloor1');

resultNegativeFloor1.innerHTML = negativeDecimal1 + "の小数点以下を切り捨て：" + negativeDecimalFloor1

var negativeDecimal2 = -8.8

var negativeDecimalFloor2 = Math.floor(negativeDecimal2)

var resultNegativeFloor2 = document.getElementById('resultNegativeFloor2');

resultNegativeFloor2.innerHTML = negativeDecimal2 + "の小数点以下を切り捨て：" + negativeDecimalFloor2

getElementByIdメソッド
innerHTMLプロパティ

については、こちらの記事をご参考ください。

getElementByIdメソッド
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します

実行結果

作成したHTMLをブラウザで開きます。
JavaScriptのMath.floorメソッドを解説

小数点以下の切り捨てができていることが確認できました。

まとめ：Math.floorメソッドを使ってみよう

以上がJavaScriptのMath.floorメソッドについての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ