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

推薦する

Vue-cli を使用して Vue プロジェクトを構築する手順の詳細な説明

まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...

nginx が複数のプロキシ層を通過して実際の送信元 IP を取得するプロセスの詳細な説明

質問Nginx は $remote_addr を実際の IP アドレスとして受け取りますが、実際には...

forループ内のvarの問題の解決

序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...

vue ルーティング ビュー router-view のネストされたジャンプの実装

目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...

Linux DHCPサービスの詳細な説明

目次1. DHCP サービス (動的ホスト構成プロトコル) 1. 背景2. 概要3. 利点4.DHC...

js メモリ リークのシナリオ、それらを詳細に監視および分析する方法

目次序文どのような状況でメモリリークが発生する可能性がありますか? 1. 偶発的なグローバル変数2....

jQuery の CSS スタイル属性 css() と width() の完全ガイド

目次1. css() の基本的な使用法: 1.1 CSSプロパティを取得する1.2 CSSプロパティ...

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...

webpackでHMRを手動で実装するいくつかの方法

目次1. はじめに2. GitHub 3. 基本構成プロジェクトディレクトリパッケージ.json c...

Vue3コンポーネントの開発詳細

目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...

Dockerコミットの使い方の詳しい説明

場合によっては、ベースイメージに特定の依存関係をインストールする必要があります。Dockerfile...

デジタルテーブル特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...

レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析

序文vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは...

CocosCreatorの共通知識ポイントを整理する

目次1. シーンの読み込み2. ノードを見つける1. ノード検索2. その他のノード操作3. 再生ア...

子要素の margin-top によって親要素が移動する問題の解決方法

問題の説明今日、ページ スタイルを変更していたときに、子要素にmargin-top設定したのに、子要...