Làm cách nào để hiển thị nội dung của một đối tượng JavaScript theo định dạng chuỗi như khi chúng ta alertbiến?

Cách định dạng tương tự tôi muốn hiển thị một đối tượng.

Nếu bạn muốn in đối tượng cho mục đích gỡ lỗi, hãy sử dụng mã:

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

sẽ hiển thị:

Lưu ý: bạn chỉ phải đăng nhập đối tượng. Ví dụ, điều này sẽ không hoạt động:

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

Lưu ý ' : Bạn cũng có thể sử dụng dấu phẩy trong logphương thức, sau đó dòng đầu tiên của đầu ra sẽ là chuỗi và sau đó đối tượng sẽ được hiển thị:

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

Sử dụng JSON.stringifyphương pháp bản địa . Hoạt động với các đối tượng lồng nhau và tất cả các trình duyệt chính hỗ trợ phương pháp này.

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()

Liên kết với Mozilla API Reference và các ví dụ khác.

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

Sử dụng trình thay thế JSON.opesify tùy chỉnh nếu bạn gặp phải lỗi Javascript này

"Uncaught TypeError: Converting circular structure to JSON"

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

console.dir(object):

Hiển thị danh sách tương tác các thuộc tính của một đối tượng JavaScript được chỉ định. Danh sách này cho phép bạn sử dụng các hình tam giác tiết lộ để kiểm tra nội dung của các đối tượng con.

Lưu ý rằng console.dir()tính năng này là không chuẩn. Xem tài liệu web MDN

thử cái này :

console.log(JSON.stringify(obj))

Điều này sẽ in phiên bản chuỗi của đối tượng. Vì vậy, thay vì [object]là một đầu ra, bạn sẽ nhận được nội dung của đối tượng.

Chà, Firefox (nhờ @Bojangles cung cấp thông tin chi tiết) có Object.toSource()phương thức in các đối tượng dưới dạng JSON và function(){}.

Đó là đủ cho hầu hết các mục đích gỡ lỗi, tôi đoán.

Nếu bạn muốn sử dụng cảnh báo, để in đối tượng của mình, bạn có thể làm điều này:

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

Nó nên in từng thuộc tính và giá trị tương ứng của nó ở định dạng chuỗi.

Nếu bạn muốn xem dữ liệu ở định dạng bảng, bạn có thể sử dụng

console.table(obj);

Bảng có thể được sắp xếp nếu bạn bấm vào cột bảng.

Bạn cũng có thể chọn các cột để hiển thị:

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

Bạn có thể tìm thêm thông tin về console.table tại đây

Trong NodeJS bạn có thể in một đối tượng bằng cách sử dụng util.inspect(obj). Hãy chắc chắn để nói rõ độ sâu hoặc bạn sẽ chỉ có một bản in nông của đối tượng.

Chức năng:

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;
}

Sử dụng:

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

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

Thí dụ:

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

Đơn giản chỉ cần sử dụng

JSON.stringify(obj)

Thí dụ

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

Hoặc là

alert(args_string);

Ngoài ra, lưu ý trong các chức năng javascript được coi là đối tượng.

Như một lưu ý thêm:

Trên thực tế, bạn có thể gán thuộc tính mới như thế này và truy cập vào console.log hoặc hiển thị nó trong cảnh báo

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

Dùng cái này:

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

Như đã nói trước đây cách tốt nhất và đơn giản nhất tôi tìm thấy là

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

Để in toàn bộ đối tượng bằng Node.js với màu sắc như một phần thưởng:

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

Màu sắc tất nhiên là tùy chọn, 'độ sâu: null' sẽ in toàn bộ đối tượng.

Các tùy chọn dường như không được hỗ trợ trong trình duyệt.

Người giới thiệu:

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

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

NB: Trong các ví dụ này, yourObj xác định đối tượng bạn muốn kiểm tra.

Trước hết, cách ưa thích nhất nhưng được sử dụng nhiều nhất của tôi để hiển thị một đối tượng:

Đây là cách hiển thị chính xác nội dung của một đối tượng

console.log(yourObj)

sẽ tạo ra một cái gì đó như:

Tôi nghĩ giải pháp tốt nhất là xem qua các Khóa đối tượng và sau đó qua Giá trị đối tượng nếu bạn thực sự muốn xem đối tượng giữ gì ...

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

Nó sẽ xuất ra một cái gì đó như: (hình trên: các khóa / giá trị được lưu trữ trong đối tượng)

Ngoài ra còn có tùy chọn mới này nếu bạn đang sử dụng ECMAScript 2016 hoặc mới hơn:

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

Điều này sẽ tạo ra đầu ra gọn gàng: Giải pháp được đề cập trong câu trả lời trước: console.log(yourObj)hiển thị quá nhiều tham số và không phải là cách thân thiện nhất để hiển thị dữ liệu bạn muốn . Đó là lý do tại sao tôi khuyên bạn nên đăng nhập khóa và sau đó giá trị riêng.

Tiếp theo:

console.table(yourObj)

Một người nào đó trong một bình luận trước đó đã đề xuất cái này, tuy nhiên nó không bao giờ có tác dụng với tôi. Nếu nó hoạt động cho người khác trên một trình duyệt khác hoặc một cái gì đó, thì kudos! Ill vẫn đặt mã ở đây để tham khảo! Sẽ xuất một cái gì đó như thế này đến bàn điều khiển:

(Điều này đã được thêm vào thư viện của tôi tại GitHub )

Phát minh lại bánh xe ở đây! Không có giải pháp nào trong số này làm việc cho tình huống của tôi. Vì vậy, tôi nhanh chóng ghi lại câu trả lời của wilsonpage . Cái này không phải để in ra màn hình (thông qua bảng điều khiển, hoặc trường văn bản hoặc bất cứ thứ gì). Nó hoạt động tốt trong những tình huống đó và hoạt động tốt như OP yêu cầu alert. Nhiều câu trả lời ở đây không giải quyết bằng cách sử dụng alertnhư OP yêu cầu. Dù sao đi nữa, tuy nhiên, nó được định dạng để truyền dữ liệu. Phiên bản này dường như trả về một kết quả rất giống như toSource(). Tôi đã không được thử nghiệm JSON.stringify, nhưng tôi cho rằng đây là điều tương tự. Phiên bản này giống như một poly-fil hơn để bạn có thể sử dụng nó trong bất kỳ môi trường nào. Kết quả của chức năng này là một khai báo đối tượng Javascript hợp lệ.

Tôi sẽ không nghi ngờ nếu một cái gì đó như thế này đã có trên SO ở đâu đó, nhưng nó chỉ ngắn hơn để làm nó hơn là dành một lúc để tìm kiếm câu trả lời trong quá khứ. Và vì câu hỏi này là câu hỏi hàng đầu của tôi trên google khi tôi bắt đầu tìm kiếm về điều này; Tôi nghĩ rằng đặt nó ở đây có thể giúp đỡ người khác.

Dù sao đi nữa, kết quả từ hàm này sẽ là một chuỗi đại diện cho đối tượng của bạn, ngay cả khi đối tượng của bạn có các đối tượng và mảng nhúng, và ngay cả khi các đối tượng hoặc mảng đó có thêm các đối tượng và mảng được nhúng. (Tôi nghe nói bạn thích uống? Vì vậy, tôi đã làm lạnh chiếc xe của bạn bằng một chiếc máy làm mát. Và sau đó, tôi đã làm lạnh chiếc máy làm mát của bạn bằng máy làm mát. Vì vậy, máy làm mát của bạn có thể uống, trong khi bạn mát mẻ.)

Mảng được lưu trữ []thay vì {}và do đó không có cặp khóa / giá trị, chỉ có giá trị. Giống như các mảng thông thường. Do đó, chúng được tạo như mảng làm.

Ngoài ra, tất cả các chuỗi (bao gồm cả tên khóa) được trích dẫn, điều này là không cần thiết trừ khi các chuỗi đó có các ký tự đặc biệt (như dấu cách hoặc dấu gạch chéo). Nhưng, tôi không cảm thấy như phát hiện ra điều này chỉ để xóa một số trích dẫn mà nếu không vẫn hoạt động tốt.

Chuỗi kết quả này sau đó có thể được sử dụng với evalhoặc chỉ đưa nó vào một thao tác chuỗi var thru. Do đó, tạo lại đối tượng của bạn một lần nữa, từ văn bản.

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)+"]";
}

Hãy cho tôi biết nếu tôi làm hỏng tất cả, hoạt động tốt trong thử nghiệm của tôi. Ngoài ra, cách duy nhất tôi có thể nghĩ ra để phát hiện loại arraylà kiểm tra sự hiện diện của length. Bởi vì Javascript thực sự lưu trữ các mảng dưới dạng đối tượng, tôi thực sự không thể kiểm tra loại array(không có loại nào như vậy!). Nếu bất cứ ai khác biết một cách tốt hơn, tôi rất thích nghe nó. Bởi vì, nếu đối tượng của bạn cũng có một thuộc tính được đặt tên lengththì hàm này sẽ coi nhầm nó là một mảng.

EDIT: Đã thêm kiểm tra cho các đối tượng có giá trị null. Cảm ơn Brock Adams

EDIT: Dưới đây là chức năng cố định để có thể in các đối tượng đệ quy vô hạn. Điều này không in giống như toSourcetừ FF vì toSourcesẽ in đệ quy vô hạn một lần, trong đó, chức năng này sẽ giết nó ngay lập tức. Hàm này chạy chậm hơn hàm trên, vì vậy tôi sẽ thêm nó vào đây thay vì chỉnh sửa hàm trên, vì nó chỉ cần thiết nếu bạn định chuyển các đối tượng liên kết lại với chính chúng, ở đâu đó.

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)+"]";
}

Kiểm tra:

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());

Kết quả:

{'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}})

LƯU Ý: Cố gắng in document.bodylà một ví dụ khủng khiếp. Đối với một, FF chỉ in một chuỗi đối tượng trống khi sử dụng toSource. Và khi sử dụng chức năng trên, FF gặp sự cố SecurityError: The operation is insecure.. Và Chrome sẽ sụp đổ Uncaught RangeError: Maximum call stack size exceeded. Rõ ràng, document.bodykhông có nghĩa là được chuyển đổi thành chuỗi. Bởi vì nó quá lớn hoặc chống lại chính sách bảo mật để truy cập vào một số thuộc tính nhất định. Trừ khi, tôi đã làm hỏng một cái gì đó ở đây, hãy nói!

Nếu bạn muốn in đối tượng có độ dài đầy đủ, có thể sử dụng

console.log (yêu cầu ('produc'). tests (obj, {showHidden: false, height: null})

Nếu bạn muốn in đối tượng bằng cách chuyển đổi nó thành chuỗi thì

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

Đây là một cách để làm điều đó:

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

Tôi cần một cách để in đệ quy đối tượng, câu trả lời của pagewil được cung cấp (Cảm ơn!). Tôi đã cập nhật nó một chút để bao gồm một cách để in lên một mức nhất định và thêm khoảng cách để nó được thụt lề đúng dựa trên cấp độ hiện tại mà chúng ta đang ở để dễ đọc hơn.

// 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;
};

Sử dụng:

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) ); 

Tôi luôn luôn sử dụng console.log("object will be: ", obj, obj1). bằng cách này, tôi không cần phải giải quyết vấn đề với chuỗi hóa bằng JSON. Tất cả các thuộc tính của đối tượng sẽ được mở rộng độc đáo.

Một cách khác để hiển thị các đối tượng trong giao diện điều khiển là với JSON.stringify. Kiểm tra ví dụ dưới đây:

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));

Chức năng Javascript

<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>

Đối tượng in

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

thông qua print_r trong Javascript

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

objectđối tượng của bạn ở đâu

hoặc bạn có thể sử dụng công cụ này trong các công cụ phát triển chrome, tab "console":

console.log(object);

Giả sử đối tượng obj = {0:'John', 1:'Foo', 2:'Bar'}

In nội dung của đối tượng

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

Đầu ra bảng điều khiển (Chrome DevTools):

John 0
Foo 1
Bar 2

Mong rằng sẽ giúp!

Tôi thích sử dụng console.tableđể có được định dạng đối tượng rõ ràng, vì vậy hãy tưởng tượng bạn có đối tượng này:

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

Và bạn sẽ thấy một bảng gọn gàng và dễ đọc như thế này dưới đây:

Một chức năng trợ giúp nhỏ tôi luôn sử dụng trong các dự án của mình để gỡ lỗi đơn giản, nhanh chóng thông qua bảng điều khiển. Cảm hứng lấy từ 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) + ')');
}

Sử dụng

dd(123.55); đầu ra:

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

Bạn cũng có thể sử dụng khái niệm bằng chữ mẫu ES6 để hiển thị nội dung của đối tượng JavaScript theo định dạng chuỗi.

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

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

tôi đã sử dụng phương pháp in của pagewil và nó hoạt động rất độc đáo.

đây là phiên bản hơi mở rộng của tôi với các vết lõm (cẩu thả) và các dấu phân cách prop / ob riêng biệt:

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;
};

Một sửa đổi khác của mã pagewils ... anh ta không in ra bất cứ thứ gì ngoài chuỗi và để trống các số và trường boolean và tôi đã sửa lỗi đánh máy trên kiểu thứ hai ngay bên trong hàm như được tạo bởi 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;
};

Đây là chức năng.

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)))};

Nó có thể hiển thị đối tượng bằng cách sử dụng tab thụt lề với khả năng đọc.