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

Mozilla 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 Webドキュメントを参照

これを試して ：

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

色はもちろんオプションです。「深さ：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)

以前のコメントの誰かがこれを提案しましたが、私にはうまくいきませんでした。それが別のブラウザーまたは何かで他の誰かのために働くなら、それから称賛！参照用にコードをここに配置します！このようなものをコンソールに出力します：

（これはGitHubの私のライブラリに追加されました）

ここでホイールを再発明します！これらの解決策はどれも私の状況ではうまくいきませんでした。それで、私はすぐにwilsonpageの答えを修正しました。これは、画面に出力するためのものではありません（コンソール、テキストフィールドなど）。これらの状況では正常に機能し、OPが要求したとおりに正常に機能しalertます。ここでの多くの回答alertは、要求されたOPとしての使用に対応していません。とにかく、それはデータ転送用にフォーマットされています。このバージョンはと非常に似た結果を返すようtoSource()です。私はに対してテストしていませんJSON.stringifyが、これはほぼ同じことだと思います。このバージョンはpoly-filに似ているため、どの環境でも使用できます。この関数の結果は、有効なJavaScriptオブジェクト宣言です。

このようなものがすでにSOのどこかにあるかどうか疑いはありませんが、過去の回答を検索するのにしばらく費やすよりも、作成する方が短いだけでした。そして、私がこれについて検索し始めたとき、この質問はグーグルで私のトップヒットだったので。ここに置くと他の人の役に立つかもしれないと思った。

とにかく、オブジェクトにオブジェクトと配列が埋め込まれている場合や、オブジェクトや配列にさらにオブジェクトと配列が埋め込まれている場合でも、この関数の結果はオブジェクトの文字列表現になります。（私はあなたが飲むのが好きだと聞いた？それで、私はあなたの車をクーラーでポンピングした。それから、あなたのクーラーをクーラーでポンピングした。それであなたのクーラーはあなたが冷えている間に飲むことができる。）

配列はの[]代わりに格納される{}ため、キーと値のペアはありません。値のみです。通常の配列のように。したがって、配列と同じように作成されます。

また、すべての文字列（キー名を含む）は引用符で囲まれます。これらの文字列に特殊文字（スペースやスラッシュなど）がない限り、これは必要ありません。しかし、私はこれを検出する気にはなりませんでした。

この結果の文字列は、eval文字列操作とともにvarに使用するか、そのまま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値のオブジェクトのチェックが追加されました。ありがとうBrock Adams

編集：以下は、無限に再帰的なオブジェクトを印刷できるようにするための固定機能です。これはtoSource、FFからの出力toSourceとは異なり、無限再帰を1回出力するため、この関数はすぐに強制終了します。この関数は、上記の関数よりも実行速度が遅いため、上記の関数を編集する代わりに、ここに追加します。これは、どこかにリンクしているオブジェクトを渡すことを計画している場合にのみ必要です。

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と、ひどい例になります。1つは、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、depth：null}）

オブジェクトを文字列に変換して印刷する場合は、

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)。この方法では、JSONを使用した文字列化で回避策を実行する必要はありません。オブジェクトのすべてのプロパティが適切に展開されます。

コンソール内でオブジェクトを表示するもう1つの方法は、を使用することです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> 

JavaScriptのprint_rを介して

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

どこ objectあなたのオブジェクトはですか

または、これをChrome開発ツールの「コンソール」タブで使用できます。

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によって作成された関数内の2番目のtypeofのタイプミスを修正しました。

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

読みやすいタブインデントを使用してオブジェクトを表示できます。