最終更新日:
公開日:
レシピ
数値
浮動小数点数を指定した桁数にする
JavaScriptで数値の小数点以下を指定した桁数に整える方法について解説します。
この記事のポイント
- toFixedメソッドで小数点以下の桁数を揃える
- toFixedメソッドの戻り値は数値(Number)ではなく文字列(String)に変換する
小数点以下の桁数を揃える
数値の小数点以下の桁数を揃えたいときはtoFixedメソッドを使います。
このメソッドにパラメータとして桁数を渡すと、その桁数に揃えることができます。
以下の例では変数number1〜number5に入っているバラバラの数値に対して、それぞれtoFixedメソッドを実行して小数点以下の桁数を揃えます。
パターン1は小数点以下の第2位、パターン2は小数点以下の第4位で揃えてconsole.logメソッドで出力します。
JavaScript コード例
let number1 = 1.0051;
let number2 = 1.1;
let number3 = 0;
let number4 = -100.2;
let number5 = -3.50921;
// 数値をそのまま出力
console.log(number1); // 1.0051
console.log(number2); // 1.1
console.log(number3); // 0
console.log(number4); // -100.2
console.log(number5); // -3.50921
// パターン1:小数点以下の第2位で揃える
console.log(number1.toFixed(2)); // '1.01'
console.log(number2.toFixed(2)); // '1.10'
console.log(number3.toFixed(2)); // '0.00'
console.log(number4.toFixed(2)); // '-100.20'
console.log(number5.toFixed(2)); // '-3.51'
// パターン2:小数点以下の第4位で揃える
console.log(number1.toFixed(4)); // '1.0051'
console.log(number2.toFixed(4)); // '1.1000'
console.log(number3.toFixed(4)); // '0.0000'
console.log(number4.toFixed(4)); // '-100.2000'
console.log(number5.toFixed(4)); // '-3.5092'
toFixedメソッドの戻り値は指定した桁数より下位の数値は四捨五入を行い、さらに数値(Number)から文字列(String)に変換されます。
値が数値(Number)の場合は「0.0000」のような数値は小数点以下を自動的に切り捨てて整数の「0」にしますが、文字列にすることで「‘0.0000’」のように切り捨てずに保持することができます。
もし値の型を数値(Number)のままにして小数点以下の桁数を揃えた四捨五入を実行するときは、四捨五入をする前に10のn乗を掛けて小数点の位置を移動させてから実行します。
JavaScript コード例
let number1 = 1.0051;
let number2 = 1.1;
let number3 = 0;
let number4 = -100.2;
let number5 = -3.50921;
// (1)小数点の位置を移動する
number1 *= 100;
number2 *= 100;
number3 *= 100;
number4 *= 100;
number5 *= 100;
// (2)四捨五入
number1 = Math.round(number1);
number2 = Math.round(number2);
number3 = Math.round(number3);
number4 = Math.round(number4);
number5 = Math.round(number5);
// (3)小数点の位置を戻す
number1 /= 100;
number2 /= 100;
number3 /= 100;
number4 /= 100;
number5 /= 100;
console.log(number1); // 1.01
console.log(number2); // 1.1
console.log(number3); // 0
console.log(number4); // -100.2
console.log(number5); // -3.51
こちらの例では小数点の第2位以下を四捨五入した数値を取得するために、まず(1)の箇所で10の2乗である「100」を掛けて小数点を桁2つ分だけ移動しています。
その後に(2)の箇所でMath.roundメソッドを使って四捨五入を実行し、(3)の箇所で「100」を割って小数点の位置を戻します。
数値は小数点以下の値が「0」のときは非表示になってしまうため、変数number2やnumber3のような数値については小数点以下の0は表示されません。