JavaScriptで小数を指定した小数点以下の桁数にするコードを紹介します。
概要
小数を指定した桁数にし、下位の桁を切り捨てたい場合があります。
JavaScriptの
Math.trunc() メソッドや
Math.round() Math.floor() メソッドは整数部分を返すメソッドのため、
そのままでは小数数の桁数を区切る用途には使えません。
方法1: 指定した桁数、桁上げして trunc, round, floor, ceil メソッドを利用する
設定したい桁数分だけ桁上げしてから、trunc, round, floor, ceil メソッドを利用し、その後、桁下げする方法です。
小数点以下4桁にする場合、次の手順となります。
- 元の値に 10,000 を乗算する
- 乗算した結果の値に、trunc, round, floor, ceil などのメソッドを適用する
- 結果を 10,000 で除算する
- 除算した結果が小数点4桁の数値として取得できる
プログラム例
小数点3桁にするプログラムを紹介します。4桁目を切り捨てた数値にします。
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function onButtonClick() {
var value = Number(document.getElementById('TextBox1').value);
//小数点3桁化
const base = 1000;
conver_value = Math.trunc(value * base) / base;
document.getElementById('TextBox2').value = conver_value;
}
</script>
</head>
<body>
<h2>指定した桁数の小数点にするデモ</h2>
<div>input <input id="TextBox1" type="text" /></div>
<button type="button" onclick="onButtonClick();">Exec</button>
<div>output <input id="TextBox2" type="text" /></div>
</body>
</html>
解説
[Exec]ボタンをクリックすると、onButtonClick()関数を呼び出します。
上部のテキストボックスに入力した値を取得します。Number関数を利用して、明示的に数値に変換します。
var value = Number(document.getElementById('TextBox1').value);
今回は、小数点以下3桁で処理するため、1000倍して、処理後に1000で割ります。
小数点4桁目の処理は、truncメソッドを利用し、切り捨てとします。
const base = 1000;
conver_value = Math.trunc(value * base) / base;
計算結果を下部のテキストボックスに表示します。
document.getElementById('TextBox2').value = conver_value;
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
上部のテキストボックスに長い小数点の数値を入力します。
[Exec]ボタンをクリックします。小数点以下3桁になった数値が、下部のテキストボックスに表示されます。
方法2: toFixed メソッドを利用する
結果を画面に表示するために、文字列での表示でよく、桁を四捨五入で丸め込んでよい場合には、
toFixes() メソッドを利用することができます。
プログラム例
小数点3桁にするプログラムを紹介します。4桁目を丸めた数値にします。
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function onButtonClick() {
var value = Number(document.getElementById('TextBox1').value);
document.getElementById('TextBox2').value = value.toFixed(3);
}
</script>
</head>
<body>
<h2>指定した桁数の小数点にするデモ</h2>
<div>input <input id="TextBox1" type="text" /></div>
<button type="button" onclick="onButtonClick();">Exec</button>
<div>output <input id="TextBox2" type="text" /></div>
</body>
</html>
解説
[Exec]ボタンをクリックすると、onButtonClick()関数を呼び出します。
上部のテキストボックスに入力した値を取得します。Number関数を利用して、明示的に数値に変換します。
var value = Number(document.getElementById('TextBox1').value);
Numberオブジェクトの
toFixed()メソッドを呼び出します。小数点以下3桁にするため、toFixedメソッドの第一引数に 3 を与えます。
toFixedメソッドの戻り値の文字列の値を下部のテキストボックスに表示します。
document.getElementById('TextBox2').value = value.toFixed(3);
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
上部のテキストボックスに長い小数点の数値を入力します。
[Exec]ボタンをクリックします。小数点以下3桁になった数値が、下部のテキストボックスに表示されます。小数点以下第四位が四捨五入された値になります。
四捨五入されるため、小数点以下第四位が5以下の場合は切り捨てた値になります。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2022-02-20
作成日: 2022-02-20
