JavaScript에서 객체를 문자열로 변환

1. JavaScript 내장 함수 JSON.stringify() 사용
2. console.log() 및 %o 사용
3. Object.enteries()를 사용하여 JavaScript 객체를 문자열로 변환
4. Object.enteries() 및 Object Destructuring을 사용하여 JavaScript 객체를 JSON 문자열로 변환
5. Object.keys()를 사용하여 JavaScript 객체를 JSON 문자열로 변환

JavaScript 객체는 키-값 쌍 형태의 속성으로 구성됩니다. 문자열과 함께 기록하면 [object Object]가 표시됩니다. 아래에 있는 개체 속성을 숨깁니다. 코딩하는 동안 자바스크립트 객체를 문자열 데이터 유형으로 변환해야 합니다. 특히 localstorage 또는 데이터베이스에 데이터를 저장하는 경우. 자바스크립트 객체를 문자열로 변환할 수 있는 다양한 방법이 있습니다.

JavaScript 내장 함수 JSON.stringify() 사용

JSON.stringify()는 자바스크립트 객체를 JSON 문자열로 변환하는 강력하고 일반적으로 사용되는 함수입니다. 더 나은 가독성을 위해 JSON 표현의 스타일을 지정하는 데 사용할 수도 있습니다. 이 함수는 세 가지 매개변수를 허용합니다.

• javascriptObject: 첫 번째 매개변수는 JSON 문자열로 변환해야 하는 소스 JavaScript 객체를 전달하는 필수 매개변수입니다.
• replacerFunction: 두 번째 매개변수는 선택 사항입니다. 소스 자바스크립트 객체를 변경할 수 있는 기능을 허용합니다. 최종 문자열화된 JSON 출력에서 ​​보고자 하는 객체 매개변수를 추출할 수 있습니다. 이 매개변수에 null 값을 전달하면 함수는 문자열화된 JSON 출력에 소스 자바스크립트 객체의 모든 매개변수를 포함합니다.
• numberOfSpaces: 마지막 매개변수는 문자열화가 진행되는 동안 각 매개변수 앞에 도입되는 공백의 수입니다. 숫자 매개변수입니다. 매개변수 값이 1보다 크면 각 개체 매개변수 앞에 하나 이상의 공백이 있는 문자열화된 JSON 형식을 지정합니다. 사람이 읽을 수 있는 형식으로 출력을 만들기 위한 형식화 목적으로만 사용됩니다.

사용법은 다음 코드를 참고하세요.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
console.log('Item: ' + item);
console.log('Item: ' + JSON.stringify(item));
console.log('Item: ' + JSON.stringify(item, null, 2));

출력:

Item: [object Object]
Item: {"id":1,"name":"icy-cream","flavor":"vanilla"}
Item: {
  "id": 1,
  "name": "icy-cream",
  "flavor": "vanilla"
}

첫 번째 로그는 자바스크립트 객체의 마스크된 버전을 출력합니다. 두 번째 로그에는 JSON 개체의 문자열 표현이 있지만 형식이 지정되지 않았습니다. 마지막 로그는 형식이 지정된 버전의 javascript 객체로 매우 읽기 쉽습니다.

console.log() 및 %o 사용

console.log()는 브라우저 콘솔에 값을 기록하기 위한 내장 자바스크립트 함수입니다. 세 개의 매개변수를 허용합니다. 첫 번째 매개변수는 JavaScript 객체입니다. 두 번째 매개변수는 표시할 메시지입니다. 마지막 매개변수는 웹 콘솔에 기록할 메시지의 하위 문자열입니다. 다음 코드는 console.log 메소드를 사용하여 자바스크립트 객체를 문자열로 변환하는 것을 보여줍니다.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
console.log('Item: ' + item);
console.log('Item: %o', item);

출력:

Item: [object Object]
Item: {id: 1, name: "icy-cream", flavor: "vanilla"}

위 코드에서 첫 번째 명령 console.log("Item: " + item); 객체를 [객체 객체]로 기록합니다. 개체 매개변수를 숨깁니다. 반면에 %o를 추가하고 객체를 인수로 전달하면 JavaScript 객체의 내부 내용을 볼 수 있습니다. JavaScript 개체를 기록하기 위해 %O를 사용할 수도 있습니다.

console.log의 %o를 사용하면 콘솔에서 개체를 볼 수 있습니다. 그러나 값을 변환하고 나중에 사용할 수 있도록 일부 변수에 저장하는 데 사용할 수 없습니다.

Object.enteries()를 사용하여 JavaScript 객체를 문자열로 변환

Object.enteries()는 내장된 JavaScript 함수입니다. 객체를 [key, value] 쌍의 배열로 분할합니다. 따라서 이러한 배열을 반복하고 JavaScript 객체를 문자열로 수동으로 변환할 수 있습니다.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
var stringifiedObj = Object.entries(item).map(x => x.join(':')).join('\n');
console.log('Item: ' + item);
console.log(`Item: \n{\n${stringifiedObj}\n}`);

출력:

Item: [object Object]
Item: 
{
id:1
name:icy-cream
flavor:vanilla
}

코드에서 먼저 Object.enteries() 함수를 사용하여 객체를 작은 매개변수 배열로 분할했습니다. 다음으로 자바스크립트 내장 join(":") 함수를 적용하여 하위 배열을 key:value 형식으로 변환합니다. Object.enteries에 의해 출력된 [key, value] 배열을 key:value 형식으로 변환합니다. 그리고 마지막으로 문자열 표현에 JavaScript 객체를 기록합니다. 변환 프로세스를 위해 Object.entries(item).map(x=>x.join(":")).join("\n") 코드 하나만 사용하는 간결한 방법입니다.

Object.enteries() 및 Object Destructuring을 사용하여 JavaScript 객체를 JSON 문자열로 변환

변환을 위해 Object.enteries()를 사용하는 또 다른 방법은 자바스크립트의 object destructuring 개념과 함께 사용하는 것입니다. 이 기술을 사용하여 Object.enteries()에 의해 출력된 키-값 쌍의 배열을 구조화하고 for 루프를 사용하여 반복하고 임시 변수 param 및 value에 할당합니다. 반복 결과를 str 변수에 저장합니다. 마지막으로 console.log()를 사용하여 변수 str을 기록합니다. 코드는 다음과 같습니다.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
var str = '';
for (const [p, val] of Object.entries(item)) {
  str += `${p}:${val}\n`;
}
console.log(
    'Item: ' +
    '{' + str + '}');

출력:

Item: {id:1
name:icy-cream
flavor:vanilla
}

Object.keys()를 사용하여 JavaScript 객체를 JSON 문자열로 변환

JavaScript 객체를 JSON 문자열로 수동 변환하기 위해 JavaScript 내장 함수 Object.keys()를 사용할 수 있습니다. Object.keys()는 JavaScript 객체의 모든 키를 포함하는 배열을 반환합니다. 그런 다음 for 루프를 사용하여 반복하고 JavaScript 객체의 문자열 버전을 형성할 수 있습니다. 최종 결과를 기록하거나 변수에 저장할 수 있습니다. 코드는 다음과 같습니다.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
var str = '';
for (key of Object.keys(item)) {
  str += `${key}:${item[key]}\n`;
}
console.log(
    'Item: ' +
    '{' + str + '}');

출력:

Item: {id:1
name:icy-cream
flavor:vanilla
}

개념은 Object.enteries()를 사용하여 자바스크립트 객체의 매개변수를 가져오는 것과 유사합니다. Object.enteries()는 키-값 쌍을 배열로 반환하는 반면 Object.keys는 출력 배열을 반복하고 자바스크립트 객체의 문자열 표현을 형성하여 추가 처리되는 객체 키의 문자열 배열을 반환합니다.