【JavaScript入門】数値と文字列の変換

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

数値と文字列の変換

　JavaScript では、数値を文字列に変換したり、文字列を数値に変換するシチュエーションがしばしば発生します。ユーザーから入力を受け取る際に文字列形式が返ってきたり、数値計算の結果を画面に表示する際に文字列に整形したりと、こうした型の変換は欠かせません。ここでは、代表的な変換方法をまとめて解説します。

１．数値を文字列に変換する方法

1.1. `toString(n)`

　数値のあとに .toString() を呼び出すと、指定した進数の文字列に変換できます。引数 n は 2～36 の整数で、省略すると 10（10進数）扱いになります。

(27).toString();     // "27" (10進数が省略された形)
(27).toString(10);   // "27"
(27).toString(16);   // "1b" (16進数)
(27).toString(8);    // "33" (8進数)
(27).toString(2);    // "11011" (2進数)

　上記のように (数値).toString() の形で書く理由は、JavaScript のパーサが 27.toString を実数 27. と解釈してしまうためです。

1.2. `toFixed(n)`

　小数点以下 n 桁で四捨五入した文字列に変換します。引数 n を省略すると 0 が使われ、少数点なしで返します。

(456.789).toFixed();    // "457" (四捨五入、引数なし＝0桁)
(456.789).toFixed(1);   // "456.8"
(456.789).toFixed(3);   // "456.789"
(456.789).toFixed(8);   // "456.78900000"

引数を大きくしすぎると、浮動小数点数の誤差が現れることに留意してください。

２．文字列を数値に変換する方法

2.1. `parseInt(s, n)`

　文字列 s を「n 進数」として解釈し、整数として返します。先頭の空白や改行は無視し、解釈できる部分だけを数値化します。解釈できなければ NaN になります。

parseInt('42', 10);         // 42 (10進数)
parseInt(' 42apple', 10);   // 42 (先頭の空白は無視)
parseInt('apple42', 10);    // NaN (先頭が数字でない)
parseInt('ff', 16);         // 255 (16進数)
parseInt('12.7', 10);       // 12 (小数部分は切り捨て)

　第2引数 n は省略可能ですが、省略時は文字列によって 10進数以外とみなされる場合があり、予期せぬ変換を招くことがあります。推奨としては、明示的に書くのが安全です。

2.2. `parseFloat(s)`

　文字列 s を浮動小数点数として解釈し、数値として返します。やはり先頭の空白や改行は無視され、解釈できなければ NaN となります。

parseFloat('12.34');      // 12.34
parseFloat('12.34xyz');   // 12.34
parseFloat('xyz12.34');   // NaN (先頭が数字じゃない)

parseFloat は小数点以下も考慮して変換してくれる点が parseInt と異なるところです。

３．サンプルHTMLファイル

　以下に、実際にコンソールで変換処理を試すサンプルコードを示します。ファイル名を「myConversionSample.html」とします。

【myConversionSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myConversionSample.html</title>
</head>
<body>
  <h1>数値と文字列の変換例</h1>
  <p>ブラウザの開発者ツール（コンソール）を開き、実行結果を確認してください。</p>

  <script>
    // 1. 数値を文字列に変換: toString()
    console.log('=== toString() の例 ===');
    console.log((255).toString());      // "255"
    console.log((255).toString(10));    // "255"
    console.log((255).toString(16));    // "ff"
    console.log((255).toString(8));     // "377"
    console.log((255).toString(2));     // "11111111"

    // 2. 数値を文字列に変換: toFixed()
    console.log('=== toFixed() の例 ===');
    console.log((123.456).toFixed());   // "123"
    console.log((123.456).toFixed(1));  // "123.5"
    console.log((123.456).toFixed(3));  // "123.456"
    console.log((123.456).toFixed(5));  // "123.45600"

    // 3. 文字列を数値に変換: parseInt()
    console.log('=== parseInt() の例 ===');
    console.log(parseInt(' 42.8Hello ', 10));   // 42
    console.log(parseInt('Hello42', 10));       // NaN
    console.log(parseInt('ff', 16));            // 255
    console.log(parseInt('77', 8));             // 63 (8進数)

    // 4. 文字列を数値に変換: parseFloat()
    console.log('=== parseFloat() の例 ===');
    console.log(parseFloat('3.14apple'));       // 3.14
    console.log(parseFloat('apple3.14'));       // NaN

    // 5. 応用例: 入力値を数値にして toFixed() を利用
    let inputString = '98.7654';
    let numberVal = parseFloat(inputString);
    let fixedVal = numberVal.toFixed(2);
    console.log(`元の文字列: ${inputString}, 小数点以下2桁: ${fixedVal}`);
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

=== toString() の例 ===
255
255
ff
377
11111111
=== toFixed() の例 ===
123
123.5
123.456
123.45600
=== parseInt() の例 ===
42
NaN
255
63
=== parseFloat() の例 ===
3.14
NaN
元の文字列: 98.7654, 小数点以下2桁: 98.77

まとめ

toString() と toFixed() は、数値 → 文字列の変換をおこなう代表的なメソッドです。それぞれ進数変換や小数点桁数の指定に便利です。
parseInt() と parseFloat() は、文字列 → 数値の変換でよく使われます。parseInt は整数として、parseFloat は浮動小数点数として変換します。
JavaScript の型変換は柔軟ですが、意図しない変換を防ぐため、処理したい内容に合わせて適切な変換メソッドを使い分けることが大切です。

　このように、数値から文字列への変換、文字列から数値への変換を正確に把握することで、ユーザー入力の処理や表示フォーマットの整形などが円滑に進められます。

【JavaScript入門】数値と文字列の変換