将一个对象转换为字符串

Question

将一个对象转换为字符串

javascriptstringobjectserializationtostring

1202

如何将 JavaScript 对象转换为字符串？

示例：

var o = {a:1, b:2}
console.log(o)
console.log('Item: ' + o)

输出:

对象 { a=1, b=2} // 非常良好易读 :)
条目: [object Object] // 不知道里面是什么 :(

- user680174

7

将字符串转换为什么目的？你是指序列化，以便以后可以从字符串构建对象吗？还是只是为了显示？ - Shadow The Spring Wizard

22

作者已经离开多年，但是在我脑海中阅读了多年后，我猜测问题的入口是console.log(obj)，它会显示带有属性的对象，而console.log('obj: '+obj)则会产生迷惑。 - Danubian Sailor

2

无法简单地将两个对象相加，如果可以这样做，值类型和引用类型之间就没有区别了。 - Nishant Kumar

13

变量 o 等于 {a:1, b:2}；打印出字符串 'Item: ' 和对象 o 的 JSON 字符串形式。 - Nishant Kumar

30

如果是针对控制台输出的话，我建议使用 console.log("Item", obj);。不需要过于复杂的代码。 - soktinpk

显示剩余7条评论

42个回答

173

使用JavaScript的String()函数。

 String(yourobject); //returns [object Object]

或者stringify()

JSON.stringify(yourobject)

- Vikram Pote

39

变量foo的值为{bar: 1}，将它转化为字符串后得到的结果是"[object Object]"。 - Anti Veeranna

1

var foo = {bar: 1}; String(foo['bar']); -> "1"变量foo = {bar: 1}; String(foo['bar']); -> "1" - Vikram Pote

4

如果你想要将整个对象转化为字符串，使用JSON.stringify(foo)。 - Vikram Pote

2

@VikramPote 我认为没有办法从 "[object Object]" 中恢复对象的真实状态。 - techie_28

JSON.stringify并不适用于所有情况，例如一个jQuery引用对象的输入字段，如按钮等。 - techie_28

106

使用 console 时，只需使用逗号而不是 + 就可以保持简单。 + 会尝试将对象转换为字符串，而逗号会在控制台中分别显示它。

示例：

var o = {a:1, b:2};
console.log(o);
console.log('Item: ' + o);
console.log('Item: ', o);   // :)

输出：

Object { a=1, b=2}           // useful
Item: [object Object]        // not useful
Item:  Object {a: 1, b: 2}   // Best of both worlds! :)

参考资料: https://developer.mozilla.org/en-US/docs/Web/API/Console.log

- Luke

很好的解决方案！但是您能告诉我，当您仅仅这样做时会发生什么：console.log(o)？因为如果您尝试记录添加到字符串中的对象，它实际上会调用该对象的toString()方法。 - Gocy015

3

console.log 最终调用了名为 Printer 的东西，规范注明：“实现如何打印参数是由实现决定的”，这意味着每个浏览器都可以以不同的方式完成打印（请参见 https://console.spec.whatwg.org/#printer）。Firefox 会将对象显示为漂亮的字符串并带有颜色。Chrome 将对象显示为可展开查看属性的交互式组。试试吧！ - Luke

2

非常棒的技巧，对于现代Web浏览器可能很好用，但并不是所有JS实现都是100％可靠的。例如，在实现JS引擎的Qt QML中，console.log（'Item：'，o）;的输出仍然是Item：[object Object]。 - Paul Masri-Stone

你可以使用 console.dir(o) 代替 console.log 来打印 JavaScript 对象，而不是将其作为字符串打印出来。在开发者工具中，这使得可以打开对象并检查所有属性，甚至包括数组。(参见：https://developer.mozilla.org/de/docs/Web/API/Console/dir) - EagleT

106

当然，要将一个对象转换为字符串，您可以使用自己的方法，例如：

function objToString (obj) {
    var str = '';
    for (var p in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, p)) {
            str += p + '::' + obj[p] + '\n';
        }
    }
    return str;
}

实际上，以上只是展示了一般的方法；你可能希望使用像http://phpjs.org/functions/var_export:578或http://phpjs.org/functions/var_dump:604这样的东西。

或者，如果你没有使用方法（函数作为对象属性），你可以使用新标准（但不支持旧版本浏览器，尽管你也可以找到一个实用程序来帮助解决这个问题），JSON.stringify()。但是，如果对象使用函数或其他不能序列化为JSON的属性，它将无法工作。

更新:

更现代的解决方案是：

function objToString (obj) {
    let str = '';
    for (const [p, val] of Object.entries(obj)) {
        str += `${p}::${val}\n`;
    }
    return str;
}

或者：

function objToString (obj) {
    return Object.entries(obj).reduce((str, [p, val]) => {
        return `${str}${p}::${val}\n`;
    }, '');
}

- Brett Zamir

39

编辑不要使用此答案，因为它只适用于某些版本的Firefox。其他浏览器不支持它。使用Gary Chambers的解决方案。

toSource()是您要查找的函数，它将以JSON格式写出。

var object = {};
object.first = "test";
object.second = "test2";
alert(object.toSource());

- Gazler

7

在Firefox中进行调试很方便，但toSource()在IE中不起作用。 - Brett Zamir

8

toSource()不是一个被广泛认可的标准，所以无法保证在所有浏览器中都得到支持。 - Gary Chambers

11

谢谢你指出这一点。我将保留我的回答，让那些不知道的人看到。 - Gazler

你可以提供一个多合一药丸给toSource：https://github.com/oliver-moran/toSource.js/blob/master/toSource.js - roland

4

这在任何现代浏览器上都不被支持，为什么会有这么多的赞？难道我错过了什么吗？https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource - Siraj Kakeh

显示剩余5条评论

33

一种选项:

console.log('项目: ' + JSON.stringify(o));

o is printed as a string

另一种选项（正如soktinpk在评论中指出的那样），并且我认为更适合控制台调试:

console.log('项目: ', o);

o is printed as an object, which you could drill down if you had more fields

- nabn

25

这里的解决方案都对我没用。很多人说要使用JSON.stringify，但它会忽略函数并且在测试某些对象和数组时似乎存在问题。

我自己想出了一个方案，在Chrome下可以正常工作。在此分享给大家，以便那些在Google上查找的人能够找到。

//Make an object a string that evaluates to an equivalent object
//  Note that eval() seems tricky and sometimes you have to do
//  something like eval("a = " + yourString), then use the value
//  of a.
//
//  Also this leaves extra commas after everything, but JavaScript
//  ignores them.
function convertToText(obj) {
    //create an array that will later be joined into a string.
    var string = [];

    //is object
    //    Both arrays and objects seem to return "object"
    //    when typeof(obj) is applied to them. So instead
    //    I am checking to see if they have the property
    //    join, which normal objects don't have but
    //    arrays do.
    if (typeof(obj) == "object" && (obj.join == undefined)) {
        string.push("{");
        for (prop in obj) {
            string.push(prop, ": ", convertToText(obj[prop]), ",");
        };
        string.push("}");

    //is array
    } else if (typeof(obj) == "object" && !(obj.join == undefined)) {
        string.push("[")
        for(prop in obj) {
            string.push(convertToText(obj[prop]), ",");
        }
        string.push("]")

    //is function
    } else if (typeof(obj) == "function") {
        string.push(obj.toString())

    //all other values can be done with JSON.stringify
    } else {
        string.push(JSON.stringify(obj))
    }

    return string.join("")
}

编辑：我知道这段代码可以改进，但一直没有时间去做。用户Andrey提出了一个改进在这里并评论说：

这是有一点改变的代码，它可以处理“null”和“undefined”，并且不会添加过多的逗号。

请自行决定是否使用该代码，因为我没有验证过。欢迎在评论中提出任何其他的改进意见。

- Houshalter

你缺少一些 '}'。 - dacopenhagen

2

代码很好，但每个对象/数组末尾都有一个逗号。 - NiCk Newman

22

如果你只是在控制台输出，可以使用console.log('字符串:', obj)。注意逗号。

- Alexandre R. Janini

这在涉及 AJAX 和 deferred 的情况下会带来问题 - console.log 的输出通常会在 AJAX 结束并行地提供数组数据之后显示，这会导致误导性的结果。在这种情况下，克隆或序列化对象是可行的方法：因为我们记录了重复的对象，即使 AJAX 完成其工作，它也会填充“旧”的数据。 - rr-

18

在你知道对象只是布尔值、日期、字符串、数字等情况下，JavaScript的String()函数可以很好地工作。我最近在处理从jQuery的$.each函数传递过来的值时发现这很有用。

例如，以下代码将把“value”中的所有项转换为字符串：

$.each(this, function (name, value) {
  alert(String(value));
});

更多详情请参见:

http://www.w3schools.com/jsref/jsref_string.asp

（注：此内容为原文，无需翻译）

- Jake Drew

或者 var my_string = ''+value+'';。 - John Magnolia

2

這對我來說很有效。我更喜歡這個解決方案，因為對於這樣一個簡單的任務，我不會使用插件。 - Tillito

15

我正在寻找这个，写了一个带有缩进的深度递归函数：

function objToString(obj, ndeep) {
  if(obj == null){ return String(obj); }
  switch(typeof obj){
    case "string": return '"'+obj+'"';
    case "function": return obj.name || obj.toString();
    case "object":
      var indent = Array(ndeep||1).join('\t'), isArray = Array.isArray(obj);
      return '{['[+isArray] + Object.keys(obj).map(function(key){
           return '\n\t' + indent + key + ': ' + objToString(obj[key], (ndeep||1)+1);
         }).join(',') + '\n' + indent + '}]'[+isArray];
    default: return obj.toString();
  }
}

用法：objToString({a: 1, b: {c: "test"}})

- SylvainPV

请注意，如果您想防止具有循环引用的对象进入无限循环，可以在函数中添加if(ndeep > MAX_DEPTH_LEVEL){ return '...'; }，其中MAX_DEPTH_LEVEL是您选择的最大对象层数。 - SylvainPV

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gary Chambers · Accepted Answer

1618

我建议使用JSON.stringify，该函数可以将对象中的变量集合转换为JSON字符串。

var obj = {
  name: 'myObj'
};

JSON.stringify(obj);

大多数现代浏览器原生支持该方法，但对于不支持的浏览器，您可以包含一个JS版本。

- Gary Chambers

7

供参考，IE6和7都不支持此功能。由于IE6用户很少，并且存在活跃的消除运动，所以它并不是太重要......但是仍然有相当多的IE7用户存在（这取决于您的用户群）。 - MikeMurko

39

我遇到了一个“Uncaught TypeError：将循环结构转换为JSON”的错误。即使存在循环引用，我仍希望看到我的对象的字符串表示形式。我该怎么办？ - Pascal Klein

32

如果对象具有函数属性，例如：foo: function () {...}，则这种方法不起作用。 - Brock Adams

2

如果从StackOverflow点击JSON库的链接无法工作，请复制并粘贴到地址栏中。 - f.ardelian

15

你可以使用JSON.stringify(obj, null, 2);以获得更易读的输出结果。 - l.poellabauer

显示剩余5条评论