JavaScriptのparseIntをマスターするための7つの方法

はじめに
●JavaScriptのparseIntとは
- ○基本概念
●parseIntの使い方
●parseIntの応用例
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptのparseInt関数を使いこなすことができるようになります。

初心者から上級者まで、どんなレベルの方でも役立つ情報を詳しく解説していますので、ぜひ最後までお読みください。

●JavaScriptのparseIntとは

○基本概念

JavaScriptのparseInt関数は、文字列を整数に変換するために使用されます。この関数は、文字列の先頭から数字を読み取り、整数に変換します。

数字以外の文字が出てくると、それ以降の文字は無視されます。

●parseIntの使い方

○サンプルコード1：基本的な使い方

parseIntを使って文字列から整数を抽出する基本的な使い方を紹介します。

この例では、文字列 “123abc” から整数 123 を抽出しています。

const str = "123abc";
const num = parseInt(str);
console.log(num); // 123

○サンプルコード2：基数を指定する

このコードでは、parseInt関数の第二引数に基数を指定して、任意の進数の文字列を10進数の整数に変換する方法を紹介しています。

この例では、16進数の文字列 “1A” を10進数の整数 26 に変換しています。

const hexStr = "1A";
const radix = 16;
const num = parseInt(hexStr, radix);
console.log(num); // 26

○サンプルコード3：文字列の先頭と末尾の空白を取り除く

このコードでは、文字列の先頭と末尾にある空白を取り除いてからparseInt関数を使用する方法を紹介しています。

この例では、” 42 ” という文字列から整数 42 を抽出しています。

const str = "  42  ";
const trimmedStr = str.trim();
const num = parseInt(trimmedStr);
console.log(num); // 42

●parseIntの応用例

○サンプルコード4：CSVデータの解析

このコードでは、parseIntを使ってCSVデータを解析する方法を紹介しています。

この例では、CSV形式の文字列から整数のデータを取り出し、配列に格納しています。

const csvData = "1,2,3\n4,5,6\n7,8,9";
const rows = csvData.split("\n");

const parsedData = rows.map(row => {
  const columns = row.split(",");
  return columns.map(col => parseInt(col));
});

console.log(parsedData);
// [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

○サンプルコード5：ユーザー入力の検証

このコードでは、ユーザーからの入力データを整数に変換して検証する方法を紹介しています。

この例では、入力データが整数であるかどうかを判定しています。

function isValidInteger(input) {
  const num = parseInt(input);
  return !isNaN(num) && input === num.toString();
}

console.log(isValidInteger("42")); // true
console.log(isValidInteger("42a")); // false

○サンプルコード6：動的な計算機能の実装

このコードでは、ユーザーの入力に基づいて動的に計算を行う方法を紹介しています。

この例では、2つの入力ボックスから整数を取得し、その合計値を表示しています。

<input id="num1" type="text" />
<input id="num2" type="text" />
<button onclick="calculateSum()">合計を計算</button>
<p id="result"></p>

<script>
function calculateSum() {
  const num1 = parseInt(document.getElementById("num1").value);
  const num2 = parseInt(document.getElementById("num2").value);
  const sum = num1 + num2;
  document.getElementById("result").innerText = "合計: " + sum;
}
</script>

○サンプルコード7：フォームデータの処理

このコードでは、フォームデータを整数に変換して処理する方法を紹介しています。

この例では、フォームに入力された整数を取得し、その値に基づいて処理を行っています。

<form onsubmit="return handleSubmit(event)">
  <input id="inputNum" type="text" />
  <button type="submit">送信</button>
</form>

<script>
function handleSubmit(event) {
  event.preventDefault();
  const inputNum = parseInt(document.getElementById("inputNum").value);
  if (inputNum > 100) {
    alert("入力された数値が大きすぎます。");
  } else {
    alert("入力された数値は適切です。");
  }
}
</script>

●注意点と対処法

文字列に数値以外の文字が含まれている場合、parseIntは数値以外の文字が現れるまでの部分を変換します。そのため、想定外の結果が得られることがあります。
入力データの検証を行うことが重要です。
文字列が数値に変換できない場合、parseIntはNaNを返します。
そのため、返された値がNaNでないか確認することが必要です。