プログラミングにおいて、数値の四捨五入は頻繁に行われる操作の一つです。JavaScriptにも、この四捨五入を簡単に実施できるいくつかの方法があります。本記事では、JavaScriptで四捨五入を行う基本的な方法について詳しく説明します。
Math.round()関数の基本
JavaScriptで最も一般的に使用される四捨五入の方法は、Math.round()関数を使用することです。この関数は、与えられた数値を最も近い整数に四捨五入します。
以下はMath.round()関数の基本的な使い方です。
const num = 4.6;
const rounded = Math.round(num);
console.log(rounded); // 出力: 5このコードスニペットでは、変数numに4.6という数値を代入し、その後でMath.round()関数を用いて四捨五入を行っています。結果は5となり、これをコンソールに出力しています。
特性と注意点
五捨五入の仕組み
Math.round()関数は、0.5以上の場合は次の整数に、0.5未満の場合はそのままの整数に四捨五入します。例えば、4.5は5に、4.4は4に四捨五入されます。
負の数に対する四捨五入
負の数に対しても、Math.round()関数は期待通りに動作します。
const negativeNum = -4.6;
const rounded = Math.round(negativeNum);
console.log(rounded); // 出力: -5この例では、-4.6は-5に四捨五入されています。
簡単な四捨五入計算機を作成する
この実例では、ユーザーが数値を入力し、その数値を四捨五入する簡単なウェブページを作成します。
HTML
まずはHTMLで必要な要素を作ります。数値の入力用のテキストボックスと、計算結果を表示する場所、そして計算をトリガーするボタンが必要です。
<!DOCTYPE html>
<html>
<head>
<title>四捨五入計算機</title>
</head>
<body>
<h1>四捨五入計算機</h1>
<input type="text" id="numberInput" placeholder="数値を入力">
<button onclick="roundNumber()">四捨五入</button>
<p>結果: <span id="result"></span></p>
<script src="script.js"></script>
</body>
</html>JavaScript
次に、JavaScriptで実際の四捨五入を行う関数を書きます。
function roundNumber() {
// ユーザーが入力した数値を取得
const num = parseFloat(document.getElementById('numberInput').value);
// 数値が正しいかチェック
if (isNaN(num)) {
document.getElementById('result').innerText = "無効な数値です";
return;
}
// 四捨五入を実施
const rounded = Math.round(num);
// 結果を表示
document.getElementById('result').innerText = rounded;
}このJavaScriptコードでは、roundNumber()関数がボタンクリックで呼び出されます。この関数は、テキストボックスから数値を取得し、その数値を四捨五入して結果を表示します。
使い方
- 数値をテキストボックスに入力します。
- “四捨五入” ボタンをクリックします。
- 結果が下の「結果:」の部分に表示されます。
以上が、JavaScriptとHTMLを使用した簡単な四捨五入計算機の作成方法です。この例を参考に、さまざまな計算ツールやアプリケーションに四捨五入機能を組み込むことができます。
結果:
まとめ
JavaScriptで四捨五入を行うには、Math.round()関数が一番手軽で簡単な方法です。この関数は、与えられた数値を最も近い整数に四捨五入し、その結果を返します。負の数に対しても同様に適用できるため、多くのケースで利用できます。
