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 で MHA アーキテクチャのデプロイメントを構築する手順

目次マハ1. MAHアーキテクチャの概要2. 適用可能なシナリオ3. MHAの動作原理4. MHAの...

イラスト風ウェブサイトホームページデザイン ウェブサイトデザインの新トレンド

視覚効果が非常に美しく、訪問者に強い印象を残すことがわかります。さらに、重要なポイントが強調され、訴...

Linux に MySql 5.7.21 をインストールするための詳細な手順

序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...

JavaScript はクリックして画像の形状を変更する (変換アプリケーション) を実装します。

JavaScriptをクリックすると画像の形状が変わります(変形の応用)。参考までに具体的な内容は...

JS 4つの楽しいハッカー背景効果コードを共有する

目次例1例2例3例4例1 <html> <ヘッド> <title>...

MySQLでトリガーを作成する方法

この記事の例では、参考のためにMySQLトリガーを作成するための具体的なコードを共有しています。具体...

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

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

Linux クラウド サーバーに JDK と Tomcat をインストールするための詳細な手順 (推奨)

JDKをダウンロードしてインストールするステップ 1: まず、公式 Web サイト http://...

React と Threejs を使用して VR パノラマ プロジェクトを作成する詳細なプロセス

最近、 Three.jsでReactを使用して、720 度のパノラマ写真を閲覧できるプロジェクトを構...

$remote_addr に基づく nginx フロントエンド配布方法の詳細な説明

要件は次のとおりです。ドメイン名の下に複数のサーバーがあります。現在、特定の地域をテストしています。...

Nest.js パラメータ検証とカスタム戻りデータ形式の詳細な説明

0x0 パラメータ検証Nest.jsでは、パラメータ検証業務のほとんどをパイプライン方式で実装してい...

例によるMySql CURRENT_TIMESTAMP関数の分析

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

Samba を使用して Linux サーバー上で共有ファイル サービスを構築する方法

最近、私たちの小さなチームは、サーバー上の共有フォルダーを共有して、全員がパブリックリソースドキュメ...

NodeサイトのForever+nginx導入方法例

私は最近、最も安い Tencent クラウド サーバーを購入しました。これは主に、Web テクノロジ...

Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...