JavaScriptでのparseIntの使い方とは？基本的な使い方から小数や予約語に対して使う方法について紹介
- システム
エンジニア - JavaScriptでのparseIntについて詳しく教えてください。
- プロジェクト
マネージャー - 分かりました。JavaScriptでのparseIntの基本的な使い方や小数や予約語に対して使う方法について解説しましょう。
JavaScriptでのparseIntの使い方とは？
今回は、JavaScriptでのparseIntの使い方について説明します。parseIntを使うことで、引数を整数に変換できます。parseIntを小数や予約語に対して使う方法についても紹介します。
JavaScriptでのparseIntの使い方に興味のある方はぜひご覧ください。
基本的な使い方
JavaScriptのparseIntメソッドの基本的な使い方を紹介します。引数を整数に変換できます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 文字列「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
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
|
100
4
64
64
100
256
256
100
100
256
|
このようにJavaScriptでは、parseIntで文字列を整数に変換できます。
エラー
JavaScriptでのparseIntメソッドが失敗するケースを紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
|
// アルファベット（数字以外）は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
|
実行結果は以下のようになります。
|
1
2
3
4
|
NaN
100
NaN
100
|
応用編として、カンマ区切りの数値を10進数に変換する方法を紹介します。replaceメソッドと組み合わせます。
|
1
2
3
4
|
// 「,」を空文字にreplaceして数字に変換
console.log(parseInt("100,200".replace(/,/g, ""))); // 100200
// 数字以外を空文字にreplaceして数字に変換
console.log(parseInt("\\100,200,300-".replace(/[^0-9]/g, ""))); // 100200300
|
実行結果は以下のようになります。
|
1
2
|
100200
100200300
|
小数
JavaScriptのparseIntで小数を整数に変換する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 小数点以下は切り捨てられる
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
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
|
1.0000000000000002e-7を整数に変換する際、先頭の1を整数に変換するため、1になります。この対処方法の1つとして、「val | 0」で0にする方法があります。
|
1
2
3
4
5
6
7
|
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);
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
|
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に予約語を指定するとどうなるでしょうか。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
|
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
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
|
NaN
NaN
NaN
NaN
NaN
NaN
NaN
|
全て変換できずにNaNになります。
Numberとの違い
JavaScriptにおいて、parseIntとNumberの違いについて紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
|
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は数字部分を取り出して変換します。
|
1
2
3
4
5
6
|
20
NaN
2
200
NaN
0
|
- システム
エンジニア - JavaScriptでのparseIntの使い方がよく分かりました。
- プロジェクト
マネージャー - JavaScriptでparseIntメソッドを使うことで引数を整数に変換する方法や小数や予約語に対して使う方法を参考にして、ぜひご自身でソースコードを書いて理解を深めてください。
まとめ
いかがでしたでしょうか。JavaScriptでのparseIntの使い方について説明しました。parseIntを使うことで、引数を整数に変換できます。parseIntを小数や予約語に対して使う方法についても紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
JavaScriptでの配列の追加方法｜結合を利用した方法や削除方法も紹介
JavaScriptでの配列の要素追加・削除について 今回は、JavaScriptでの配列の要素追加・削除について説明します。 ここでは、配列の ・先頭に追加 ・末尾に追加 ・指定した位置に追加 ・結合（concat） […]
-
jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介
jQueryのcookieとは jQueryは様々な機能を持つJavaScriptのライブラリですが、標準で存在しない機能もあります。その1つがcookie（クッキー）の操作です。ところがjquery.cookie.js […]
-
jQueryのdatetimepickerの使い方とは？datetimepickerを正しく使いこなそう！
jQueryのdatetimepickerの使い方とは？ 今回は、jQueryのdatetimepickerの使い方について説明します。 jQueryのdatetimepickerを使えば、カレンダーUIで簡単に日時を指 […]
-
JavaScriptのalertとは？alertの基本的な使い方から応用まで紹介！
JavaScriptのalertとは？ JavaScirptでHTMLページを作っていると、ユーザに向けて目立つメッセージを表示したり、開発中の変数の状態などをデバッグ表示したい時があるのではないでしょうか。そんな時に手 […]
-
jQueryでAjax通信を行う方法とは？Ajax通信を正しく使いこなそう！
jQueryでAjax通信を行う方法とは？ 今回は、jQueryでAjax通信を行う方法について説明します。 Ajax通信を利用することで、ページ遷移せずにページを読み込む非同期通信を実現できます。 ここでは、サーバにX […]
