JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで小数点以下2桁の数値をフォーマットする方法【toFixed()の使い方】

JavaScriptで数値を小数点以下2桁にフォーマットしたい場合は、toFixed()メソッドを使用します。toFixed()は、小数点以下を指定した桁数で表示するためのメソッドで、指数表記を使わない文字列形式の数値を返します。指定した桁数が元の数値より多い場合や少ない場合でも、必ずその桁数になるよう整形されるのが特徴です。

toFixed()メソッドの基本

toFixed()の引数には、小数点以下の表示桁数を指定します。例えば「2」を渡せば、小数点以下2桁の数値（文字列）が得られます。引数を省略した場合は0とみなされ、整数として返されます。

なお、戻り値は文字列（String型）である点に注意してください。計算に使いたい場合はNumber()などで数値に変換する必要があります。

コード例

以下のコードを実行すると、数値を小数点以下2桁にフォーマットできます。toFixed()メソッドの引数に「2」を指定しているのがポイントです。

<html>
  <head>
    <title>JavaScript toFixed() Method</title>
  </head>
  <body>
    <script>
      var num1 = 4.6;
      var num2 = 177.1234;

      document.write("num1.toFixed() is : " + num1.toFixed(2));
      document.write("<br />");

      document.write("num2.toFixed() is : " + num2.toFixed(2));
      document.write("<br />");
    </script>
  </body>
</html>

実行結果

num1.toFixed() is : 4.60
num2.toFixed() is : 177.12

このように、「4.6」は「4.60」となり、桁数が足りない場合も0で補完されます。また「177.1234」は四捨五入されて「177.12」になります。

toFixed()使用時の注意点

  • 戻り値は文字列： 数値として再利用する場合は、Number(result)やparseFloat()で変換しましょう。
  • 浮動小数点の誤差： 一部の数値では丸め誤差により期待どおりの結果にならないことがあります。厳密な処理が必要な場合は事前に補正するか、ライブラリの利用を検討してください。
  • 通貨表示にはIntl.NumberFormatも便利： 「1,234.56」のようにカンマ区切りや通貨記号付きで表示したい場合は、toLocaleString()やIntl.NumberFormatオブジェクトが便利です。

Intl.NumberFormatの例

const formatter = new Intl.NumberFormat('ja-JP', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(177.1234)); // "177.12"

用途に応じてtoFixed()とIntl.NumberFormatを使い分けることで、より柔軟な数値フォーマットが実現できます。単純に桁数を揃えたいだけなら、まずはtoFixed(2)を使うのが手軽でおすすめです。

  1. JavaScriptの正規表現を使って文字列の特定部分を削除する方法

    JavaScriptでは、正規表現（RegExp）と replace() メソッドを組み合わせることで、文字列の中から指定した2つの区切り文字に挟まれた部分を簡単に削除できます。基本的な考え方たとえば、括弧「( )」で囲まれたテキストを削除したい場合は、次のような正規表現パターンを使用します。/ *\([^)]*\) */g — 括弧とその中身、および前後の空白にマッチします。\( と \) — 開き括弧と閉じ括弧そのものにマッチします。[^)]* — 閉じ括弧以外の任意の文字列にマッチします。末尾の g フラグ — 文字列内のすべての該当箇所を置換対象にします。サンプルコード以下は、文字列か

  2. 【JavaScript】ゼロを含む文字列を数値に変換する方法をわかりやすく解説

    JavaScriptでは、ドット（.）やゼロを含む文字列を数値として扱いたい場面があります。例えば、次のような文字列があったとします。var stringValue="453.000.00.00.0000";このようにゼロや区切り文字を含む文字列をそのまま数値変換しようとすると、意図した結果になりません。そこで、replace()メソッドで不要なドットを取り除き、parseInt()で整数に変換するという2段階の処理を行います。var numberValue = parseInt(stringValue.replace(/\./gm, ''));コード全体の