今回ご紹介するのはJavaScriptの四捨五入の仕方について！除法の演算は小数が続いてしまうことも多く、端数の処理が必須です。柔軟な環境に対応できるように、切り捨て、切り上げと共に桁指定の方法についても詳しく解説します。
システムや要件によって処理方法を変えなければならないため、ここでしっかり基礎を押さえておきましょう。
目次
JavaScriptの小数点処理方法まとめ
JavaScriptで小数点以下の処理を行うには、事前に用意された関数（メソッド）を使います。
JS小数点以下切り捨て
|
1 2 3 |
num = 5.235729471; num = Math.floor(num); console.log(num); // 結果=5 |
JS小数点以下切り上げ
|
1 2 3 |
num = 5.235729471; num = Math.ceil(num); console.log(num); // 結果=6 |
JS四捨五入
|
1 2 3 |
num = 5.235729471; num = Math.round(num); console.log(num); // 結果=5 |
桁指定
続いて桁数を指定して四捨五入する方法ですが、残念ながらJavaScriptにはそのような機能がありません。そのため自分で演算を少し工夫する必要があります。
桁数置を指定するには、事前に10倍、100倍した数字に切り捨てなどの処理を行い、かけた数だけ割って表示します。実際に例を見て確かめてみましょう。
|
1 2 3 4 5 |
num = 3.2135; num = num * 10; num = Math.floor(num); num = num / 10; console.log(num); // 3.2 |
2桁を指定するには数字に10をかけ、切り上げ処理、最後にかけた分の10で割って計算を終了します。
|
1 2 3 4 5 |
num = 3.23527; num = num * 100; num = Math.floor(num); num = num / 100; console.log(num); // 3.23 |
3桁の場合は100をかけて切り上げ処理、最後に100で割ります。
|
1 2 3 4 5 |
num = 5.235729471; num = num * 1000; num = Math.round(num); num = num / 1000; console.log(num); // 5.236 |
4桁の場合は1000で処理を行います。
このように桁数が上がっていくごとに、数を10倍、100倍、1000倍と、10をかけていきます。最後にかけた分を割る処理を忘れずに！
ちなみにこの5行の処理を数行にまとめることもできます。
|
1 2 |
num = 3.23527; console.log(Math.round(num * 100) / 100); // 3.24 |
【JavaScript】よくあるエラーの原因とその解決方法を解説
桁数指定処理を関数にして便利にする
JavaScriptには桁数を指定する関数が無いため、複数の数字を計算する場合は上記の処理を何回も書かなければなりません。
そこで桁数指定の一連の処理をまとめて関数にしてしまいましょう。切り捨て、切り上げ、四捨五入は全て関数化された演算なので、桁数指定も同じように扱えれば非常に便利です！
関数の書き方
JavaScriptの関数はfunctionという宣言の後に関数名、引数、処理内容を続けます。引数を設定すると、関数内で使用できる値を作成できます。
また戻り値では関数実行後に返却される値を設定できます。
処理内容;
return 戻り値;
}
|
1 2 3 4 5 |
function digitFloor(num, digit) { return Math.floor(num * digit) / digit; } console.log(digitFloor(1.23, 10)); // 1.2 |
ここではdigitFloorという桁数指定可能な切り捨て関数を作成しました。
＋α現場での関数の書き方
余談ですが実際の現場で関数を作成する場合、その関数がどんな機能を持つのか、設定する引数の意味、戻り値は何を示すのかをドキュメントとしてコメントに記述します。
学習中は特に必要ありませんが、より実践的なコードを書きたい方はここで練習しておくと良いでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
/** * 桁数指定ができる切り捨て関数 * @param {number} 切り捨てする小数 * @param {number} 桁数指定（10 -> 2桁) * @return {number} 桁数指定＋切り捨てした値 */ function digitFloor(num, digit) { return Math.floor(num * digit) / digit; } console.log(digitFloor(1.23, 10)); // 1.2 |
上の/**…に続く部分が関数のドキュメントです。
* 関数が備える機能
* 引数1の型と意味
* 引数2の型と意味
* 戻り値の型と意味
*/
便利なMathオブジェクト
主題として小数点以下の処理を実行する関数を紹介しましたが、実はMathオブジェクトには他にも数学に関する便利なプロパティやメソッドが存在します。
| プロパティ | 機能（戻り値） |
|---|---|
| Math.E | 自然対数の底（2.718….） |
| Math.PI | 円周率（3.14159…） |
| Math.SQRT2 | 2の平方根（1.414…） |
| メソッド | 機能 |
| Math.sin(x) | xの余弦（コサイン）を返す |
| Math.cos(x) | xの正弦（サイン）を返す |
| Math.tan(x) | xの正接（タンジェント）を返す |
| Math.max(x, y, z…) | 引数の中での最大値を返す |
| Math.min(x, y, z…) | 引数の中での最小値を返す |
| Math.pow(x, y) | xのy累乗を返す（xy) |
| Math.random() | 0以上1未満の疑似乱数を返す |
|
1 2 3 4 5 6 7 8 |
console.log("円周率=", Math.PI); console.log("サイン=", Math.sin(10)); console.log("コサイン=", Math.cos(10)); console.log("タンジェント=", Math.tan(10)); console.log("最大値=", Math.max(12, 34, 45, 35, 23, 35, 23, 12, 45, 12, 56, 35, 65)); console.log("最小値=", Math.min(15, 34, 45, 35, 23, 35, 23, 12, 45, 12, 56, 35, 65)); console.log("2の50乗=", Math.pow(2, 50)); console.log("乱数=", Math.round(Math.random() * 100)); |
サイン= -0.5440211108893698
コサイン= -0.8390715290764524
タンジェント= 0.6483608274590866
最大値= 65
最小値= 12
2の50乗= 1125899906842624
乱数= 33
まとめ
今回はJavaScriptでの小数点処理やその他の便利なプロパティ、メソッドをご紹介しました！こうして多くの利用者がいる処理は組み込み関数として、言語に標準搭載されていることがほとんど。
何か新しく関数を作りたいと思った際は、そういった関数が無いか調べてみるのも良いでしょう。
また逆に組み込み関数を自作してみると技術が身につきます。挫折しないよう、楽しみながら学んでいきましょう！
【初心者向け】JavaScriptで文字列を切り取る方法は？メソッドの基本から実際のコード例について解説！
