プログラミング初心者向けに、JavaScript の toExponential() メソッドを、例題を交えながら丁寧に解説します。
toExponential() とは？
数字を「指数（しすう）表記」で表した文字列に変えるメソッドです。
まず「指数表記」ってなに？
例えば、理科で出てきたことがあるかもしれませんが：
| 普通の書き方 | 指数表記（科学技術表記） | 読み方 |
|---|---|---|
| 1000 | 1e3 | 「1 × 10の3乗」 |
| 0.001 | 1e-3 | 「1 × 10の-3乗」 |
つまり、「10の何乗か」を使って大きな数や小さな数を簡潔に表す方法です。
toExponential() の使い方
基本構文
数値.toExponential([小数点以下の桁数])
[]は「省略できる」という意味です。- 結果は 文字列 で返ってきます（数値ではない！）。
例1：基本の使い方
let num = 12345;
console.log(num.toExponential());
出力結果：
1.2345e+4
読み方：「1.2345 × 10の4乗」＝ 12345
（10の4乗は 10000 なので、1.2345 × 10000 = 12345）
例2：小数点以下の桁数を指定する
let num = 12345;
console.log(num.toExponential(2));
出力結果：
1.23e+4
つまり、小数点以下を 2桁に丸めて表示します。
例3：小さい数も指数表記に
let small = 0.00005678;
console.log(small.toExponential());
出力結果：
5.678e-5
読み方：「5.678 × 10の-5乗」＝ 0.00005678
つまり、小さい数でも指数表記ならすっきり。
例4：整数リテラルに注意！
JavaScriptの文法上、整数に直接ドットを書いて toExponential() を呼ぶと エラー になることがあります。
❌ 間違い例：
100.toExponential(2); // エラー！
✅ 正しい書き方：
(100).toExponential(2);
または
100 .toExponential(2);
※ 100 のあとにスペースを入れるだけでもOK。
実際の出力いろいろ
| コード | 結果 |
|---|---|
(34.5642).toExponential() | "3.45642e+1" |
(34.5642).toExponential(2) | "3.46e+1" |
(728.52).toExponential(1) | "7.3e+2" |
(728.52).toExponential(5) | "7.28520e+2" |
どんなときに使うの？
- 🔬 非常に大きい数・小さい数を表示したいとき
（天文学・物理シミュレーション・AIの重みなど） - 💾 データの桁数をそろえたいとき
- 📊 表記を統一したいとき（グラフ出力やログ表示）
関連メソッドとの違い
| メソッド | 役割 | 出力例（num=12345.6789） |
|---|---|---|
toFixed(2) | 小数点以下の桁数を固定 | "12345.68" |
toPrecision(4) | 全体の桁数を指定 | "1.235e+4" |
toExponential(2) | 指数表記で小数桁を指定 | "1.23e+4" |
練習コード（ブラウザで動く！）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toExponential 実験</title>
</head>
<body>
<h2>toExponential() のデモ</h2>
<input type="number" id="numInput" placeholder="数値を入力" step="any">
<input type="number" id="digitsInput" placeholder="小数桁数" min="0">
<button onclick="convert()">変換</button>
<p id="result"></p>
<script>
function convert() {
const num = Number(document.getElementById('numInput').value);
const digits = document.getElementById('digitsInput').value;
const result = digits
? num.toExponential(Number(digits))
: num.toExponential();
document.getElementById('result').textContent = `結果: ${result}`;
}
</script>
</body>
</html>
→ 入力してボタンを押すと、指数表記がリアルタイムで見られます。
まとめ
| 覚えておくポイント | 説明 |
|---|---|
toExponential() | 数値を指数（科学技術）表記に変換 |
| 引数あり | 小数点以下の桁数を指定できる |
| 結果は文字列 | 数値ではなく文字列として返る |
| 整数は注意 | (100).toExponential() のように括弧で囲む |
See the Pen JavaScript toExponential() Demo by MONO365 -Color your days- (@monoqlo365) on CodePen.
機能概要
- 入力した数値を 指数表記（toExponential） に変換
- 小数点以下の桁数を指定可能
- 結果をリアルタイム表示
- 背景色が変化（入力値によって自動グラデーション）
- ダークモード切替ボタン付き
- スマホ対応デザイン
操作例
| 入力 | 小数点桁数 | 結果 |
|---|---|---|
12345 | (空欄) | 1.2345e+4 |
12345 | 2 | 1.23e+4 |
0.00005678 | (空欄) | 5.678e-5 |
0.00005678 | 1 | 5.7e-5 |
背景色が自動で変わり、数のスケール感も視覚的にわかるようになっています。