JavaScript型変換ディープラーニング

JavaScript は弱い型付け言語であると、初めて触れたときは便利で速いと感じます (変数の型を宣言する必要がないことがわかります)。それがもたらす問題は時々予期せぬものです

ははは、なんて言い過ぎでしょう。誰かがこのようなコードを見たかもしれません

これは 3167 文字なので、ブラウザのコンソールに貼り付けてください。とオレンジが直接表示されます。通話中の人はいますか?

原則のソースがわからない場合は、アドレスを教えます: http://www.jsfuck.com/

JSFuck は、「6 文字で任意の JavaScript を書く: []()!+

」というコンセプトなので、非常に倒錯的です。「こんなコードを実際に書くのは誰だ?」と言う人もいるかもしれません。わかりにくくなり、上記の紛らわしい文字（天の書）さえも、それは何でも達成できます 関数は予測不可能になります、つまり、JSコードの安全性は保証されません

もちろん、この記事では、これらがどのように無意味であるかを検討しませんGithub ドキュメントはすでに非常に包括的に説明されているため、文字の原則が実装されています。興味がある場合は、それを調べることができます: https://github.com/aemkei/jsfuck

私たちが毎日目にする基礎となるメソッドがどのように使用されているかについて話しましょう解析には 2 つのタイプの変換があることがわかっています。1 つは暗黙的な変換であり、もう 1 つは強制的な型変換です

暗黙的な変換です

次のような状況が発生した場合、JavaScript はデータ型を自動的に変換します:

異なるタイプのデータが相互演算を実行します

非ブール型データのブール値を計算します

非数値型データには単項演算子 (つまり、「+」と「-」) を使用します

ブール型への暗黙的な変換

ほとんどここで覚えておく必要があるのは false への 6 つの変換だけであり、その他はすべて true

null

unknown

NaN

''

-0

+0

です。 to String

文字列の自動変換は主に加算演算中に発生します。一方の値が文字列で、もう一方の値が文字列以外の場合、後者は文字列に変換されます。

[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+([]+[])[(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]+[!+[]+!+[]]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]+(![]+[])[+!+[]]+([][[]]+[])[+!+[]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+(!![]+[])[!+[]+!+[]+!+[]]+([]+[])[(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]+[!+[]+!+[]]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()

数値への暗黙的な変換

演算子を文字列に変換する可能性のある加算演算子を除き、他の演算子は両側の演算子を自動的に数値に変換します

'1' + 2  // '12' 
'1' + true  // "1true" 
'1' + false  // "1false" 
'1' + {}  // "1[object Object]" 
'1' + []  // "1" 
'1' + function (){}  // "1function (){}" 
'1' + undefined  // "1undefined" 
'1' + null  // "1null"

暗黙的な変換の基本的なパフォーマンスはこちらです。これらの変換には、ブール値、数値、文字列を使用した強制変換が伴うことを強調しました。強制変換の原理に焦点を当てましょう

強制変換

上記の例を見た後、すでにいくつかの疑問が生じているかもしれません。 this '1' + {} Output 1[object Object]? 上で強調したように、最初に String({}) を実行して "[object Object]" を取得し、次に文字列を連結すると思われます。はい、いつでも取得できます。実際、実際の原理はこれよりも複雑です。以下を参照してください。

ブール値への強制変換は、暗黙的な変換と同じであるため、ここでは省略します。すべて true に変換されます

String への強制変換

基本型の変換結果は暗黙的な変換と同じです ここでは、上記の例の分析を深めるためにオブジェクトの変換について説明します

文字列は 3 つのステップに分割されます

最初に toString メソッドを呼び出します。 toString メソッドが複合型の値を返す場合は、次に valueOf メソッドを呼び出します。 valueOf メソッドが元の型の値を返す場合は、次に、 valueOf メソッドを呼び出します。値に対して String メソッドを使用し、次の手順は実行しません

valueOf メソッドが複合型の値を返す場合、エラーが報告されます

この例をもう一度分解してみましょう

'5' - '2'  // 3 
'5' * '2'  // 10 
true - 1  // 0 
false - 1  // -1 
'1' - 1  // 0 
'5' * []  // 0 
false / '5'  // 0 
'abc' - 1  // NaN 
+'abc'  // NaN 
-'abc'  // NaN 
+true  // 1 
-false  // 0

上記のコードは次のコードと同等です

String({}) 
// "[object Object]"

toString メソッドと valueOf メソッドが元の型ではない値を返す場合、String メソッドはエラーを報告します

String({}.toString()) 
// "[object Object]"

toString メソッドと valueOf メソッドが書き換えられることが簡単にわかります。連続して実行される順序をテストする方がはるかに簡単です

var obj = { 
  valueOf: function () { 
    console.log("valueOf"); 
    return {}; 
  }, 
  toString: function () { 
    console.log("toString"); 
    return {}; 
  } 
}; 
 
String(obj) 
// TypeError: Cannot convert object to primitive value

結果は toString メソッドを示します valueOf メソッドの前に実行されます

Number への強制変換

基本的な型変換は次のとおりです

String({toString:function(){return 3;}}) 
// "3" 
 
String({valueOf:function (){return 2;}}) 
// "[object Object]" 
 
String({valueOf:function (){return 2;},toString:function(){return 3;}}) 
// "3"

オブジェクト変換もString との唯一の違いは、valueOf メソッドが最初にあり、toString メソッドが後に来ることです。その他の詳細については、上記の例を参照してください。

isNaN() は見慣れないものではありません。 isNaN({}) //true の内部変換プロセスは同じです

まとめ

これを見ると、まだ最初のコード変換を説明できません。この記事のプロセスでは、これらを習得することは、エラーを回避するためにコードを正常に作成するためのものであり、非常に興味がある場合は、さらに多くの特殊な変換原理を学ぶことができます。