数値を小数点以下で四捨五入したい | 数値操作

数値を小数点以下で四捨五入したい | 数値操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.23

このプログラムでは、数値を小数点以下で四捨五入する方法を紹介します。Math.round()を使って指定された桁数で四捨五入を行います。

使用するメソッド: Math.round()
数値を小数点以下で四捨五入するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Mathオブジェクトメソッドの機能一覧
Numberオブジェクトメソッドの機能一覧

使用するメソッド: Math.round()

Math.round()は数値を四捨五入するためのメソッドです。桁数を指定して、より正確に四捨五入することが可能です。

数値を小数点以下で四捨五入するプログラム

以下のコードでは、浮動小数点数123.456789を小数点以下2桁で四捨五入しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数値を小数点以下で四捨五入する方法</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        pre {
            background: #f4f4f4;
            border-left: 3px solid #ccc;
            padding: 10px;
            margin: 20px 0;
        }
    </style>

    <script>
        window.onload = function() {
            // 小数点以下を四捨五入する関数
            function roundNumber(num, decimalPlaces) {
                const factor = Math.pow(10, decimalPlaces);
                return Math.round(num * factor) / factor;
            }

            // テスト用の数値
            const number = 123.456789;

            // 小数点以下2桁で四捨五入した結果
            const roundedNumber = roundNumber(number, 2);

            // 結果をHTMLに表示
            document.getElementById('roundedNumber').textContent = `${number} を小数点以下2桁で四捨五入した結果: ${roundedNumber}`;
        }
    </script>
</head>
<body>

    <h1>数値を小数点以下で四捨五入する方法</h1>

    <div id="roundedNumber"></div>

</body>
</html>