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 環境変数チュートリアル図

推薦する

CSS 要約ノート: 変換、遷移、アニメーションの例

1.移行遷移プロパティの使用法: transition :transition-property t...

よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。

3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...

クエリプロファイラを使用して MySQL ステートメントの実行時間を表示する方法

前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...

Dockerの基本的なネットワーク構成の詳細な説明

外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...

Dockerコンテナのk8sデプロイメントの実装

環境: (docker、k8s クラスター)、前回 docker で起動した Java プログラムの...

LinuxカーネルとSVNバージョン間の競合の解決策

現象システムは Linux システムカーネルを正常にコンパイルできましたが、SVN をインストールし...

例によるMySql CURRENT_TIMESTAMP関数の分析

時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...

VueでJSXを使用する方法

JSXとは何かJSX は Javascript の構文拡張であり、JSX = Javascript ...

Ubuntu 20.04でLNMP環境を構築する方法

簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...

MySQL が InnoDB テーブルが独立したテーブルスペースか共有テーブルスペースかを判断する方法の詳細な説明

序文InnoDB はデータをテーブルスペースに保存します。デフォルト設定では、初期サイズが 10 M...

CSS3アニメーション属性に基づくWeChatタップアニメーション効果の実装

最近人気のWeChatタップ機能を見て、CSS3アニメーションを見直し、このボックスシェイクアニメー...

Dockerコンテナを作成、起動、停止する方法

1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...

mysql5.7.19 zip 詳細なインストールプロセスと構成

MySQL v5.7.19 正式版(32/64 ビットインストール版および zip 解凍版) 1. ...

Chromeブラウザ設定の新バージョンではクロスドメイン実装が可能

序文現在、フロントエンドは主に webpack の devServer の構成を通じてクロスドメイン...