예쁜 JSON 출력

한 줄짜리 JSON 출력에 지쳤습니다. 더 이상은 아닙니다! 내장된 예쁜 프린팅JSON.stringify을 활용하세요. 3번째 매개변수를 원하는 간격으로 설정하세요 👍 빤, 즉석 글램✨

const protein = {steak: '🥩', bacon: '🥓'};

JSON.stringify(protein);
// {"steak":"🥩","bacon":"🥓"}

JSON.stringify(protein, null, 2);
/*
{
  "steak": "🥩",
  "bacon": "🥓"
}
*/

탭 간격 😉

하지만 Tab 사람들은 우리는 어떻습니까?? 걱정하지 마세요. 탭 레벨 간격"\t"도 통과할 수 있습니다 😄

const protein = {steak: '🥩', bacon: '🥓'};

JSON.stringify(protein, null, "\t");

/*
{
    "steak": "🥩",
    "bacon": "🥓"
}
*/

"공간" 인수 이해

JSON.stringify의 세 번째 매개변수는 간격을 제어하는 ​​데 사용됩니다. 그것은 당신에게 그 예쁜 문자열 출력을 제공하는 것입니다.

두 가지 유형의 인수(숫자 및 문자열)를 허용합니다.

ㅏ. 숫자

0에서 10까지의 숫자를 들여쓰기로 사용할 수 있습니다.

const protein = {steak: '🥩', bacon: '🥓'};

JSON.stringify(protein, null, 1);
/*
{
 "steak": "🥩",
 "bacon": "🥓"
}
*/

비. 끈

또는 문자열을 들여쓰기로 사용할 수 있습니다. 최대 10자를 허용합니다. 10개 이상을 전달하려고 하면 처음 10자를 사용합니다. 그러니 시스템을 이기려고 하지 마세요 😝

const protein = {steak: '🥩', bacon: '🥓'};

JSON.stringify(protein, null, "I 💛");
/*
{
I 💛"steak": "🥩",
I 💛"bacon": "🥓"
}
*/

2번째 매개변수가 뭐에요🤔

두 번째 매개변수는 replacer 매개변수라고도 합니다. 이를 사용하여 결과를 변환할 수 있습니다.

배열과 함수의 두 가지 유형의 인수를 허용합니다.

ㅏ. 정렬

array 를 전달하면 정말 흥미로운 것을 보여드리고 싶습니다. 이를 사용하여 출력하려는 ​​키-값 쌍을 선별할 수 있습니다.

const protein = {
  steak: '🥩', 
  bacon: '🥓',
  pop: '🥤',
  tea: '🍵',
  shrimp: '🍤',
};

JSON.stringify(protein, ['steak', 'pop'], 2);
/*
{
  "steak": "🥩",
  "pop": "🥤"
}
*/

비. 기능

replacer는 각 항목에 대해 호출됩니다. 따라서 function 를 전달할 수도 있습니다. 즉, 각 항목을 반복할 수 있고 통과할 때마다 함수에 정의된 논리로 조작할 수 있습니다.

다음은 값이 문자열이 아닌 속성을 건너뛰는 예입니다. 즉, 값이 숫자인 항목만 표시하고 싶습니다.

const protein = {
  steak: '🥩', 
  calorie: 271,
  bacon: '🥓',
  sodium: 58,
};

const replacer = function(key, value) {
  if(typeof value !== "string") {
    return value
  }
  return undefined;
}


JSON.stringify(protein, replacer, 2);
/*
{
  "calorie": 271,
  "sodium": 58
}
*/

자원

MDN Web Docs - JSON.stringify

w3schools - JSON.stringify

Stack Overflow: How can I pretty-print JSON using JavaScript?

읽어주셔서 감사합니다 ❤
안녕하세요! | | Facebook | Medium | Blog