JavaScript parseInt関数の使い方

  • JavaScript
  • 関数
最終更新日:

この記事のポイント

parseInt関数を学習することで、プログラミングにおける文字列と数値の変換処理を効率的に行えるようになります。

  • 文字列から整数を抽出し計算処理を正確に実行
  • 進数指定により2進数や16進数の変換も自在に操作
  • エラー処理も含めた堅牢なコード実装を実現

これらのポイントを押さえることで、より実践的なJavaScriptプログラムを作成できるでしょう。

目次

parseInt関数とは？

parseInt関数は、文字列を整数に変換するための組み込み関数です。

この関数は文字列の先頭から数字を読み取り、最初の非数字文字で変換を停止します。例えば「123abc」という文字列があった場合、parseInt関数は数字部分の「123」のみを整数として抽出し、文字部分は無視します。

parseInt関数は第二引数に基数を指定することで、2進数や16進数などの異なる進数での変換も可能です。プログラムで文字列として受け取ったデータを数値計算に使いたい場合に役割を果たします。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

parseInt関数の基本的な構文は「parseInt(文字列, 基数)」という形式です。第一引数には変換したい文字列を、第二引数には基数を指定します。基数を省略した場合は10進数として扱われますが、明示的に指定することを推奨します。以下の例では、文字列「42」を10進数の整数に変換し、「1010」を2進数として解釈して10進数に変換しています。

console.log(parseInt("42", 10)); console.log(parseInt("1010", 2));







出力結果
42
10
parseInt関数は変換できない文字列が渡された場合、NaN（Not a Number）を返します。

  
console.log(parseInt("hello", 10));

  


  







出力結果
NaN
実用例
parseInt関数は実際のWeb開発やアプリケーション開発において、さまざまな場面で活用されています。ユーザーが入力フォームに入力した文字列データを数値として処理したい場合や、HTMLの属性値として取得した文字列を計算に使用したい場合などが代表的です。
また、異なる進数のデータを扱う際にも非常に有効です。以下では、日常的な開発でよく遭遇するシナリオを想定したコード例を8つ紹介します。これらの例を通して、parseInt関数の実践的な使用方法を理解していきましょう。
フォーム入力値の数値変換
ユーザーがWebフォームに入力した年齢や数量などの文字列データを、計算処理で使用するために整数に変換する基本的な例です。

  
let userAge = "25歳";
let age = parseInt(userAge, 10);
console.log("ネコの年齢は" + age + "歳です");
console.log(age + 5);

  


  







出力結果
ネコの年齢は25歳です
30
HTML属性値の数値変換
HTML要素のdata属性やid属性から取得した文字列を数値として扱いたい場合の変換処理の例です。

  
let elementId = "item_123";
let itemNumber = parseInt(elementId.substring(5), 10);
console.log("アイテム番号: " + itemNumber);
console.log("次のアイテム: " + (itemNumber + 1));

  


  







出力結果
アイテム番号: 123
次のアイテム: 124
2進数文字列の10進数変換
コンピューターサイエンスや組み込み開発でよく使用される、2進数形式の文字列を10進数に変換する例です。

  
let binaryData = "11001";
let decimalValue = parseInt(binaryData, 2);
console.log("2進数" + binaryData + "は10進数で" + decimalValue);

  


  







出力結果
2進数11001は10進数で25
16進数カラーコードの変換
Webデザインでよく使用される16進数のカラーコードを数値として処理する際の変換例です。

  
let colorCode = "FF";
let rgbValue = parseInt(colorCode, 16);
console.log("16進数" + colorCode + "は" + rgbValue);

  


  







出力結果
16進数FFは255
文字列から数値部分の抽出
商品コードや管理番号など、文字と数字が混在した文字列から数値部分のみを抽出したい場合の例です。

  
let productCode = "CAT2025PRO";
let year = parseInt(productCode.substring(3, 7), 10);
console.log("商品年度: " + year);
console.log("来年度: " + (year + 1));

  


  







出力結果
商品年度: 2025
来年度: 2026
URLパラメータの数値変換
Web開発においてURLのクエリパラメータから取得した文字列を数値として使用する際の変換例です。

  
let urlParam = "page=3&limit=10";
let pageNum = parseInt(urlParam.split("=")[1], 10);
console.log("現在のページ: " + pageNum);

  


  







出力結果
現在のページ: 3
8進数データの処理
ファイルパーミッションなど、8進数で表現されるデータを10進数に変換して処理する例です。

  
let permission = "755";
let decimalPermission = parseInt(permission, 8);
console.log("8進数" + permission + "は" + decimalPermission);

  


  







出力結果
8進数755は493
不正な入力値の処理
ユーザーの入力が数値として変換できない場合のエラーハンドリングを含んだ実用的な例です。

  
let invalidInput = "abc123";
let result = parseInt(invalidInput, 10);
if (isNaN(result)) {
  console.log("無効な入力です");
} else {
  console.log("トラのスコア: " + result);
}

  


  







出力結果
無効な入力です
まとめ
parseInt関数は文字列を整数に変換する関数であり、Web開発において欠かせない機能の一つです。基数の指定によりさまざまな進数での変換が可能で、適切なエラーハンドリングと組み合わせることで堅牢なプログラムを作成できます。
parseInt関数の活躍する場面
    

  • ユーザー入力フォームでの文字列から数値への変換処理
    • 

  • HTML属性値やURLパラメータの数値データ取得処理
    • 

  • 進数変換を伴うシステム開発やデータ処理の実装
    • 

重要なポイント
    

  • 基数を明示的に指定して予期しない変換結果を防ぐ
    • 

  • NaNの判定を含むエラーハンドリングを適切に実装
    • 

  • 文字列の先頭から数値を抽出する動作を理解して活用
    • 

parseInt関数を正しく理解し活用することで、より安全で効率的なプログラムを作成できるようになります。実際の開発ではさまざまなデータ形式に対応する必要があるため、これらの基本的な概念をしっかりと身につけることが重要です。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript parseInt関数の使い方