Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

  1. トップページ
  2. JavaScript辞典
  3. 数値.toFixed() / toPrecision()

数値.toFixed() / toPrecision()

数値の表示形式を整えるためのメソッドです。小数点以下の桁数の指定や、有効桁数の指定、指数表記への変換ができます。

構文
// 小数点以下の桁数を指定して文字列に変換します。
var str = 数値.toFixed(桁数);

// 有効桁数を指定して文字列に変換します。
var str = 数値.toPrecision(桁数);

// 指数表記の文字列に変換します。
var str = 数値.toExponential(桁数);
メソッド一覧
メソッド概要
数値.toFixed(桁数)小数点以下を指定した桁数に丸めた文字列を返します。桁数を省略すると0が使われ、整数の文字列になります。
数値.toPrecision(桁数)全体の有効桁数を指定した文字列を返します。桁数を省略すると元の数値がそのまま文字列化されます。
数値.toExponential(桁数)指数表記の文字列を返します。引数で小数部分の桁数を指定できます。
サンプルコード
var price = 1234.5678;

// toFixed() は小数点以下の桁数を指定します。
console.log(price.toFixed(2)); // 『1234.57』と出力されます。小数第3位で四捨五入されます。
console.log(price.toFixed(0)); // 『1235』と出力されます。整数に丸められます。
console.log(price.toFixed(6)); // 『1234.567800』と出力されます。足りない桁は0で埋められます。

// toPrecision() は全体の有効桁数を指定します。
console.log(price.toPrecision(6)); // 『1234.57』と出力されます。全体で6桁になります。
console.log(price.toPrecision(4)); // 『1235』と出力されます。全体で4桁になります。
console.log(price.toPrecision(2)); // 『1.2e+3』と出力されます。桁数が足りないと指数表記になります。

// toExponential() は指数表記に変換します。
console.log(price.toExponential(2)); // 『1.23e+3』と出力されます。
console.log(price.toExponential()); // 『1.2345678e+3』と出力されます。

// 金額表示の実用例
var amount = 980;
console.log(amount.toFixed(2)); // 『980.00』と出力されます。税込表示などに使えます。

// 消費税の計算
var tax = 980 * 0.1;
console.log(tax); // 『98.00000000000001』と出力されます。浮動小数点の誤差が発生します。
console.log(tax.toFixed(0)); // 『98』と出力されます。整数に丸めて誤差を解消できます。
実行結果
"1234.57"          // toFixed(2)
"1235"             // toFixed(0)
"1234.567800"      // toFixed(6)
"1234.57"          // toPrecision(6)
"1235"             // toPrecision(4)
"1.2e+3"           // toPrecision(2)
"1.23e+3"          // toExponential(2)
"1.2345678e+3"     // toExponential()
"980.00"           // 金額の小数表示
98.00000000000001  // 浮動小数点の誤差
"98"               // toFixed(0)で誤差解消
概要

『数値.toFixed()』は最もよく使われる数値フォーマットメソッドです。金額表示や計算結果の表示など、小数点以下の桁数を揃えたい場面で活躍します。戻り値が文字列であることに注意してください。計算に使う場合は『Number()』や『parseFloat()』で数値に戻す必要があります。

JavaScriptの数値は内部的にIEEE 754の浮動小数点数で表現されているため、『0.1 + 0.2』が『0.30000000000000004』になるような誤差が発生することがあります。この誤差を画面表示時に解消するために『数値.toFixed()』がよく使われます。

『数値.toPrecision()』は全体の桁数で制御するため、数値の大きさが事前にわからない場面で有効桁数を統一したい場合に便利です。『数値.toExponential()』は科学技術計算や非常に大きい数値・小さい数値の表示に使われます。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。