JavaScript parseInt() と Number() の違いのケーススタディ

JavaScript parseInt() と Number() の違いのケーススタディ

学習目標:

parseInt() と Number() という 2 つの関数は、文字列をデータ型に変換するために最もよく使用されますが、それらの違いは何でしょうか?

学習内容:

parseInt() 関数は、指定された文字列を指定された基数の整数に解析します。
parseInt(文字列、基数)
2 番目のパラメータは、使用される基数を示します。通常は 10 進数を使用しますが、8 進数や 16 進数を使用することもできます。 「0」および「0x」で始まる文字列の解析エラーを回避するために、さまざまな JavaScript プログラミング仕様では、parseInt("123",10) のように、2 番目のパラメータの値を明確に指定する必要があります。

parseInt('16', 8) = 14
parseInt('10', 8) = 8

parseInt('16', 10) = 16
parseInt('10', 10) = 10

parseInt('16', 16) = 22
parseInt('10', 16) = 16

parseInt は文字列を先頭から整数に解析します。解析できない文字に遭遇すると、解析された整数部分を返します。最初の文字を解析できない場合は、直接 NaN を返します。

new 演算子が使用されていない場合は、Number() を使用して型変換を実行できます。数値に変換できない場合は NaN が返されます。 たとえば、「123a」の場合、parseInt() は 123 を返しますが、Number() は NaN を返します。異なるタイプの文字列は、次の 2 つの関数を使用して異なる方法で変換されます。

// 文字列が数字で構成されている場合は、違いなく同じ数字に変換されます。let numStr = '123'
コンソール.log(parseInt(numStr)) //123
console.log(数値(numStr)) //123

// 文字列が文字で構成されている場合は、numStr = 'abc' とします
console.log(parseInt(numStr)) //NaN
console.log(Number(numStr)) //NaN

// 文字列が数字と文字で構成されている場合は、numStr = '123a' とします。
コンソール.log(parseInt(numStr)) //123
console.log(Number(numStr)) //NaN

// 文字列が0と数字で構成されている場合は、numStr = '0123'とします
コンソール.log(parseInt(numStr)) //123
console.log(数値(numStr)) //123

// **文字列に小数点が含まれている場合**
numStr = '123.456' とします
コンソール.log(parseInt(numStr)) //123
console.log(数値(numStr)) //123.456

// **文字列がnullの場合**
numStr = null とします
console.log(parseInt(numStr)) //NaN
console.log(数値(numStr)) //0

// **文字列が '' (空) の場合**
numStr = '' とします
console.log(parseInt(numStr)) //NaN
console.log(数値(numStr)) //0

学習の要約:

1. 文字列が数字で構成されている場合、変換される数字は同じで違いはありません。文字列に数字が含まれず文字のみが含まれている場合、両方のメソッドは NaN の結果を返します。文字列が 0 と数字で構成されている場合は、0 以外のすべての数字が解析されます。

2 文字列が数字と文字で構成されている場合 ① 文字が先頭にあり、両方のメソッドともNaNの結果を返します ② 文字が先頭ではありません。NumberメソッドはNaNを返し、pareseIntメソッドは文字の前のデータを返し

3 parseIntは操作前に非文字列値を文字列型に変換します 4 残りの詳細については、上記のケースを参照してください

これで、JavaScript parseInt() と Number() の違いに関する詳細なケース分析に関するこの記事は終了です。js parseInt() と Number() の違いに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Javascript 基本チュートリアル: データ型 (数値)
  • JavaScript データ構造番号
  • JavaScript の数値および数学オブジェクトの概要
  • javascriptは他の型を数値型に変換します
  • JS における 19 桁の数値型の精度低下問題の詳細な説明
  • JS数値型の詳細説明
  • JavaScript の数値データ型

<<:  MySQL クエリ データベース容量方法手順

>>:  Win10 構成 Tomcat 環境変数チュートリアル図

推薦する

MySQLのインストールと設定方法のグラフィックチュートリアル(CentOS7)

1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...

Webフロントエンドベクターアイコンの使い方

序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...

MySql 自動切り捨て例の詳細な説明

MySql 自動切り捨て例の詳細な説明友人が質問しました。プロジェクト内で挿入または更新ステートメン...

テーブルはセルとimg画像を結合してtd HTML全体を埋めます

ソースコード(一部のクラスは削除されています):コードをコピーコードは次のとおりです。 <テー...

マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2

前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか?...

Vue のループフォーム項目例の詳細な説明

場合によっては、ユーザーがボタンをクリックして同様のフォームを追加し、クリックごとに 1 回追加でき...

Ubuntu で .sh ファイルを実行するいくつかの方法の違いについて簡単に説明します。

序文特に bash 環境では、スクリプトの実行方法によって結果が異なります。スクリプトを実行する方法...

MySQL内部一時テーブルの具体的な使用法

目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...

ChromeはCookieの変更を監視し、値を割り当てます

次のコードは、Chrome による Cookie の変更の監視を導入しています。コードは次のとおりで...

Oracle と MySQL の高可用性ソリューションの比較分析

Oracle と MySQL の高可用性ソリューションについては、以前からまとめたいと思っていたので...

InnoDB エンジンの redo ファイルのメンテナンス方法

InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...

単語のグループ化シーケンスと複数フィールドのグループ化のための MySQL グループ方法

ここで商品テーブルを作成しました。その中のデータを見てみましょう。 mysql> 商品から *...

border-radiusは要素に丸い境界線を追加する方法です

border-radius:10px; /* すべての角は半径 10px で丸められます*/ bor...

Vue で Excel ストリーム ファイルをダウンロードし、ダウンロード ファイル名を設定する方法

目次概要1. URL経由でダウンロード2. aタグのダウンロード属性とblobコンストラクタを組み合...