JavaScriptで数値を指定した小数点以下の桁数に丸めて表示したい場合、toFixed()メソッドを使用します。今回は、toFixed()の基本的な使い方をまとめていきたいと思います。
目次 非表示
toFixed()は、数値を指定した小数点以下の桁数に四捨五入し、文字列として返すメソッドです。
JavaScript
let num = 3.14159;
console.log(num.toFixed(2)); // "3.14"
console.log(num.toFixed(0)); // "3"このメソッドを使用すると、小数点以下の桁数を固定できるため、通貨や割合の表示に便利です。
JavaScript
let price = 1234.5678;
console.log(price.toFixed(2)); // "1234.57"
console.log(price.toFixed(0)); // "1235"
console.log(price.toFixed(5)); // "1234.56780"toFixed(2)：小数点以下2桁で四捨五入。toFixed(0)：整数部分のみを表示し、小数点以下は四捨五入。toFixed(5)：小数点以下5桁まで表示。足りない場合は0で埋める。
toFixed()は、計算後の結果を見やすく表示するのに役立ちます。
JavaScript
let taxRate = 0.10;
let amount = 1000;
let tax = amount * taxRate;
console.log(`税込価格: ${(amount + tax).toFixed(2)} 円`); // "税込価格: 1100.00 円"toFixed()は 数値ではなく文字列を返します。そのため、計算に使用する場合はparseFloat()で数値に変換する必要があります。
JavaScript
let result = 10.567.toFixed(2); // "10.57"（文字列）
console.log(typeof result); // "string"
let numericResult = parseFloat(result); // 数値に変換
console.log(numericResult + 1); // 11.57通貨を扱う場合、小数点以下の桁数を統一することで見やすくなります。
JavaScript
function formatPrice(price) {
return `$${price.toFixed(2)}`;
}
console.log(formatPrice(19.9)); // "$19.90"
console.log(formatPrice(5)); // "$5.00"統計データなどの数値を統一したフォーマットで表示する際に便利です。
JavaScript
let scores = [80, 90, 66, 70, 95];
let average = scores.reduce((a, b) => a + b) / scores.length;
console.log(`平均点: ${average.toFixed(1)} 点`); // "平均点: 80.2 点"toFixed()は 四捨五入で丸められますが、銀行の丸め処理（五捨五超入など）とは異なる場合があるため、金額計算には注意が必要です。
JavaScript
console.log((1.005).toFixed(2)); // "1.00"（期待と異なる動作）これは浮動小数点の丸め誤差によるもので、toFixed()では厳密な金融計算には向かない場合があります。
toFixed()の引数には0から100の範囲が指定できます。それ以上の値を指定するとRangeErrorが発生します。
JavaScript
console.log((123.456).toFixed(101)); // RangeErrortoFixed()は、数値を小数点以下の桁数を指定して四捨五入し、文字列として返す便利なメソッドです。
- 数値のフォーマットに便利（特に金額や割合など）です
- 数値ではなく文字列を返すため、計算時には
parseFloat()で変換が必要です - 浮動小数点の影響で、期待と異なる丸め結果になる場合があります
