Как отобразить содержимое объекта JavaScript в строковом формате, как когда мы alertпеременная?

В том же формате я хочу отобразить объект.

Если вы хотите напечатать объект для целей отладки, используйте код:

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

Ссылка на Mozilla API Reference и другие примеры.

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

Используйте пользовательский заменитель JSON.stringify, если вы столкнулись с этой ошибкой Javascript

"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 Web Docs

попробуй это :

console.log(JSON.stringify(obj))

Это напечатает строковую версию объекта. Таким образом, вместо [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);

Кроме того, примечание в функциях JavaScript рассматривается как объекты.

В качестве дополнительной заметки:

На самом деле вы можете назначить новое свойство как это и получить к нему доступ к 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})

Цвета, конечно, необязательны, 'глубина: ноль' напечатает полный объект.

Опции не поддерживаются в браузерах.

Ссылки:

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

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

NB. В этих примерах 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)

Кто-то в более раннем комментарии предложил это, однако это никогда не работало для меня. Если это работает для кого-то еще в другом браузере или что-то еще, тогда слава! Я все еще положил код здесь для справки! Будет выводить что-то вроде этого на консоль:

(Это было добавлено в мою библиотеку на GitHub )

Изобретая колесо здесь! Ни одно из этих решений не помогло в моей ситуации. Итак, я быстро подправил ответ wilsonpage . Этот не для печати на экран (через консоль или текстовое поле или что-то еще). В этих ситуациях он отлично работает и работает так, как того требует OP alert. Многие ответы здесь не относятся к использованию alertв соответствии с запросом OP. Во всяком случае, однако, он отформатирован для передачи данных. Эта версия, кажется, возвращает очень похожий результат, как toSource(). Я не проверял JSON.stringify, но я предполагаю, что это примерно то же самое. Эта версия больше похожа на poly-fil, поэтому вы можете использовать ее в любой среде. Результатом этой функции является допустимое объявление объекта Javascript.

Я не сомневаюсь, что что-то подобное уже было где-то на SO, но сделать это было короче, чем тратить время на поиск ответов в прошлом. И так как этот вопрос был моим главным хитом в Google, когда я начал искать об этом; Я подумал, что это может помочь другим.

В любом случае, результатом этой функции будет строковое представление вашего объекта, даже если ваш объект имеет встроенные объекты и массивы, и даже если эти объекты или массивы имеют даже дополнительные встроенные объекты и массивы. (Я слышал, что вы любите пить? Итак, я поставил вашу машину на кулер. А потом я поставил на вашу машину кулер. Итак, ваш кулер может пить, пока вы остываете).

Массивы хранятся []вместо {}и, следовательно, не имеют пар ключ / значение, только значения. Как обычные массивы. Следовательно, они создаются как массивы.

Кроме того, все строки (включая имена ключей) заключены в кавычки, в этом нет необходимости, если только эти строки не имеют специальных символов (например, пробел или косая черта). Но я не хотел обнаруживать это, просто чтобы удалить некоторые цитаты, которые в противном случае работали бы нормально.

Эту результирующую строку можно затем использовать evalили просто выгружать в манипуляции с различными строками. Таким образом, воссоздавая ваш объект снова, из текста.

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эта функция будет ошибочно рассматривать его как массив.

РЕДАКТИРОВАТЬ: Добавлена ​​проверка для объектов с нулевым значением. Спасибо Брок Адамс

РЕДАКТИРОВАТЬ: ниже фиксированная функция, чтобы иметь возможность печатать бесконечно рекурсивные объекты. Это не печатает так же, как 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 (require ('util'). inspect (obj, {showHidden: false, глубина: ноль})

Если вы хотите напечатать объект, преобразовав его в строку, то

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

Вот способ сделать это:

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

Мне нужен был способ рекурсивной печати объекта, который предоставил ответ страницы (спасибо!). Я немного обновил его, чтобы включить способ печати до определенного уровня и добавить интервал, чтобы он был правильно с отступом в зависимости от текущего уровня, на котором мы находимся, чтобы он был более читабельным.

// 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). таким образом, мне не нужно делать обходной путь с stringify с JSON. Все свойства объекта будут расширены.

Другой способ отображения объектов в консоли - с 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));

Функция 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>

Печать объекта

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

через print_r в Javascript

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

где objectтвой объект

или вы можете использовать это в chrome dev tools, вкладка "console":

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

Он может показывать объект, используя вкладку с удобочитаемостью.