alert변수 와 같이 JavaScript 객체의 내용을 문자열 형식으로 표시하려면 어떻게합니까 ?

객체를 표시하려는 것과 동일한 형식의 방법입니다.

디버깅 목적으로 객체를 인쇄하려면 다음 코드를 사용하십시오.

var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)

표시됩니다 :

참고 : 개체 만 기록 해야 합니다. 예를 들어, 작동하지 않습니다.

console.log('My object : ' + obj)

참고 ' : log메소드에 쉼표를 사용할 수도 있습니다. 그러면 출력의 첫 번째 행이 문자열이되고 그 후에 오브젝트가 렌더링됩니다.

console.log('My object: ', obj);

기본 JSON.stringify방법을 사용하십시오 . 중첩 객체와 함께 작동하며 모든 주요 브라우저 가이 방법을 지원 합니다.

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

링크 모질라 API 참조 및 다른 예.

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

이 Javascript 오류가 발생하면 사용자 정의 JSON.stringify 대체기를 사용하십시오.

"Uncaught TypeError: Converting circular structure to JSON"

var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

console.dir(object):

지정된 JavaScript 객체의 속성을 대화식으로 표시합니다. 이 목록을 사용하면 펼침 삼각형을 사용하여 자식 개체의 내용을 검사 할 수 있습니다.

이 console.dir()기능은 비표준입니다. 참조 MDN 웹 문서를

이 시도 :

console.log(JSON.stringify(obj))

그러면 stringify 버전의 객체가 인쇄됩니다. 따라서 [object]출력 대신 객체의 내용을 얻습니다.

Firefox (자세한 정보는 @Bojangles 덕분에)에는 Object.toSource()객체를 JSON 및로 인쇄하는 방법이 있습니다 function(){}.

그것은 대부분의 디버깅 목적으로 충분합니다.

경고를 사용하여 객체를 인쇄하려면 다음을 수행하십시오.

alert("myObject is " + myObject.toSource());

각 속성과 해당 값을 문자열 형식으로 인쇄해야합니다.

데이터를 표 형식으로 보려면 다음을 사용할 수 있습니다

console.table(obj);

테이블 열을 클릭하면 테이블을 정렬 할 수 있습니다.

표시 할 열을 선택할 수도 있습니다.

console.table(obj, ['firstName', 'lastName']);

console.table에 대한 자세한 내용은 여기를 참조하십시오.

NodeJS에서는를 사용하여 객체를 인쇄 할 수 있습니다 util.inspect(obj). 깊이를 명시해야합니다. 그렇지 않으면 물체가 얕게 인쇄됩니다.

함수:

var print = function(o){
    var str='';

    for(var p in o){
        if(typeof o[p] == 'string'){
            str+= p + ': ' + o[p]+'; </br>';
        }else{
            str+= p + ': { </br>' + print(o[p]) + '}';
        }
    }

    return str;
}

용법:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

예:

http://jsfiddle.net/WilsonPage/6eqMn/

간단히 사용

JSON.stringify(obj)

예

var args_string = JSON.stringify(obj);
console.log(args_string);

또는

alert(args_string);

또한 자바 스크립트 함수에서 참고는 객체로 간주됩니다.

추가 참고 사항 :

실제로 이와 같은 새로운 속성을 할당하고 console.log에 액세스하거나 경고로 표시 할 수 있습니다

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);

이것을 사용하십시오 :

console.log('print object: ' + JSON.stringify(session));

내가 전에 발견 한 가장 간단하고 가장 간단한 방법은

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}

보너스로 색상을 사용하여 Node.js 로 전체 객체를 인쇄하려면 :

console.dir(object, {depth: null, colors: true})

색상은 물론 선택 사항입니다. 'depth : null'은 전체 객체를 인쇄합니다.

브라우저에서 옵션이 지원되지 않는 것 같습니다.

참고 문헌 :

https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

https://nodejs.org/api/console.html#console_console_dir_obj_options

주의 사항 :이 예제에서 yourObj는 검사하려는 객체를 정의합니다.

먼저 가장 좋아하지는 않지만 가장 많이 사용되는 객체를 표시하는 방법은 다음과 같습니다.

이것은 객체의 내용을 보여주는 사실상의 방법입니다

console.log(yourObj)

다음과 같은 것을 생성합니다 :

가장 좋은 해결책은 객체 키를 살펴본 다음 객체가 무엇을 보유하고 있는지 실제로보고 싶다면 객체 값을 보는 것입니다 ...

console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));

다음과 같이 출력됩니다 : (위 그림 : 객체에 저장된 키 / 값)

ECMAScript 2016 이상을 사용하는 경우이 새로운 옵션도 있습니다.

Object.keys(yourObj).forEach(e => console.log(`key=${e}  value=${yourObj[e]}`));

:이 깔끔한 출력을 생성합니다 : 이전의 대답에 언급 된 솔루션을 console.log(yourObj)표시 너무 많은 매개 변수를하고 원하는 데이터를 표시하는 가장 사용자 친화적 인 방법이 아니다 . 그래서 로깅 키와 값을 별도로 권장합니다.

다음 :

console.table(yourObj)

이전 의견의 누군가가 이것을 제안했지만 결코 효과가 없었습니다. 다른 브라우저 또는 다른 사람을 위해 다른 사람을 위해 작동한다면, kudos! 여전히 코드를 여기에 넣어 참조하십시오! 다음과 같이 콘솔에 출력합니다.

(이것은 GitHub의 내 라이브러리에 추가되었습니다 )

바퀴를 재발 명! 이 솔루션 중 어느 것도 내 상황에 효과가 없었습니다. 그래서 나는 wilsonpage 의 대답을 빨리 닥쳤다 . 이것은 콘솔, 텍스트 필드 등을 통해 화면에 인쇄하기위한 것이 아닙니다. 이러한 상황에서는 제대로 작동하고 OP가 요청 한대로 작동합니다 alert. 여기에 많은 답변 alert이 OP 요청대로 사용하지 않습니다 . 그러나 데이터 전송 형식으로되어 있습니다. 이 버전은와 매우 유사한 결과를 반환하는 것 같습니다 toSource(). 나는에 대해 테스트하지 JSON.stringify않았지만 이것이 거의 같은 것으로 가정합니다. 이 버전은 모든 환경에서 사용할 수 있도록 폴리 파일과 비슷합니다. 이 함수의 결과는 유효한 Javascript 객체 선언입니다.

이 같은 것이 이미 어딘가에 있었는지 의심 할 여지가 없지만 과거 답변을 검색하는 데 시간을 보내는 것보다 짧았습니다. 그리고이 질문은 내가 이것에 대해 검색하기 시작할 때 Google에서 가장 큰 인기를 얻었 기 때문에; 나는 그것을 여기에 두는 것이 다른 사람들을 도울 것이라고 생각했다.

어쨌든이 함수의 결과는 객체에 객체와 배열이 포함되어 있고 객체 나 배열에 객체와 배열이 더 포함되어 있어도 객체의 문자열 표현이됩니다. (나는 당신이 마시는 것을 좋아한다고 들었습니까? 그래서, 나는 당신의 차를 냉각기로 포주했습니다. 그리고 나서, 당신의 냉각기를 냉각기로 포주했습니다.

배열은 []대신에 저장 {}되므로 키 / 값 쌍이 없으며 값만 있습니다. 일반 배열처럼. 따라서 배열처럼 생성됩니다.

또한 모든 문자열 (키 이름 포함)이 인용되므로 문자열에 공백이나 슬래시와 같은 특수 문자가없는 한 필요하지 않습니다. 그러나 나는 여전히 잘 작동하는 따옴표를 제거하기 위해 이것을 감지하고 싶지 않았습니다.

그런 다음이 결과 문자열을 사용하여 eval또는 문자열을 통해 var 조작으로 덤프 할 수 있습니다. 따라서 텍스트에서 객체를 다시 생성하십시오.

function ObjToSource(o){
    if (!o) return 'null';
    var k="",na=typeof(o.length)=="undefined"?1:0,str="";
    for(var p in o){
        if (na) k = "'"+p+ "':";
        if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
        else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
        else str += k + o[p] + ",";
    }
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

내가 모두 엉망으로 만들면 알려주십시오. 내 테스트에서 잘 작동합니다. 또한 유형을 감지하려고 생각할 수있는 유일한 방법 array은의 존재를 확인하는 것입니다 length. Javascript는 실제로 배열을 객체로 저장하기 때문에 실제로 유형을 확인할 수 array없습니다 (이러한 유형은 없습니다!). 다른 사람이 더 나은 방법을 알고 있다면 듣고 싶습니다. 객체에 이름 length이 지정된 속성 이 있으면이 함수는 실수로 객체를 배열로 취급하기 때문입니다.

편집 : null 값 객체에 대한 검사가 추가되었습니다. 감사합니다 브록 아담스

편집 : 아래는 무한 재귀 객체를 인쇄 할 수있는 고정 기능입니다. 무한 재귀를 한 번 인쇄 toSource하기 때문에 FF 에서와 동일하게 인쇄되지 않습니다 toSource. 이 함수는 위의 함수보다 느리게 실행되므로 위의 함수를 편집하는 대신 여기에 추가합니다. 어딘가에 자신에게 다시 연결된 개체를 전달하려는 경우에만 필요합니다.

const ObjToSource=(o)=> {
    if (!o) return null;
    let str="",na=0,k,p;
    if (typeof(o) == "object") {
        if (!ObjToSource.check) ObjToSource.check = new Array();
        for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
        ObjToSource.check.push(o);
    }
    k="",na=typeof(o.length)=="undefined"?1:0;
    for(p in o){
        if (na) k = "'"+p+"':";
        if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
        else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
        else str += k+o[p]+",";
    }
    if (typeof(o) == "object") ObjToSource.check.pop();
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

테스트:

var test1 = new Object();
test1.foo = 1;
test1.bar = 2;

var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;

console.log(ObjToSource(testobject));
console.log(testobject.toSource());

결과:

{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})

참고 : 인쇄 document.body하는 것은 끔찍한 예입니다. 우선, FF는를 사용할 때 빈 객체 문자열을 인쇄합니다 toSource. 그리고 위의 기능을 사용할 때 FF가 발생합니다 SecurityError: The operation is insecure.. 그리고 Chrome에서 충돌합니다 Uncaught RangeError: Maximum call stack size exceeded. 분명히 document.body문자열로 변환되지 않았습니다. 특정 속성에 액세스하기에는 너무 크거나 보안 정책에 위배되기 때문입니다. 내가 여기서 뭔가 엉망이 아니라면 말하지 마라!

전체 길이의 물체를 인쇄하려면

console.log (필수 ( 'util'). inspect (obj, {showHidden : false, 깊이 : null})

객체를 문자열로 변환하여 인쇄하려면

console.log (JSON.stringify (obj));

방법은 다음과 같습니다.

console.log("%o", obj);

pagewil의 답변이 제공하는 객체를 재귀 적으로 인쇄하는 방법이 필요했습니다 (감사합니다!). 특정 수준까지 인쇄하는 방법을 포함하고 간격을 추가하여 현재 수준을 기준으로 올바르게 들여 쓰기하여 읽기 쉽도록 약간 업데이트했습니다.

// Recursive print of object
var print = function( o, maxLevel, level ) {
    if ( typeof level == "undefined" ) {
        level = 0;
    }
    if ( typeof level == "undefined" ) {
        maxLevel = 0;
    }

    var str = '';
    // Remove this if you don't want the pre tag, but make sure to remove
    // the close pre tag on the bottom as well
    if ( level == 0 ) {
        str = '<pre>';
    }

    var levelStr = '';
    for ( var x = 0; x < level; x++ ) {
        levelStr += '    ';
    }

    if ( maxLevel != 0 && level >= maxLevel ) {
        str += levelStr + '...</br>';
        return str;
    }

    for ( var p in o ) {
        if ( typeof o[p] == 'string' ) {
            str += levelStr +
                p + ': ' + o[p] + ' </br>';
        } else {
            str += levelStr +
                p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
        }
    }

    // Remove this if you don't want the pre tag, but make sure to remove
    // the open pre tag on the top as well
    if ( level == 0 ) {
        str += '</pre>';
    }
    return str;
};

용법:

var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

// Recursive of whole object
$('body').append( print(pagewilsObject) ); 

// Recursive of myObject up to 1 level, will only show name 
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) ); 

나는 항상 사용 console.log("object will be: ", obj, obj1)합니다. 이 방법으로 JSON으로 stringify를 사용하여 해결 방법을 수행 할 필요가 없습니다. 객체의 모든 속성이 멋지게 확장됩니다.

콘솔 내에서 객체를 표시하는 다른 방법은을 사용하는 것입니다 JSON.stringify. 아래 예를 확인하십시오.

var gandalf = {
  "real name": "Gandalf",
  "age (est)": 11000,
  "race": "Maia",
  "haveRetirementPlan": true,
  "aliases": [
    "Greyhame",
    "Stormcrow",
    "Mithrandir",
    "Gandalf the Grey",
    "Gandalf the White"
  ]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));

자바 스크립트 기능

<script type="text/javascript">
    function print_r(theObj){ 
       if(theObj.constructor == Array || theObj.constructor == Object){ 
          document.write("<ul>") 
          for(var p in theObj){ 
             if(theObj[p].constructor == Array || theObj[p].constructor == Object){ 
                document.write("<li>["+p+"] => "+typeof(theObj)+"</li>"); 
                document.write("<ul>") 
                print_r(theObj[p]); 
                document.write("</ul>") 
             } else { 
                document.write("<li>["+p+"] => "+theObj[p]+"</li>"); 
             } 
          } 
          document.write("</ul>") 
       } 
    } 
</script>

인쇄 대상

<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script> 

Javascript에서 print_r을 통해

var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

object당신의 개체는 어디에 있습니까

또는 크롬 개발 도구의 "콘솔"탭에서 사용할 수 있습니다.

console.log(object);

객체를 가정 obj = {0:'John', 1:'Foo', 2:'Bar'}

객체의 내용 인쇄

for (var i in obj){
    console.log(obj[i], i);
}

콘솔 출력 (Chrome DevTools) :

John 0
Foo 1
Bar 2

희망이 도움이됩니다!

console.table명확한 객체 형식을 얻는 데 선호 하므로이 객체가 있다고 상상해보십시오.

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

그리고 당신은 아래와 같이 깔끔하고 읽기 쉬운 테이블을 보게 될 것입니다 :

콘솔을 통해 간단하고 빠른 디버깅을 위해 프로젝트에서 항상 사용하는 작은 도우미 기능. Laravel에서 가져온 영감.

/**
 * @param variable mixed  The var to log to the console
 * @param varName string  Optional, will appear as a label before the var
 */
function dd(variable, varName) {
    var varNameOutput;

    varName = varName || '';
    varNameOutput = varName ? varName + ':' : '';

    console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}

용법

dd(123.55); 출력 :

var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj'); 

ES6 템플릿 리터럴 개념을 사용하여 JavaScript 객체의 내용을 문자열 형식으로 표시 할 수도 있습니다.

alert(`${JSON.stringify(obj)}`);

const obj  = {
  "name" : "John Doe",
  "habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);

나는 pagewil의 인쇄 방법을 사용했으며 매우 잘 작동했습니다.

다음은 (느슨한) 들여 쓰기와 고유 한 prop / ob 구분자가있는 약간 확장 된 버전입니다.

var print = function(obj, delp, delo, ind){
    delp = delp!=null ? delp : "\t"; // property delimeter
    delo = delo!=null ? delo : "\n"; // object delimeter
    ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
    var str='';

    for(var prop in obj){
        if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
          var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
          str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
        }else{
          str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
        }
    }
    return str;
};

pagewils 코드의 또 다른 수정 ... 그는 문자열 이외의 것을 인쇄하지 않고 숫자와 부울 필드를 비워두고 megaboss가 만든 함수 내부의 두 번째 유형에 오타를 수정했습니다.

var print = function( o, maxLevel, level )
{
    if ( typeof level == "undefined" )
    {
        level = 0;
    }
    if ( typeof maxlevel == "undefined" )
    {
        maxLevel = 0;
    }

    var str = '';
    // Remove this if you don't want the pre tag, but make sure to remove
    // the close pre tag on the bottom as well
    if ( level == 0 )
    {
        str = '<pre>';   // can also be <pre>
    }

    var levelStr = '<br>';
    for ( var x = 0; x < level; x++ )
    {
        levelStr += '    ';   // all those spaces only work with <pre>
    }

    if ( maxLevel != 0 && level >= maxLevel )
    {
        str += levelStr + '...<br>';
        return str;
    }

    for ( var p in o )
    {
        switch(typeof o[p])
        {
          case 'string':
          case 'number':    // .tostring() gets automatically applied
          case 'boolean':   // ditto
            str += levelStr + p + ': ' + o[p] + ' <br>';
            break;

          case 'object':    // this is where we become recursive
          default:
            str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>';
            break;
        }
    }

    // Remove this if you don't want the pre tag, but make sure to remove
    // the open pre tag on the top as well
    if ( level == 0 )
    {
        str += '</pre>';   // also can be </pre>
    }
    return str;
};

여기 기능이 있습니다.

function printObj(obj) {
console.log((function traverse(tab, obj) {
    let str = "";
    if(typeof obj !== 'object') {
        return obj + ',';
    }
    if(Array.isArray(obj)) {            
        return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ',';
    }
    str = str + '{\n';
    for(var p in obj) {
        str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'\n';
    }
    str = str.slice(0,-2) + str.slice(-1);                
    str = str + tab + '},';
    return str;
}('',obj).slice(0,-1)))};

가독성이있는 탭 들여 쓰기를 사용하여 객체를 표시 할 수 있습니다.