JS_javascript 기술에서 JSON 문자열을 구문 분석하는 Eval의 작은 문제

이전에 JSON에 대한 소개 글을 쓴 적이 있는데, 여기서는 JSON 파싱에 대해 이야기했습니다. 우리 모두는 고급 브라우저가 JSON.parse() API를 사용하여 JSON 문자열을 JSON 데이터로 구문 분석할 수 있다는 것을 알고 있습니다. 약간 덜 적절한 접근 방식으로 eval() 함수를 사용할 수 있습니다.

JSON(JavaScript Object Notation)은 XML보다 가벼운 간단한 데이터 형식입니다. JSON은 기본 JavaScript 형식입니다. 즉, JavaScript에서 JSON 데이터를 처리하는 데 특별한 API나 툴킷이 필요하지 않습니다.

JSON의 규칙은 간단합니다. 객체는 "이름/값 쌍"의 정렬되지 않은 모음입니다. 객체는 "{"(왼쪽 대괄호)로 시작하고 "}"(오른쪽 대괄호)로 끝납니다. 각 "이름" 뒤에는 ":"(콜론)이 옵니다. "'이름/값' 쌍"은 ","(쉼표)로 구분됩니다.

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval('(' + str + ')');
console.log(obj); // Object {name: "hanzichi", age: 10}

eval()에 매개변수를 전달할 때 str 변수가 괄호로 묶인다는 사실을 알고 계셨나요? 왜 이런 일을 하는가?

먼저 eval 함수의 정의와 사용법을 살펴보겠습니다.

eval()의 매개변수는 문자열입니다. 문자열이 표현식을 나타내는 경우 eval()은 표현식을 평가합니다. 인수가 하나 이상의 JavaScript 선언을 나타내는 경우 eval()은 선언을 실행합니다. 산술 표현식을 평가하기 위해 eval()을 호출하지 마십시오. JavaScript는 산술 표현식을 자동으로 평가합니다.

간단히 말하면 eval 함수의 매개변수는 문자열입니다. 문자열이 "noString"이면 결과는 실행할 수 있는 일반적인 JavaScript 문이 됩니다.

어떻게 말할까요? 예를 들어 다음 코드는 다음과 같습니다.

var str = "alert('hello world')";
eval(str);

실행 후 "hello world"가 팝업됩니다. str 변수를 "noString"으로 변환합니다. 대략적인 접근 방식은 외부 따옴표를 제거하고 내부 조정(이스케이프 등)을 수행하는 것입니다. 그러면 다음과 같습니다.

alert('hello world')

아주 좋아요! 이것은 작동하는 일반적인 JavaScript 문입니다! 실행하세요!

원래 질문으로 돌아가서 JSON 문자열을 괄호로 묶어야 하는 이유는 무엇인가요? 추가하지 않으면 다음과 같습니다.

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :

그런데 오류가 보고되었습니다. 오류가 보고되는 이유는 무엇입니까? str을 "noString"으로 변환하고 다음을 실행해 보세요.

{"name": "hanzichi", "age": 10}; // Uncaught SyntaxError: Unexpected token :

JSON 개체 또는 개체가 실행 가능한 JavaScript 문이 아니라는 것은 의심의 여지가 없습니다! 잠깐, 다음 코드를 시도해 보세요:

var str = '{name: "hanzichi"}';
var obj = eval(str);
console.log(obj); // hanzichi

이게 도대체 뭐야? 그런데 이름에 ""를 추가하면 오류가 반환되나요?

var str = '{"name": "hanzichi"}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :
console.log(obj); 

글쎄요, 거의 어지러울 정도입니다. 사실 str을 "nostring"하여 올바르게 실행될 수 있는 JavaScript 문인지 확인할 수 있습니다. 전자의 결과는 다음과 같습니다.

{name: "hanzichi"}

이것은 실제로 합법적인 JavaScript 구문입니다. {} if 및 for 문과 같은 시나리오에서뿐만 아니라 언제든지 사용할 수 있습니다. 왜냐하면 ES6 이전에는 JavaScript가 블록 수준 범위만 가졌기 때문에 범위와 충돌이 없었기 때문입니다. {}를 제거한 후 name: "hanzichi"도 합법적인 문입니다. label 문은 중첩 루프에서 벗어나는 데 매우 유용합니다. , 이름은 인용할 수 없습니다. 태그는 사용되지 않는 경우에도 JavaScript 코드의 어느 곳에나 배치할 수 있습니다.

객체에 {name: "hanzichi", age: 10}와 같은 두 개의 키가 있으면 두 개의 레이블 문이 있을까요? "hanzhichi"와 10을 각각 문으로 취급하지만 문은 인감번호로만 연결될 수 있습니다! (표현식 사이에는 쉼표만 사용할 수 있습니다.) 따라서 다음과 같이 변경해도 괜찮습니다.

var str = '{name: "hanzichi"; age: 10}';
var obj = eval(str); 
console.log(obj); // 10

가면 갈수록 글 앞부분의 코드에서 오류의 원인이 발견되었는데 왜 괄호를 넣으면 해결이 될까요? 간단히 말해서 ()는 명령문을 명령문 표현식이라고 하는 표현식으로 변환합니다. 괄호 안의 코드는 표현식 평가로 변환되어 반환됩니다. 객체 리터럴은 표현식으로 존재해야 합니다.

이 기사에서는 표현에 대해 다루지 않습니다. 표현은 기사 마지막에 있는 링크를 참조하세요. 표현식에는 항상 반환 값이 있다는 점을 기억해 두는 것이 좋습니다. 대부분의 표현식은 ()로 감싸지며, 괄호는 비워둘 수 없습니다. 쉼표로 구분된 표현식이 여러 개 있는 경우, 소위 쉼표 표현식이라 불리며, 마지막 값이 반환됩니다.

위 내용은 JS에서 JSON 문자열을 구문 분석하는 Eval에 대해 편집자가 소개하는 작은 문제입니다. 모두에게 도움이 되기를 바랍니다.