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

JavaScriptのparseInt()関数とは？基数を指定して文字列を整数に変換する方法

parseInt()は、JavaScriptの組み込み関数の一つで、文字列として表された数値を整数に変換します。この関数は2つの引数を受け取ります。1つ目は変換対象となる数値を表す文字列、2つ目は基数（radix）を表す数値です。戻り値としては、指定した基数に基づいて解析された整数が返されます。

構文

parseInt()関数の基本的な構文は以下のとおりです。

parseInt('4524', 8);
  • 第1引数（string）：変換したい数値を表す文字列
  • 第2引数（radix）：文字列をどの進法で解釈するかを示す基数（例：10進数なら10、16進数なら16）

使用例

次の例では、文字列「4524」を8進数として解析し、その結果を表示しています。

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      var result = parseInt('4524', 8);
      document.write("Result: " + result);
   </script>
</body>
</html>

このコードを実行すると、以下の出力が得られます。

Result: 2388

これは、8進数の「4524」が 4×8³ + 5×8² + 2×8¹ + 4×8⁰ = 2048 + 320 + 16 + 4 = 2388 と計算されるためです。

さまざまな基数での変換例

同じ文字列でも、基数の指定によって変換結果は大きく変わります。次の例では、8進数・10進数・16進数のそれぞれの基数で「4524」を解析しています。

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      var result1 = parseInt('4524', 8);
      document.write("Result: " + result1);
      document.write("<br>");
      var result2 = parseInt('4524', 10);
      document.write("Result: " + result2);
      document.write("<br>");
      var result3 = parseInt('4524', 16);
      document.write("Result: " + result3);
   </script>
</body>
</html>

実行結果は以下のようになります。

Result: 2388
Result: 4524
Result: 17700
  • 8進数として解析：2388（10進数に換算した値）
  • 10進数として解析：4524（そのままの値）
  • 16進数として解析：17700（10進数に換算した値）

parseInt()を使う際の注意点

  • 基数は必ず指定する：第2引数の基数を省略すると、文字列の先頭に応じて自動判定されます（例：「0x」で始まる場合は16進数として扱われる）。意図しない結果を防ぐため、常に基数を明示的に指定することがベストプラクティスです。
  • 変換できない場合：文字列の先頭が数値として解釈できない場合、NaN（Not a Number）が返されます。
  • 部分的な解析：先頭から読み取り可能な数字だけを解析し、無効な文字が出現した時点で処理を中断します。たとえばparseInt('123abc')は123を返します。
  1. JavaScriptでのメソッド借用：call()・apply()・bind()の使い方を解説

    JavaScriptでは、call()、apply()、bind()という3つのメソッドを使うことで、あるオブジェクトが持つメソッドを別のオブジェクトが「借用」できます。これは、本来そのメソッドを持たないオブジェクトに対して、thisの参照先を差し替えてメソッドを実行できる便利なテクニックです。 3つのメソッドの違い call()：引数をカンマ区切りで個別に渡し、即座に関数を実行します。 apply()：引数を配列（または配列風オブジェクト）として渡し、即座に関数を実行します。 bind()：thisを固定した新しい関数を返すだけで、即座には実行されません。返された関数は後から好きなタイミン

  2. JavaScriptで関数の実行結果をHTMLとして表示する方法

    関数の結果をHTMLとして表示するには？JavaScriptで関数の実行結果をHTMLとして画面に表示したい場合は、document.getElementById().innerHTML を使います。このプロパティに文字列や計算結果を代入することで、指定した要素の中身を動的に書き換えることができます。innerHTMLはDOM操作の基本であり、ユーザーの操作に応じてリアルタイムに画面を更新したい場合によく利用されます。サンプルコード以下は、ページ内にあるテキストボックス（input type=text）の数をカウントし、その結果をHTMLとして表示するコード例です。<!DOCTYPE h