JSON.parse() 및 JSON.stringify() 사용 방법

소개

모든 최신 브라우저에서 사용할 수 있는 JSON 개체에는 JSON 형식의 콘텐츠를 처리하는 두 가지 유용한 방법인 parse 및 stringify가 있습니다.

JSON.구문 분석()

JSON.parse()는 JSON 문자열을 받아 JavaScript 객체로 변환합니다.

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr);

console.log(userObj);

이 코드를 실행하면 다음과 같은 출력이 생성됩니다.

Output
{name: 'Sammy', email: 'sammy@example.com', plan: 'Pro'}
  email: "sammy@example.com"
  name: "Sammy"
  plan: "Pro"

후행 쉼표는 JSON에서 유효하지 않으므로 JSON.parse()는 전달된 문자열에 후행 쉼표가 있는 경우 오류를 발생시킵니다.

JSON.parse()는 반환되기 전에 개체 값을 변환할 수 있는 두 번째 인수로 함수를 사용할 수 있습니다.

여기서 객체의 값은 parse 메서드의 반환된 객체에서 대문자로 변환됩니다.

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

console.log(userObj);

이 코드를 실행하면 다음과 같은 출력이 생성됩니다.

Output
{name: 'SAMMY', email: 'SAMMY@EXAMPLE.COM', plan: 'PRO'}
  email: "SAMMY@EXAMPLE.COM"
  name: "SAMMY"
  plan: "PRO"

값이 대문자로 변환되었습니다.

JSON.문자열화()

JSON.stringify()는 JavaScript 객체를 받아 JSON 문자열로 변환합니다.

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStr = JSON.stringify(userObj);

console.log(userStr);

이 코드를 실행하면 다음과 같은 출력이 생성됩니다.

Output
{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}

JSON.stringify()는 두 개의 추가 인수를 사용할 수 있습니다. 첫 번째는 replacer 함수입니다. 두 번째는 반환된 문자열에서 공백으로 사용할 String 또는 Number 값입니다.

undefined로 반환된 모든 값은 반환된 문자열에서 제외되므로 replacer 함수를 사용하여 값을 필터링할 수 있습니다.

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

let userStrReplacer = JSON.stringify(userObj, replacer);

console.log(userStrReplacer);

이 코드를 실행하면 다음과 같은 출력이 생성됩니다.

Output
{"name":"Sammy","plan":"Pro"}

email 키-값 쌍이 개체에서 제거되었습니다.

그리고 공백 인수가 전달된 예:

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStrSpace = JSON.stringify(user, null, '...');

console.log(userStrSpace);

이 코드를 실행하면 다음과 같은 출력이 생성됩니다.

Output
{
..."name": "Sammy",
..."email": "sammy@example.com",
..."plan": "Pro"
}

들여쓰기가 ...로 대체되었습니다.

결론

이 자습서에서는 JSON.parse() 및 JSON.stringify() 메서드를 사용했습니다. Javascript에서 JSON으로 작업하는 방법에 대해 자세히 알아보려면 JavaScript에서 JSON으로 작업하는 방법 자습서를 확인하십시오.

JavaScript 코딩에 대한 자세한 내용은 연습 및 프로그래밍 프로젝트에 대한 JavaScript 주제 페이지를 살펴보십시오.