JavaScript | 数値の有効桁数を指定して文字列に変換（toPrecision() メソッド）

JavaScript

2020.05.102025.10.15

toFixed / toPrecision / toExponential を切り替えて比較表示できるインタラクティブUI。
機能は次のとおり：

サンプル数値一覧を表示（自分で追加可能）
各メソッド（toFixed / toPrecision / toExponential）の結果を横並び比較
それぞれのメソッドに合った「桁数」コントロール（toFixed は小数点以下桁数、toPrecision は有効桁数、toExponential は小数部の桁数）が操作可能
「表示モード」で「全表示」か、特定メソッドだけを強調表示する切替

See the Pen Numeric Format Comparison Tool by MONO365 -Color your days- (@monoqlo365) on CodePen.

使い方メモ / 補足

toFixed：小数点以下を固定するため、金額表示（例：通貨）に向く。負の値は不可（RangeError の可能性）があるため UI 側で 0 以上に制限しています（上の実装では min="0"）。
toPrecision：有効桁で表示（桁全体を揃える）。科学的表記（指数）になることがある点に注意。
toExponential：強制的に指数表記にする。引数は小数点以下の桁数（mantissa の小数部）を示します。
本デモは「視覚での比較」を目的に簡潔に作っています。実際の業務で入力値が不確かなら、さらに入力バリデーションやエラーメッセージを強化してください。