数値のフォーマット(桁揃え・小数点の指定)

このレッスンでは、数値のフォーマット方法を学び、金額表示や連番のファイル名など、見た目を整えた出力ができるようになることを目標にします。「JavaScript toFixed 使い方」「JavaScript 桁揃え 0埋め」で調べている方向けです。

.toFixed(桁数)は小数点以下の桁数をそろえ、.padStart(桁数, "0")は数字の前を0で埋めて桁をそろえます。金額表示や連番のファイル名を作るときに便利です。.toFixed()は数値ではなく文字列を返す点にも注意しておきましょう。

サンプルコードでは、1234.5という数値を.toFixed(2)で小数点以下2桁の"1234.50"という文字列に変換し、7という数値を文字列化してから.padStart(3, "0")で"007"という3桁の連番風の文字列に変換しています。padStartは文字列専用のメソッドなので、数値には直接使えない点も覚えておきましょう。

初心者がよくつまずくのが、.toFixed()の結果が文字列になるため、そのまま計算に使おうとするとエラーやバグの原因になる点です。表示用に整形したあとの値は、あくまで「見せるための文字列」であり、再計算には元の数値を使う必要があります。

計算結果をそのまま表示すると桁数がバラバラで見づらくなるため、画面に出す直前でこうしたフォーマット処理を挟むのが実務でも一般的な流れです。見た目を整えるちょっとした処理ですが、ユーザー体験の質を大きく左右する大事な工程です。