JavaScript 유형 변환 딥러닝

JavaScript는 처음 접했을 때 편리하고 빠르다는 느낌을 받았습니다(변수 유형을 선언할 필요가 없습니다!). 그것이 가져오는 문제는 때로는 예상치 못한 일입니다

하하하하하, 그런 코드는 누군가 본 적이 있을 것입니다

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

이것은 많은 공간과 3167자를 차지합니다. 브라우저의 콘솔에 붙여넣으면 주황색으로 바로 나타납니다.

원리의 출처를 모르는 분들을 위해 주소는 다음과 같습니다. http://www .jsfuck.com/

JSFuck의 변태는 극도의 수준에 도달했습니다. 그 개념은 다음과 같은 JavaScript를 작성하는 것입니다. []()!+

어떤 사람들은 다음과 같이 말할 수도 있습니다. 웃긴데 대체 누가 이런 코드를 작성하는 걸까요?

그렇죠? 코드가 모호하고 이해하기 어려워지면 위에서 언급한 헷갈리는 문자(천국의 문자)라도 어떤 기능이나 구현이 가능합니다. 즉, JS 코드의 보안은 보장되지 않습니다

물론 Github 문서에서는 매우 포괄적으로 설명했기 때문에 이러한 의미 없는 문자 원칙이 어떻게 구현되는지 이 기사에서는 다루지 않습니다. 관심이 있으시면 https://github.com/aemkei/jsfuck

우리가 매일 사용하는 기본 메소드가 어떻게 구문 분석되는지 이야기해 봅시다. 변환이 두 가지 유형으로 나누어진다는 것을 우리 모두 알고 있습니다. 하나는 암시적 변환이고 다른 하나는 강제 유형 변환

암시적 변환

다음과 같은 상황이 발생하면 JavaScript는 자동으로 데이터 유형을 변환합니다.

다양한 유형의 데이터가 수행됩니다. 상호 연산

부울 유형이 아닌 데이터의 부울 값 계산

숫자가 아닌 유형의 데이터에는 단항 연산자(예: "+" 및 "-") 사용

부울로의 암시적 변환

주로 if 판단을 할 때 사용됩니다. 여기서는 6개가 false로 변환되고 나머지는 모두 true라는 점만 기억하면 됩니다.

null

undefine

NaN

''

-0

+0

은 암시적으로 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"

숫자로의 암시적 변환

연산자를 문자열로 변환할 수 있는 더하기 연산자를 제외하고 다른 연산자는 자동으로 양쪽 연산자를 숫자로 변환합니다

'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

암시적 변환의 기본 성능은 Boolean, Number 및 String을 사용한 강제 변환을 동반한다는 점을 강조합니다.

강제 변환

위의 예를 본 후 위의 '1' + {}가 어떻게 1[객체 객체]를 출력하는지와 같은 몇 가지 질문이 있을 수 있습니다.

위와 같이 강조하기 위해 먼저 실행한다고 추측할 것입니다. String({})을 사용하여 "[객체 개체]"를 가져온 다음 문자열을 연결합니다. 예, 변환 뒤에 숨은 구현 원리는 항상 얻을 수 있습니다. 실제로 실제 원리는 이보다 더 복잡합니다. 아래를 참조하세요.

은 암시적 변환과 동일하므로 부울

으로 강제 변환됩니다. [] 및 {}는 true로 변환됩니다.

는 문자열<로 변환됩니다. 🎜>

기본 유형의 변환 결과는 암시적 변환과 동일합니다. 위에서 인용한 예를 심층적으로 분석하기 위해 객체 변환에 대해 이야기하겠습니다.

문자열을 객체로 변환하는 과정은 세 단계로 나누어집니다. 🎜>

먼저 toString 메소드를 호출합니다. toString 메소드가 원래 유형의 값을 반환하는 경우 해당 값에 대해 String 메소드를 사용하고 더 이상 다음 단계를 수행하지 않습니다.

toString 메소드가 원래 유형의 값을 반환하는 경우 복합 유형 값인 경우 valueOf 메소드를 호출하십시오. valueOf 메소드가 기본 유형의 값인 경우 해당 값에 대해 String 메소드를 사용하고 다음 단계를 진행하지 마십시오.

valueOf 메소드가 리턴하는 경우 복합 유형의 값이면 오류가 보고됩니다

이 예를 다시 분석해 보겠습니다

위 코드는 다음과 동일합니다

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 메서드보다 먼저 실행되는 것으로 나타났습니다

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

Number로 강제 변환

기본 유형 변환은 다음과 같습니다

객체 변환도 더 복잡합니다. String과의 유일한 차이점은 valueOf 메서드가 먼저 오고 toString 메서드가 마지막에 온다라는 것입니다. 세부사항. <… 이 시점에서는 기사 시작 부분에서 코드 변환 프로세스를 설명할 수 없습니다. 이러한 내용을 숙지하는 것이 정상적인 코드 작성을 보장하고 오류를 방지하는 데 더 중요합니다. 매우 궁금하다면 더 특별한 변환 원리를 연구할 수 있습니다. 더 많습니다.

Number("123") // 123 
 
Number("123abc") // NaN 
 
Number("") // 0 
 
Number(false) // 0 
 
Number(undefined) // NaN 
 
Number(null) // 0