JavaScriptでのparseIntの使い方とは？基本的な使い方から小数や予約語に対して使う方法について紹介

Javascript
プログラミング言語

公開日時: 2021-02-24 　更新日時: 2022-06-06

JavaScriptでのparseIntの使い方とは？基本的な使い方から小数や予約語に対して使う方法について紹介

この記事でわかること

システム エンジニア: JavaScriptでのparseIntについて詳しく教えてください。

プロジェクト マネージャー: 分かりました。JavaScriptでのparseIntの基本的な使い方や小数や予約語に対して使う方法について解説しましょう。

JavaScriptでのparseIntの使い方とは？

今回は、JavaScriptでのparseIntの使い方について説明します。parseIntを使うことで、引数を整数に変換できます。parseIntを小数や予約語に対して使う方法についても紹介します。

JavaScriptでのparseIntの使い方に興味のある方はぜひご覧ください。

基本的な使い方

JavaScriptのparseIntメソッドの基本的な使い方を紹介します。引数を整数に変換できます。実際のソースコードを見てみましょう。

// 文字列「100」を数値に変換
console.log(parseInt("100")); // 100

// 2進数の「100」を10進数に変換
console.log(parseInt("100",    2)); // 4
// 8進数の「100」を10進数に変換
console.log(parseInt("100",    8)); // 64
// 8進数の「0100」を10進数に変換
console.log(parseInt("0100",   8)); // 64
// 10進数の「100」を10進数に変換
console.log(parseInt("100",   10)); // 100
// 16進数の「100」を10進数に変換
console.log(parseInt("100",   16)); // 256
// 16進数の「0x100」を10進数に変換
console.log(parseInt("0x100", 16)); // 256

// 頭に0がついても、10進数「100」を10進数に変換
console.log(parseInt("0100"));   // 100
console.log(parseInt("00100"));  // 100
// 頭に0xがつくと16進数「100」を10進数に変換
console.log(parseInt("0x100")); // 256

// 文字列「100」を数値に変換

console.log(parseInt("100")); // 100

// 2進数の「100」を10進数に変換

console.log(parseInt("100", 2)); // 4

// 8進数の「100」を10進数に変換

console.log(parseInt("100", 8)); // 64

// 8進数の「0100」を10進数に変換

console.log(parseInt("0100", 8)); // 64

// 10進数の「100」を10進数に変換

console.log(parseInt("100", 10)); // 100

// 16進数の「100」を10進数に変換

console.log(parseInt("100", 16)); // 256

// 16進数の「0x100」を10進数に変換

console.log(parseInt("0x100", 16)); // 256

// 頭に0がついても、10進数「100」を10進数に変換

console.log(parseInt("0100")); // 100

console.log(parseInt("00100")); // 100

// 頭に0xがつくと16進数「100」を10進数に変換

console.log(parseInt("0x100")); // 256

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

100

256

100

256

このようにJavaScriptでは、parseIntで文字列を整数に変換できます。

エラー

JavaScriptでのparseIntメソッドが失敗するケースを紹介します。実際のソースコードを見てみましょう。

// アルファベット（数字以外）はIntに変換できない。Not a Numberになる。
console.log(parseInt("abc"));     // NaN
// 数字の後に数字以外があると、数字だけ変換できる
console.log(parseInt("100a"));    // 100
// 先頭が数字以外だとIntに変換できない。Not a Numberになる。
console.log(parseInt("a100"));    // NaN
// 途中に数字以外があると、先頭の数字部分だけ変換できる。
console.log(parseInt("100,200")); // 100

// アルファベット（数字以外）はIntに変換できない。Not a Numberになる。

console.log(parseInt("abc")); // NaN

// 数字の後に数字以外があると、数字だけ変換できる

console.log(parseInt("100a")); // 100

// 先頭が数字以外だとIntに変換できない。Not a Numberになる。

console.log(parseInt("a100")); // NaN

// 途中に数字以外があると、先頭の数字部分だけ変換できる。

console.log(parseInt("100,200")); // 100

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

NaN
100
NaN
100

NaN

100

NaN

100

応用編として、カンマ区切りの数値を10進数に変換する方法を紹介します。replaceメソッドと組み合わせます。

// 「,」を空文字にreplaceして数字に変換
console.log(parseInt("100,200".replace(/,/g, ""))); // 100200
// 数字以外を空文字にreplaceして数字に変換
console.log(parseInt("\\100,200,300-".replace(/[^0-9]/g, ""))); // 100200300

// 「,」を空文字にreplaceして数字に変換

console.log(parseInt("100,200".replace(/,/g, ""))); // 100200

// 数字以外を空文字にreplaceして数字に変換

console.log(parseInt("\\100,200,300-".replace(/[^0-9]/g, ""))); // 100200300

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

100200
100200300

1 2	100200 100200300

小数

JavaScriptのparseIntで小数を整数に変換する方法を紹介します。実際のソースコードを見てみましょう。

// 小数点以下は切り捨てられる
console.log(parseInt(1.1)); // 1
console.log(parseInt(0.1)); // 0
console.log(parseInt(0.0001)); // 0
// なぜか1になる
console.log(parseInt(0.00000001)); // 1

/* 
 * 1を10で割り続けてparseIntしてみる
 */
let val = 1;
let i_val = 0;
for (let i = 0; i < 10; i++) {
    val = val / 10;
    i_val = parseInt(val);
    console.log("val:" + val + ", int_val:" + i_val);
}

// 小数点以下は切り捨てられる

console.log(parseInt(1.1)); // 1

console.log(parseInt(0.1)); // 0

console.log(parseInt(0.0001)); // 0

// なぜか1になる

console.log(parseInt(0.00000001)); // 1

* 1を10で割り続けてparseIntしてみる

let val = 1;

let i_val = 0;

for (let i = 0; i < 10; i++) {

val = val / 10;

i_val = parseInt(val);

console.log("val:" + val + ", int_val:" + i_val);

}

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

1
0
0
1
val:0.1, int_val:0
val:0.01, int_val:0
val:0.001, int_val:0
val:0.0001, int_val:0
val:0.00001, int_val:0
val:0.0000010000000000000002, int_val:0
val:1.0000000000000002e-7, int_val:1
val:1.0000000000000002e-8, int_val:1
val:1.0000000000000003e-9, int_val:1
val:1.0000000000000003e-10, int_val:1

val:0.1, int_val:0

val:0.01, int_val:0

val:0.001, int_val:0

val:0.0001, int_val:0

val:0.00001, int_val:0

val:0.0000010000000000000002, int_val:0

val:1.0000000000000002e-7, int_val:1

val:1.0000000000000002e-8, int_val:1

val:1.0000000000000003e-9, int_val:1

val:1.0000000000000003e-10, int_val:1

1.0000000000000002e-7を整数に変換する際、先頭の1を整数に変換するため、1になります。この対処方法の1つとして、「val | 0」で0にする方法があります。

let val = 1;
let i_val = 0;
for (let i = 0; i < 10; i++) {
    val = val / 10;
    i_val = val | 0;
    console.log("val:" + val + ", int_val:" + i_val);
}

let val = 1;

let i_val = 0;

for (let i = 0; i < 10; i++) {

val = val / 10;

i_val = val | 0;

console.log("val:" + val + ", int_val:" + i_val);

}

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

val:0.1, int_val:0
val:0.01, int_val:0
val:0.001, int_val:0
val:0.0001, int_val:0
val:0.00001, int_val:0
val:0.0000010000000000000002, int_val:0
val:1.0000000000000002e-7, int_val:0
val:1.0000000000000002e-8, int_val:0
val:1.0000000000000003e-9, int_val:0
val:1.0000000000000003e-10, int_val:0

val:0.1, int_val:0

val:0.01, int_val:0

val:0.001, int_val:0

val:0.0001, int_val:0

val:0.00001, int_val:0

val:0.0000010000000000000002, int_val:0

val:1.0000000000000002e-7, int_val:0

val:1.0000000000000002e-8, int_val:0

val:1.0000000000000003e-9, int_val:0

val:1.0000000000000003e-10, int_val:0

予約語

JavaScriptのparseIntに予約語を指定するとどうなるでしょうか。実際のソースコードを見てみましょう。

console.log(parseInt(true));      // NaN
console.log(parseInt(false));     // NaN
console.log(parseInt(null));      // NaN
console.log(parseInt(NaN));       // NaN
console.log(parseInt(Infinity));  // NaN
console.log(parseInt(-Infinity)); // NaN
console.log(parseInt(undefined)); // NaN

console.log(parseInt(true)); // NaN

console.log(parseInt(false)); // NaN

console.log(parseInt(null)); // NaN

console.log(parseInt(NaN)); // NaN

console.log(parseInt(Infinity)); // NaN

console.log(parseInt(-Infinity)); // NaN

console.log(parseInt(undefined)); // NaN

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

NaN
NaN
NaN
NaN
NaN
NaN
NaN

NaN

全て変換できずにNaNになります。

Numberとの違い

JavaScriptにおいて、parseIntとNumberの違いについて紹介します。実際のソースコードを見てみましょう。

console.log(parseInt("20a")); // 20
console.log(  Number("20a")); // NaN

console.log(parseInt("2e2")); // 2
console.log(  Number("2e2")); // 2 x 10^2 = 200

console.log(parseInt(null)); // Nan
console.log(  Number(null)); // 0

console.log(parseInt("20a")); // 20

console.log( Number("20a")); // NaN

console.log(parseInt("2e2")); // 2

console.log( Number("2e2")); // 2 x 10^2 = 200

console.log(parseInt(null)); // Nan

console.log( Number(null)); // 0

実行結果は以下のようになります。Numberは、文字列の意味を解釈して整数に変換します。parseIntは数字部分を取り出して変換します。

20
NaN
2
200
NaN
0

NaN

200

NaN

システム エンジニア: JavaScriptでのparseIntの使い方がよく分かりました。

プロジェクト マネージャー: JavaScriptでparseIntメソッドを使うことで引数を整数に変換する方法や小数や予約語に対して使う方法を参考にして、ぜひご自身でソースコードを書いて理解を深めてください。

まとめ

いかがでしたでしょうか。JavaScriptでのparseIntの使い方について説明しました。parseIntを使うことで、引数を整数に変換できます。parseIntを小数や予約語に対して使う方法についても紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのparseIntの使い方とは？基本的な使い方から小数や予約語に対して使う方法について紹介

JavaScriptでのparseIntの使い方とは？

基本的な使い方

エラー

小数

予約語

Numberとの違い

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptでのparseIntの使い方とは？基本的な使い方から小数や予約語に対して使う方法について紹介

JavaScriptでのparseIntの使い方とは？

基本的な使い方

エラー

小数

予約語

Numberとの違い

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptでの配列の追加方法｜結合を利用した方法や削除方法も紹介

jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介

jQueryのdatetimepickerの使い方とは？datetimepickerを正しく使いこなそう！

JavaScriptのalertとは？alertの基本的な使い方から応用まで紹介！

jQueryでAjax通信を行う方法とは？Ajax通信を正しく使いこなそう！