JSで知らない明示的な型変換と暗黙的な型変換

JavaScript における明示的な型変換と暗黙的な型変換

明示的な型変換

明示的な型変換は、その名前が示すように、彼の変換の型です。一目でどの型であるかがわかります。率直で正直な、本物の紳士です。

明示的な型変換により JavaScript でいくつかのメソッドが提供されます。いくつかのケースでテストしてみましょう

数値に変換された数値

Number メソッドは、渡された値を数値に変換して返します。

1. まず、次のようないくつかの簡単なケースを見てみましょう。

var n1 = Number('111')
var n2 = Number('abc')
var n3 = Number(true)
var n3 = Number(false)
var n4 = Number('')
var n5 = Number(null)
var n6 = Number(undefined)

console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 111
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: NaN
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 1
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: 0
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: 0
console.log('类型是:', typeof n6, '值为:', n6) // 类型是: number 值为: NaN

console.log(Number('11abc'))//NaN
console.log(Number('abc111'))//NaN

2. 上記の例では、文字列 abc と unknown が NaN に変換される状況について説明します。これは、Number メソッドで変換される値は数値型である必要がありますが、数値で表現できない場合は NaN になります。ただし、数値型である必要があります。数値以外を数値型にすることはできないため、NaN も数値型です。

3. 残りについては何も疑う必要はありません

parseInt 整数

parseInt は値を整数に変換します

1. ケースは次のとおりです。

var n1 = parseInt('1111')
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 1111

var n2 = parseInt('123abc')
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: 123

var n3 = parseInt('123.567')
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 123

var n4 = parseInt(false)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: NaN

var n5 = parseInt('abc111')
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: NaN

console.log(parseInt(null))//NaN
console.log(parseInt(undefined))//NaN
console.log(parseInt(true))//NaN
console.log(parseInt('11 22'))//11
console.log(parseInt(' 11 22'))//11
console.log(parseInt(' 1122 '))//1122

2. ここから少し違いがわかります。Number では false は値 0 に変換できますが、parseInt では変換できません。これは、parseInt は主に値を整数に変換するのに対し、Number は可能な限り値を変換するためです。数値を数値型に変換し、文字列中の数値の前にスペースがいくつあっても数値を認識できますが、途中にスペースがあると認識できません

3. parseInt は、数字と他の文字の文字列を検出します。先頭部分が数字の場合、最初から数字以外の文字が最初に出現するまでこの部分をインターセプトし、整数に変換します。数字以外の文字です数字の文字列は変換できません

4. もちろん、これが parseInt メソッドのすべてではありません。このメソッドには 2 番目のパラメータもあります。これはより興味深いもので、基数 (基数) です。まず、次のケースを見てみましょう。

var n1 = parseInt('123', 16)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 291

5. 2 番目のパラメータ 16 は、123 を 16 進数に基づいて 10 進数に変換することを意味します。この 291 が正しいかどうかをテストしたい場合は、それを計算し、10 進数を 16 進数に変換し、16 の余りを取得します。計算を確認するには、まず、次のようにします。 291 / 16 の余りは 3 で、商は 18 です。18 を 16 で割ると、商は 1 で、余りは 2 です。1 を 16 で割ると、余りは 1 で、商は 0 になります。計算はここで終了します。これらは理解しやすいはずです。剰余の順序を逆にして値 123 を取得します。計算は図に示すとおりです。

画像-20230518174529547

6. それでもよくわからない場合は、123 の 16 進数を 10 進数に変換し、基数に指数の n 乗を乗じて変換します。基数は 123、16 進数のインデックスは 16 です。この累乗は基数です。位置は 0 から始まり、インデックスと同様に、式 1 * 16^2 + 2 * 16^1 + 3 * 16^0、0 を除く任意の数の 0 の累乗を取得できます。が 1 に等しい場合、計算します。結果は 291 です。

7. ここまで説明してきましたが、16 進数の AF について触れないと意味がありませんので、簡単に紹介します。この AF は 10 ~ 15 の形式になっていますが、なぜこのように設計されているのでしょうか。16 進数は 16 でいっぱいなので、それぞれの数字の範囲は 0 ~ 15 になりますが、アラビア数字では 0 ~ 9 だけが 1 桁なので、混乱を避けるために、11 ~ 15 の代わりに AF を使用します。システム知識に興味がある場合は、自分で調べることができます

プレスフロート

parseFloat は文字列を解析し、浮動小数点数 (平たく言えば 10 進数) を返します。ルールは parseInt のルールと似ています。

ケースは次のとおりです。

var n1 = '111.234'
n1 = parseFloat(n1)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 111.234

var n2 = '11 22'
n2 = parseFloat(n2)
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: 11

var n3 = ' 11 '
n3 = parseFloat(n3)
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 11

var n4 = '88 hello'
n4 = parseFloat(n4)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: 88

var n5 = 'xx22'
n5 = parseFloat(n5)
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: NaN

console.log(parseFloat(null))//NaN
console.log(parseFloat(undefined))//NaN

2. 特別な場所はあまりないので、自分で試してみましょう

文字列から文字列へ

これですべての値が文字列に変換されるので、難しくなくわかりやすいはずなので、簡単な数式を作ってみましょう

1. ケースは次のとおりです。

var n1 = String(1111)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: string 值为: 1111

var n2 = String(false)//true也一样
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: string 值为: false

var n3 = String(null)
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: string 值为: null

var n4 = String(undefined)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: string 值为: undefined

2.文字列 説明することは何もありません、この方法はあまりにも強引で、入ると同化して、小説の最高のスキルの味があります

ブール値 ブール値

これについては誰もがよく知っているはずですが、次の 6 つの値はすべて当てはまります。

1. ケースは次のとおりです。

var n1 = Boolean(0)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: Boolean 值为: false

var n2 = Boolean('')
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: Boolean 值为: false

var n3 = Boolean(null)
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: Boolean 值为: false

var n4 = Boolean(undefined)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: Boolean 值为: false

var n5 = Boolean(NaN)
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: Boolean 值为: false

var n6 = Boolean(false)
console.log('类型是:', typeof n6, '值为:', n6) // 类型是: Boolean 值为: false

2. まあ、残りは無知です、ずっと探してください

toStringから文字列へ

このメソッドの使用方法には少し違いがあります。値を直接渡すのではなく、値を文字列に変換する必要があるだけで、直接呼び出すことができます。

1. ケースは次のとおりです。

var n1 = 111
n1 = n1.toString()
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: string 值为: 111

var n2 = null
// n2 = n2.toString() // 报错 error

var n3 = undefined
// n3.toString() // 报错 error

var n4 = true
n4.toString()
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: boolean 值为: true

2. 違うことに気づきましたか? ブール値呼び出しがブール値である理由についてお話しましょう。まず、オブジェクトプロトタイプのtoStringメソッドを呼び出すと、「[object xxx]」という形式の文字列が返されますが、xxxは表形式データの型名なので、これを判断するのによく使われます。データ型であり、非常に正確であるため、明らかに、ここでは Boolean で書き直された toString メソッドがあるため、出力値はまだ文字列に変換されていません。以下は、さまざまなデータ型の toString メソッドの紹介です。プロトタイプチェーンの知識を理解していない場合は、この継承と繰り返しを理解していません。次のように書き留めることを選択できます。

画像-20230518174745037

3. null、unknownにはtoStringメソッドがないのでエラーになります toStringメソッドがないのはプロトタイプのためです 分からない場合は関連知識を自分で理解することができます

4. 上記に加えて、この toString はパラメーターを受け取ることもできます。興味深いのは、parseInt の逆であることです。toString メソッドは、10 進数からターゲットの基数に変換される基底パラメーターも受け取ることができます。次のように、テストするいくつかのケースを作成できます。

var n1 = 111
console.log(typeof n1.toString(8), n1.toString(8)) // string 157

5. 10 進数を 8 進数に変換するプロセスは 16 進数の変換と同じで、同じ剰余メソッドを使用します。111 / 8 で 13...7 が得られ、13 / 8 で 5...1 が得られ、1 / 8 で 0 が得られます。 ...1、反転 値は157ですが、展開図のチェック計算処理にはありませんが、まだ非常にわかりやすいと思います

暗黙的な型変換

暗黙的な型変換は、実際には内部で明示的な型変換を実行しますが、それは教えてくれないため、暗黙的な型変換と呼ばれます。そのため、暗黙的な型変換をマスターするには、明示的な型変換をマスターする必要があります。

はNaN

1. このメソッドは誰もがよく知っていると思いますが、値が NaN であるかどうかを判断し、ブール値を返すというものです。まず、次のようないくつかのケースを見てみましょう。

var n1 = '111'
console.log(isNaN(n1)) // false

var n2 = 111
console.log(isNaN(n2)) // false

var n3 = 'aaa'
console.log(isNaN(n3)) // true

var n4 = NaN
console.log(isNaN(n4)) // true

var n5 = null
console.log(isNaN(n5)) // false

var n6 = undefined
console.log(isNaN(n6)) // true

2. ここで、結果が null と unknown になる理由について説明します isNaN は内部で Number() を 1 回呼び出して、その値が NaN であるかどうかを判定しています。 Null を Number で 1 回変換すると 0 になります。0 が NaN でない場合は、0 になります。 false と未定義を返します。 Number によって NaN に変換されるので、true を返します。残りは最初に Number によって変換されます。NaN を使用する場合は明らかです。

数学演算子

1. まず、++ 演算子のいくつかのケースを見て、次のように分析します。

var n1 = '111'
n1++
console.log(n1) // 112

var n2 = null
n2++
console.log(n2) // 1

var n3 = undefined
n3++
console.log(n3) // NaN

2. ++ 演算子が計算される前に、Number メソッドを呼び出して値を数値に変換します。この変換層の後、計算 111 は自動的に 112 に増分され、null は 0 に変換され、未定義は に変換されます。 NaN。自動インクリメント操作は依然として NaN です。

3. 残りのシンボルも同様です。次のようないくつかのケースを見てみましょう。

var n1 = '111'
n1--
console.log(typeof n1, n1) // number 110

var n2 = 'abc'
n2 = +n2
console.log(typeof n2, n2) // number NaN

var n3 = null
n3 = +n3
console.log(typeof n3, n3) // number 0

var n4 = '88'
n4 = -n4
console.log(typeof n4, n4) // number -88

var n5 = '99'
n5 = +n5
console.log(typeof n5, n5) // number 99

4. それでも最初に Number メソッドを実行するため、変数を数値に変換するために変数の前に + を使用することがよくあります。

5. 次のように、他の使用法も確認できます。

var n1 = '5'
var n2 = 20

var n3 = n2 - n1
console.log(typeof n3, n3) // number 15

var n4 = n1 * n2
console.log(typeof n4, n4) // number 100

var n5 = n2 / n1
console.log(typeof n5, n5) // number 4

var n6 = n2 + n1
console.log(typeof n6, n6) // string 205

6. この + 記号は非常に特殊で、プラス記号の両側に文字列の値がある場合、String メソッドが呼び出されて両方の値が文字列に変換されてから結合され、残りは着信番号

&& ||

1. これら 3 つは比較的単純で、! は値をブール値に変換するためにブール値を呼び出し、&& と || は比較のためにブール値に変換されますが、返される値はブール値ではなくそれ自体です。

「&&」が前に false である限り、「&&」の後に true または false が続くかどうかに関係なく、結果は「&&」の前の値を返します。

「&&」の前に true がある限り、「&&」の後に true または false が続くかどうかに関係なく、結果は「&&」の後の値を返します。

"||" が前に false である限り、"||" が true か false に関係なく、"||" の後の値を返します。

「||」の前に「||」が true であれば、「||」が true か false かに関係なく、「||」の前の値を返します。

次のように:

var test1 = null
console.log(!test1) // true

var test2 = 111
console.log(!test2) // false

var test3 = 'abc'
console.log(!!test3) // true

var n1 = 0
var n2 = 111

var n3 = n1 && n2
console.log(n3) // 0

var n4 = n1 || n2
console.log(n4) // 111

1&&3 //3
1&&0 //0
3&&1 //3
3&&0 //3
0&&3 //3

2. 上記の場合は一目で理解できるはずなので、値をブール値に変換したい場合、ブール値が否定されていない場合は、!! を使用して変換できます。もちろん、多くの場合があります、&&、および || ルールについてはあまり言う必要はありません

<、 > 、<=、 >=、 == 、!=

1. これも比較ですが、数値がある場合は、次のように Number メソッドが最初に呼び出され、比較が実行されます。

var n1 = 111
var n2 = '222'
console.log(n1 > n2) // false
console.log(n1 < n2) // true
console.log(n1 <= n2) // true
console.log(n1 >= n2) // false

2. ただし、両方が文字列型の場合は、ASCII コード値が比較されます。

3. == と != には、次のように暗黙的な型変換もあります。

var n1 = 111
var n2 = '222'
console.log(n1 == n2) // false

var n3 = '1'
var n4 = 1
console.log(n3 == n4) // true

var n5 = true
var n6 = 0
console.log(n5 == n6) // false


4. このため、次のような興味深いケースがいくつか見つかります。

console.log(false > true) // false

console.log(1 > 2 > 3) // false

console.log(10 > 7 < 3) // true

5. False は Number に変換されて 0 が得られ、true は 1 に変換され、0 > 1 は false と比較されます。

6.1 > 2 は false、false は Number に変換されて 0 が得られ、0 > 3 は比較されて false が得られます

7.10 > 7 は true を取得、数値変換後に true は 1 を取得、1 < 3 を比較して true を取得

8. このケースを通して、比較は順番に実行されるため、次のように 2 つの比較を通じて数値が特定の間隔内にあるかどうかを直接判断することは不可能であることがわかります。

var n = 0
var res = null
if (-1 < n < 1) {
    
    
	res = '在 -1 ~ 1 区间'
} else {
    
    
	res = '不在 -1 ~ 1 区间'
}
console.log(res) // 不在 -1 ~ 1 区间

9. 次のような別のケースを見てみましょう。

console.log(undefined < 0) // false   Number(undefined)=NaN
console.log(undefined > 0) // false
console.log(undefined == 0) // false

console.log(null < 0) // false   Number(null)=0
console.log(null > 0) // false
console.log(null == 0) // false

console.log(null == undefined) // true

10. なぜこの部分にこれらの値があるのか​​、理由はありません。これらはシステムによって定義され、このように生まれます。これらの特別な値を覚えておいてください\

11. もちろん、次のように、それ自体と等しくない NaN も存在します。

console.log(NaN == NaN) // false
console.log(NaN === NaN) //false

12. したがって、ビジネス開発を行うときは、通常、一致する === と !== を使用して判断します。

さて、まずはここでやめて、いくつかの曲を注文して愛を込めて集めましょう~~~

おすすめ

転載: blog.csdn.net/qq_53461589/article/details/130755054