実行環境 Node.js 15.2.1

公開日 January 16, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

parseInt

このページでは豊富な例を用いてJavaScript(js)のparseInt関数の使い方を学ぶことができます。

JavaScript(js)のparseInt関数は文字列を指定した基数で整数(数値、Number型)に変換して戻り値として返します。 第1引数には変換する文字列を、第2引数には基数を指定します。

注意点として、第2引数の指定が推奨されることが挙げられます。
これは、指定しない場合に文字列から基数が判断されてしまうためです。 動作を安定させるため、可能な場面では必ず第2引数を指定してください。

関連情報:基数 - ウィキペディア

TL;DR

基本

// 第1引数に数値変換したい文字列、第2引数に基数を指定して整数へと変換する
// 基数:10進数なら10、2進数なら2などの数
const string1 = '100';
const returnValue1 = parseInt(string1, 10);
console.log(returnValue1);
==> 100
// データ型がNumber(数値)になっている
console.log(typeof returnValue1);
==> number



// 負の数を表した文字列も数値に変換可能
console.log(parseInt('-100', 10));
==> -100



// 数値を表さない文字列の場合、戻り値はNaN
console.log(parseInt('ABC', 10));
==> NaN



// 16進数の場合
const string2 = 'F1';
const returnValue2 = parseInt(string2, 16);
console.log(returnValue2);
==> 241

// 0xから始まってもOK
console.log(parseInt('0xF1', 16));
==> 241

// 10進数として処理した場合はNaN(Not a Number)
console.log(parseInt('F1', 10));
==> NaN





// 2進数の場合
const string3 = '11';
const returnValue3 = parseInt(string3, 2);
console.log(returnValue3);
==> 3
// 10進数として処理した場合
console.log(parseInt(string3, 10));
==> 11



// 文字列では小数のつもりでも戻り値は整数の値になる
const string4 = '3.14';
const returnValue4 = parseInt(string4, 10);
console.log(returnValue4);
==> 3
// 浮動小数点数(小数)に変換したい場合はparseFloatを使用する
console.log(parseFloat(string4));
==> 3.14

様々な文字列の解釈

// スペースが文字列に含まれる場合
// スペースは無視されて変換される
const string1 = '  100  ';
const returnValue1 = parseInt(string1, 10);
console.log(returnValue1);
==> 100



// 途中に数字以外の文字列が存在する場合
// 途中までの数値に変換される
const string2 = '10ABC00';
const returnValue2 = parseInt(string2, 10);
console.log(returnValue2);
==> 10



// 数値文字列が0から始まる場合
// 10進数として変換する場合は無視される
const string3 = '000123';
const returnValue3 = parseInt(string3, 10);
console.log(returnValue3);
==> 123

基数(第2引数)を指定しない場合

// 基数(第2引数)を指定しない場合.1
// '100'は基数10として処理される
const string1 = '100';
const returnValue1 = parseInt(string1);
console.log(returnValue1);
==> 100



// 基数(第2引数)を指定しない場合.2
const string2 = '08';
const returnValue2 = parseInt(string2);
console.log(returnValue2);
==> 8



// 基数(第2引数)を指定しない場合.3
// '0x'または'0X'で始まる文字列は基数16として処理される
const string3 = '0xFF';
const returnValue3 = parseInt(string3);
console.log(returnValue3);
==> 255
console.log(parseInt('0XFF'));
==> 255

解説

基本

parseInt関数は文字列を数値(整数、Number型)に変換し、その変換した数値を戻り値として返します。

第1引数には変換元の文字列を、第2引数には文字列を変換する際の基数を指定します。
第2引数の基数を変更することで2進数、8進数、10進数、16進数など、さまざまな数値変換を実現することができます。

変換する文字列が数値に変換できない場合、もしくは指定した基数で変換できない場合にはNaN(Not-A-Number)が戻り値となります。

// 10進数の変換
const string1 = '123';
const returnValue1 = parseInt(string1, 10);
console.log(returnValue1);
==> 123
// データ型が数値に変わる
console.log(typeof returnValue1);
==> number



// 負の値
console.log(parseInt('-123', 10));
==> -123



// 数値を表さない文字列の場合、戻り値はNaN
console.log(parseInt('ABC', 10));
==> NaN


// 2進数の変換
const string2 = '100';
const returnValue2 = parseInt(string2, 2);
console.log(returnValue2);
==> 4
// 10進数として変換
console.log(parseInt(string2, 10));
==> 100



// 文字列では小数のつもりでも戻り値は整数になる
const returnValue3 = parseInt('1.41421', 10);
console.log(returnValue3);
==> 1
// 浮動小数点数(小数)に変換したい場合はparseFloatを使用する
console.log(parseFloat('1.41421'));
==> 1.41421

様々な文字列の解釈

第1引数に与える文字列は変換の際に様々な解析が行われます。
このページでは主な解析の例をあげます。 より詳しく理解したい場合には、 parseInt関数の公式ページ を参照してください。

主な解析例

  • 先頭のホワイトスペースは無視される
  • 指定された基数における数値ではない文字が存在する場合、それ以降の文字は無視される
  • ECMAScript5以降では先頭の0は無視される
// スペースが含まれる場合
const string1 = '  22  ';
const returnValue1 = parseInt(string1, 10);
console.log(returnValue1);
==> 22



// 途中に数値以外の文字列が存在する場合
const string2 = '777,888';
const returnValue2 = parseInt(string2, 10);
console.log(returnValue2);
==> 777



// 数値文字列が0から始まる場合
// 10進数として変換する場合
const string3 = '002';
const returnValue3 = parseInt(string3, 10);
console.log(returnValue3);
==> 2
// 指定する基数(第2引数)によっては異なる動作になる
const returnValue4 = parseInt(string3, 2);
console.log(returnValue4);
==> 0

基数(第2引数)を指定しない場合

大前提として、parseInt関数を使用する際は可能な限り基数(第2引数)を指定してください。 ここでは単なる学習として第2引数を用いない例を紹介します。

基数を指定しない場合、parseInt関数は第1引数に与えた文字列を解析する過程で基数を決定します。
ECMAScript5以降では、0xまたは0Xで始まる文字列は基数が16として解釈、つまり16進数として処理されます。
それ以外の文字列は基数が10(10進数)として処理されます。

// シンプルな数値文字列
const string1 = '30';
const returnValue1 = parseInt(string1);
console.log(returnValue1);
==> 30



// '0'が先頭の数値文字列
const string2 = '0055';
const returnValue2 = parseInt(string2);
console.log(returnValue2);
==> 55



// '0x'または'0X'で始まる文字列は基数16として処理
const string3 = '0x11';
const returnValue3 = parseInt(string3);
console.log(returnValue3);
==> 17
console.log(parseInt('0X11'));
==> 17

1次情報

parseInt() - MDN web docs

基数 - ウィキペディア