如何以字符串格式显示JavaScript对象的内容,例如我们alert
变量?
我想要显示对象的格式化方式。
答案 0 :(得分:1843)
使用原生JSON.stringify
方法。
适用于嵌套对象和所有主要浏览器support此方法。
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 replacer 遇到这个Javascript错误
"Uncaught TypeError: Converting circular structure to JSON"
答案 1 :(得分:890)
使用Firefox
如果您想打印对象以进行调试,我建议您安装Firebug for Firefox并使用代码:
console.log(obj)
使用Chrome
var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)
将显示
console.log('My object : ' + obj)
答案 2 :(得分:378)
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
答案 3 :(得分:112)
console.dir(object)
:
显示指定JavaScript对象属性的交互式列表。此列表允许您使用显示三角形来检查子对象的内容。
请注意,console.dir()
功能不合标准。见MDN Web Docs
答案 4 :(得分:68)
console.log(JSON.stringify(obj))
这将打印对象的stringify版本。因此,您将获得对象的内容而不是[object]
作为输出。
答案 5 :(得分:64)
好吧,Firefox(感谢@Bojangles获取详细信息)有Object.toSource()
方法,可以将对象打印为JSON和function(){}
。
这对于大多数调试来说已经足够了,我想。
答案 6 :(得分:50)
如果您想使用警报,要打印您的对象,您可以这样做:
alert("myObject is " + myObject.toSource());
它应该以字符串格式打印每个属性及其对应的值。
答案 7 :(得分:33)
在NodeJS中,您可以使用util.inspect(obj)
打印对象。请务必说明深度,否则您只能打印浅物体。
答案 8 :(得分:32)
如果您希望以表格格式查看数据,可以使用
console.table(obj);
如果单击表格列,则可以对表进行排序。
您还可以选择要显示的列:
console.table(obj, ['firstName', 'lastName']);
您可以找到有关console.table here
的更多信息答案 9 :(得分:31)
<强>功能:强>
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) );
示例:强>
答案 10 :(得分:18)
正如之前所说的最好,最简单的方式我发现
var getPrintObject=function(object)
{
return JSON.stringify(object);
}
答案 11 :(得分:17)
使用此:
console.log('print object: ' + JSON.stringify(session));
答案 12 :(得分:17)
使用 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
答案 13 :(得分:15)
如果您想打印其全长物体,可以使用
console.log(require(&#39; util&#39;)。inspect(obj,{showHidden:false,depth:null})
如果要通过将对象转换为字符串来打印对象,则
的console.log(JSON.stringify(OBJ));
答案 14 :(得分:11)
我需要一种递归打印对象的方法,提供了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) );
答案 15 :(得分:10)
(这已添加到我的图书馆GitHub)
在这里重新发明轮子!这些解决方案都不适用于我的情况。所以,我很快就抄写了pagewil的答案。这个不是用于打印到屏幕(通过控制台,或文本字段或其他)。然而,它是用于数据传输的。此版本似乎返回与toSource()
非常相似的结果。我没试过JSON.stringify
,但我认为这是一回事。此函数的结果是一个有效的Javascript对象声明。
我不怀疑这样的事情是否已经出现在某个地方,但它只是缩短了时间而不是花一些时间来搜索过去的答案。而且当我开始搜索这个问题时,这个问题是谷歌的热门话题。我认为把它放在这里可能有助于其他人。
无论如何,此函数的结果将是对象的字符串表示形式,即使您的对象具有嵌入的对象和数组,即使这些对象或数组具有更多的嵌入对象和数组。 (我听说你喜欢喝酒?所以,我用冷却器给你的车拉了个屁。然后,我用冷却器给你的冷却器拉了个屁。所以,你的冷却器可以喝,而你很酷。)
数组与[]
而不是{}
一起存储,因此没有键/值对,只有值。像常规数组一样。因此,它们就像数组一样被创建。
此外,引用了所有字符串(包括键名),除非这些字符串具有特殊字符(如空格或斜杠),否则不需要这样做。但是,我不想发现这只是为了删除一些原本仍能正常工作的报价。
然后,这个结果字符串可以与eval
一起使用,或者只是将它转储到var thru字符串操作中。因此,请从文本中重新创建对象。
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
的属性,那么此函数会错误地将其视为数组。
编辑:添加了对空值对象的检查。谢谢Brock Adams
编辑:下面是能够打印无限递归对象的固定函数。这与FF中的toSource
打印不同,因为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
并不意味着转换为字符串。因为它要么太大,要么违反安全策略来访问某些属性。除非,我搞砸了一些事情,请告诉我们!
答案 16 :(得分:7)
您还可以使用ES6模板文字概念以字符串格式显示JavaScript对象的内容。
alert(`${JSON.stringify(obj)}`);
const obj = {
"name" : "John Doe",
"habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);
答案 17 :(得分:6)
我认为最好的解决方案是先查看“对象键”,然后查看“对象值”,如果您真的想查看对象的内容...
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)
有人在较早的评论中提出了这个建议,但是它对我没有用。如果它确实适用于其他浏览器或其他工具上的其他人,则表示荣誉!病态的代码仍然放在这里供参考! 将这样输出到控制台:
注意:这是显示对象内容的实际方式
console.log(yourObj)
答案 18 :(得分:6)
最简单的方法:
console.log(obj);
或者留言:
console.log("object is: %O", obj);
您传递的第一个对象可以包含一个或多个格式说明符。格式说明符由百分号(%)后跟一个表示要应用的格式的字母组成。
答案 19 :(得分:6)
我总是使用console.log("object will be: ", obj, obj1)
。
这样我就不需要使用带有JSON的stringify来解决这个问题。
该对象的所有属性都将很好地扩展。
答案 20 :(得分:5)
var list = function(object) {
for(var key in object) {
console.log(key);
}
}
其中object
是您的对象
或者你可以在chrome dev工具,“console”标签中使用它:
console.log(object);
答案 21 :(得分:5)
假设对象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
希望有所帮助!
答案 22 :(得分:5)
这是一种方法:
console.log("%o", obj);
答案 23 :(得分:5)
在控制台中显示对象的另一种方法是使用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));
答案 24 :(得分:5)
只需使用
JSON.stringify(obj)
示例
var args_string = JSON.stringify(obj);
console.log(args_string);
或
alert(args_string);
还将javascript函数中的注释视为对象。
实际上,您可以像这样分配新属性
foo.moo = "stackoverflow";
console.log(foo.moo);
答案 25 :(得分: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>
答案 26 :(得分:3)
我总是在我的项目中使用一个小辅助函数,通过控制台进行简单,快速的调试。 来自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) + ')');
}
<强>用法强>
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');
答案 27 :(得分:2)
pagewils代码的另一个修改...他不打印除字符串以外的任何内容,并将数字和布尔字段留空,我修改了由megaboss创建的函数内部的第二种类型的拼写错误。 / p>
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;
};
答案 28 :(得分:2)
这里的功能。
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)))};
它可以使用带有可读性的制表符缩进显示对象。
答案 29 :(得分:2)
我使用了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;
};
答案 30 :(得分:2)
我更喜欢使用console.table
来获得清晰的对象格式,因此,假设您有此对象:
const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};
答案 31 :(得分:1)
console.log()在调试对象方面做得很好,但是如果您希望将对象打印到页面内容,这是我想出的最简单的方法来模仿PHP的print_r( )。许多其他答案都希望重新发明轮子,但是在JavaScript的JSON.stringify()和HTML的
标记之间,您可以找到所需的内容。
var obj = { name: 'The Name', contact: { email: 'thename@gmail.com', tel: '123456789' }}; $('body').append('<pre>'+JSON.stringify(obj, null, 4)+'</pre>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
答案 32 :(得分:1)
如果您正在寻找Node.js的内衬...
console.log("%o", object);
答案 33 :(得分:1)
要使字符串而不包含包含重复引用(在许多地方对同一对象的引用)(包括循环引用)的对象提供多余信息,请在{strong> replacer 中使用JSON.stringify
(如摘要所示)
let s = JSON.stringify(obj, refReplacer(), 4);
function refReplacer() {
let m = new Map(), v= new Map(), init = null;
return function(field, value) {
let p= m.get(this) + (Array.isArray(this) ? `[${field}]` : '.' + field);
let isComplex= value===Object(value)
if (isComplex) m.set(value, p);
let pp = v.get(value)||'';
let path = p.replace(/undefined\.\.?/,'');
let val = pp ? `#REF:${pp[0]=='[' ? '$':'$.'}${pp}` : value;
!init ? (init=value) : (val===init ? val="#REF:$" : 0);
if(!pp && isComplex) v.set(value, path);
return val;
}
}
// ---------------
// TEST
// ---------------
// gen obj with duplicate references
let a = { a1: 1, a2: 2 };
let b = { b1: 3, b2: "4" };
let obj = { o1: { o2: a }, b, a }; // duplicate reference
a.a3 = [1,2,b]; // circular reference
b.b3 = a; // circular reference
let s = JSON.stringify(obj, refReplacer(), 4);
console.log(s);
alert(s);
此解决方案基于this(此处有更多信息),为每个对象值创建了JSONPath类似路径,如果同一对象出现两次(或多次),它将使用对此路径的引用来引用该对象,例如#REF:$.bar.arr[3].foo
(其中$
表示主要对象)而不是“渲染”整个对象(冗余程度较低)
奖励:倒置
function parseRefJSON(json) {
let objToPath = new Map();
let pathToObj = new Map();
let o = JSON.parse(json);
let traverse = (parent, field) => {
let obj = parent;
let path = '#REF:$';
if (field !== undefined) {
obj = parent[field];
path = objToPath.get(parent) + (Array.isArray(parent) ? `[${field}]` : `${field?'.'+field:''}`);
}
objToPath.set(obj, path);
pathToObj.set(path, obj);
let ref = pathToObj.get(obj);
if (ref) parent[field] = ref;
for (let f in obj) if (obj === Object(obj)) traverse(obj, f);
}
traverse(o);
return o;
}
// ------------
// TEST
// ------------
let s = `{
"o1": {
"o2": {
"a1": 1,
"a2": 2,
"a3": [
1,
2,
{
"b1": 3,
"b2": "4",
"b3": "#REF:$.o1.o2"
}
]
}
},
"b": "#REF:$.o1.o2.a3[2]",
"a": "#REF:$.o1.o2"
}`;
console.log('Open Chrome console to see nested fields');
let obj = parseRefJSON(s);
console.log(obj);
答案 34 :(得分:1)
如果您正在寻找能够返回任何javascript对象的美化字符串的内容,请查看https://github.com/fresheneesz/beautinator。一个例子:
var result = beautinator({ "font-size": "26px","font-family": "'Open Sans', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","word-break": "break-word"}})
console.log(result)
结果:
{ "font-size": "26px",
"font-family": "'Open Sans', sans-serif",
color: "white", overflow: "hidden",
padding: "4px 4px 4px 8px",
Text: { display: "block", width: "100%",
"text-align": "center", "padding-left": "2px",
"word-break": "break-word"
}
}
如果你的对象中有函数,它甚至可以工作。
答案 35 :(得分:0)
它在浏览器中不起作用,并且仅当您要获取对象的有效JS表示而不是JSON时才需要。它只是运行节点内联评估
var execSync = require('child_process').execSync
const objectToSource = (obj) =>
execSync('node -e \'console.log(JSON.parse(`' + JSON.stringify(obj) + '`))\'', { encoding: 'utf8' })
console.log(objectToSource({ a: 1 }))
答案 36 :(得分:0)
答案 37 :(得分:0)
在ES2015中,使用shorthand property declaration syntax作为对象文字,可以记录对象,同时还可以简洁地保留变量名:
console.log("bwib:", bwib, "bwab:", bwab, "bwob": bwob) // old way A
console.log({bwib: bwib, bwab: bwab, bwob: bwob}) // old way B
console.log({bwib, bwab, bwob}) // ES2015+ way
答案 38 :(得分:0)
显示对象内容的一种简单方法是使用console.log,如下所示
console.log("Object contents are ", obj);
请注意,我没有使用'+'来连接对象。如果我使用'+',那么我只会得到对象的字符串表示形式,类似于[Object object]。
答案 39 :(得分:-2)
您可以使用我的功能
使用数组或字符串或它提醒内容的对象调用此函数。
功能
function print_r(printthis, returnoutput) {
var output = '';
if($.isArray(printthis) || typeof(printthis) == 'object') {
for(var i in printthis) {
output += i + ' : ' + print_r(printthis[i], true) + '\n';
}
}else {
output += printthis;
}
if(returnoutput && returnoutput == true) {
return output;
}else {
alert(output);
}
}
用法的
var data = [1, 2, 3, 4];
print_r(data);
答案 40 :(得分:-2)
似乎简单的for...in
无法解决问题,尤其是当我们想要解决自定义,主机,本机或CSSOM对象时。此外,我们在这里谈论调试,谁知道我们何时何地需要它!
我的小型库可以处理这样的对象:
obj2
|__ foo = 'bar'
|__ loop2 = obj2
| :
|__ another = obj1
|__ a1 = 1
|__ b1 = 'baz'
|__ loop1 = obj1
| :
|__ c1 = true
|__ d1 = ''
|__ e1 = [1,2,3]
并将它们呈现出色彩鲜明的形象,如:
但请看那里:
通过一些预防措施,甚至可以解析document.body
!