> 웹 프론트엔드 > JS 튜토리얼 > JSON.stringify() 및 JSON.parse()

JSON.stringify() 및 JSON.parse()

Susan Sarandon
풀어 주다: 2024-12-06 16:38:16
원래의
812명이 탐색했습니다.

JSON

JSON(JavaScript Object Notation)은 시스템 간에 복잡한 데이터를 저장하고 전송하기 위한 텍스트 형식입니다. Javascript에는 JSON 텍스트를 객체로 변환하고 JSON 객체를 텍스트로 변환하는 간단한 방법이 포함되어 있습니다.

다음 경우에 유용합니다...

JSON.stringify() 및 JSON.parse()는 JavaScript 개체 및 문자열을 앞뒤로 변환하는 데 사용할 수 있는 함수에 내장되어 있습니다.

여기에는 "아티스트"와 "제목"이라는 두 개의 키가 포함된 앨범 개체 앨범이라는 배열이 있습니다.

let albums = [
{
  "artist" : "Herbie Hancock",
  "title" : "Head Hunters",
},
{
  "artist" : "Beastie Boys",
  "title" : "Pauls Boutique"
},
  {
  "artist" : "The Cramps",
  "title" : "Bad Music for Bad People"
}
];

console.log(albums);
로그인 후 복사

이 코드를 기록하면 다음과 같은 결과가 나옵니다.

// [object Array] (3)
[// [object Object] 
{
  "artist": "Herbie Hancock",
  "title": "Head Hunters"
},// [object Object] 
{
  "artist": "Beastie Boys",
  "title": "Pauls Boutique"
},// [object Object] 
{
  "artist": "The Cramps",
  "title": "Bad Music for Bad People"
}]
로그인 후 복사

console.log(albums);를 호출하면 콘솔은 앨범이 배열임을 확인합니다. 기본적으로 모든 세부 사항을 확장하는 대신 배열을 [object Array]로 요약하고 그 안의 각 항목을 [object Object]로 요약합니다. 이는 각 요소가 객체임을 나타내는 콘솔에 내장된 단축어입니다.

JSON.stringify()

JSON.stringify()는 JavaScript에서 복잡한 배열이나 객체를 가져와 JSON 문자열로 변환합니다.

여기에서는 앨범에 대해 JSON.stringify() 메서드를 호출하여 앨범 배열을 JSON 문자열로 변환합니다.

let albumStrings = JSON.stringify(albums);

console.log(albumStrings);
로그인 후 복사

이 코드를 기록하면 다음과 같은 결과가 나옵니다.

"[{'artist':'Herbie Hancock','title':'Head Hunters'},{'artist':'Beastie 
Boys','title':'Pauls Boutique'},{'artist':'The Cramps','title':'Bad Music 
for Bad People'}]"
로그인 후 복사

이렇게 하면 각각 두 개의 속성이 있는 세 개의 객체 배열이 제공됩니다.

하지만 내가 원한다면 어쩌지..

JSON.stringify() 함수는 최대 3개의 매개변수를 허용합니다.

  1. 값 : JSON 문자열(앨범)로 변환할 값

  2. Replacer(선택 사항): 각 키-값 쌍을 수정할 수 있는 기능(null)

  3. 공간(선택): 레벨당 사용할 공간 수(4)

let albumStringsFormat = JSON.stringify(albums, null, 4);

console.log(albumStringsFormat);
로그인 후 복사

이 코드를 기록하면 다음과 같은 결과가 나옵니다.

"[
    {
        'artist': 'Herbie Hancock',
        'title': 'Head Hunters'
    },
    {
        'artist': 'Beastie Boys',
        'title': 'Pauls Boutique'
    },
    {
        'artist': 'The Cramps',
        'title': 'Bad Music for Bad People'
    }
]"
로그인 후 복사

여기서 각 객체가 이제 표시되는 것을 볼 수 있습니다

JSON.stringify() & JSON.parse()

JSON.parse()

다음으로
문자열을 만들었습니다.

let albumsString = '[{"artist": "Bad Brains", "title": "Bad Brains"}, 
{"artist": "A Tribe Called Quest", "title": "Low End Theory"}, {"artist": 
"Nina Simone", "title": "Wild is the Wind"}]'

console.log(albumsString);
로그인 후 복사

이 코드를 기록하면 다음과 같은 결과가 나옵니다.

"[{'artist': 'Bad Brains', 'title': 'Bad Brains'}, {'artist': 'A Tribe 
Called Quest', 'title': 'Low End Theory'}, {'artist': 'Nina Simone', 
'title': 'Wild is the Wind'}]"
로그인 후 복사

길이를 기록하면

console.log(albumsString.length); // length of string
162
로그인 후 복사

길이가 162라면.

다음으로 구문 분석하면

let albumsObject = JSON.parse(albumsString);

console.log(albumsObject);
로그인 후 복사

이 코드를 기록하면 다음과 같은 결과가 나옵니다.

// [object Array] (3)
[// [object Object] 
{
  "artist": "Bad Brains",
  "title": "Bad Brains"
},// [object Object] 
{
  "artist": "A Tribe Called Quest",
  "title": "Low End Theory"
},// [object Object] 
{
  "artist": "Nina Simone",
  "title": "Wild is the Wind"
}]
로그인 후 복사

이제 물체의 길이를 로그할 때

console.log(albumsObject.length); // length of object
3
로그인 후 복사

기록하세요

console.log(JSON.stringify(albumsObject, null, 4));
로그인 후 복사

이 코드를 기록하면 다음과 같은 결과가 나옵니다.

"[
    {
        'artist': 'Bad Brains',
        'title': 'Bad Brains'
    },
    {
        'artist': 'A Tribe Called Quest',
        'title': 'Low End Theory'
    },
    {
        'artist': 'Nina Simone',
        'title': 'Wild is the Wind'
    }
]"
로그인 후 복사

JSON.stringify() & JSON.parse()

위 내용은 JSON.stringify() 및 JSON.parse()의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿