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

推薦する

JavaScript でネットワーク速度をテストする方法

目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...

一般的な XHTML タグの使用方法の紹介

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...

Sysbench の MySQL ベンチマーク プロセスの分析

序文1.ベンチマークは、テスト オブジェクトのクラスの特定のパフォーマンス指標の定量的、再現可能、比...

Windowsにmysql5.7をインストールする方法

まずmysqlの圧縮バージョンをダウンロードします。公式ダウンロードアドレスは123WORDPRES...

VMWare に CentOS 7.3 をインストールするグラフィカル チュートリアル

CentOS 7.3のインストール手順を図解しました。具体的な内容は次のとおりです。この記事では、v...

DockerでPrometheusをインストールする詳細なチュートリアル

目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...

MySQL 文字列インデックスのより合理的な作成ルールに関する議論

序文MySQL インデックスの使用に関しては、これまでインデックスの最左接頭辞ルール、インデックス ...

DOCTYPE宣言の機能と使い方の詳しい説明

1. ブラウザのレンダリングモードとdoctype一部の Web ページは標準に従って作成されていま...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...

MySQLバイナリログを介してデータベースデータを復元する方法の詳細な説明

ウェブサイト管理者は、さまざまな理由や操作により、ウェブサイトのデータを誤って削除したり、ウェブサイ...

単純なCSSの詳細に惚れ込むと、重要ではないものの、効率性が向上する可能性がある

CSS の将来は非常に楽しみです。一方では、まったく新しいページ レイアウト方法であり、他方では、ク...

jsはショッピングウェブサイトの商品の拡大鏡効果を実現します

この記事では、ショッピングサイトの商品の拡大鏡効果を実現するためのjsの具体的なコードを紹介します。...

同期スクロールを実現するための複数のテーブル要素のサンプルコード

Element UIは、複数のテーブルを同時に水平および垂直にスクロールすることを実装します。 コー...

Linux で ffmpeg をインストールするための詳細なチュートリアル

1. CentOS Linuxにffmpegをインストールする1.ダウンロードして解凍する http...

MySQLイベント計画タスクに関する簡単な説明

1. イベントが有効になっているかどうかを確認する'%sche%' のような変数を表...