Comment puis-je convertir un objet JavaScript en chaîne?

Exemple:

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

Production:

Object {a = 1, b = 2} // très belle sortie lisible :)
Item: [objet Object] // aucune idée de ce qu'il y a à l'intérieur :(

Je recommanderais d'utiliser JSON.stringify, qui convertit l'ensemble des variables de l'objet en une chaîne JSON. La plupart des navigateurs modernes prennent en charge cette méthode de manière native, mais pour ceux qui ne le font pas, vous pouvez inclure une version JS :

var obj = {
  name: 'myObj'
};

JSON.stringify(obj);

Utilisation javascript String () fonction

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

ou stringify ()

JSON.stringify(yourobject)

Bien sûr, pour convertir un objet en chaîne, vous devez soit utiliser votre propre méthode, telle que:

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

En fait, ce qui précède montre juste l'approche générale; vous souhaiterez peut-être utiliser quelque chose comme http://phpjs.org/functions/var_export:578 ou http://phpjs.org/functions/var_dump:604

ou, si vous n'utilisez pas de méthodes (fonctions en tant que propriétés de votre objet), vous pourrez peut-être utiliser le nouveau standard (mais pas implémenté dans les navigateurs plus anciens, bien que vous puissiez trouver un utilitaire pour vous y aider également), JSON .stringify (). Mais encore une fois, cela ne fonctionnera pas si l'objet utilise des fonctions ou d'autres propriétés qui ne sont pas sérialisables en JSON.

Pour consolerester simple avec , vous pouvez simplement utiliser une virgule au lieu d'un +. Le +va essayer de convertir l'objet en une chaîne, tandis que la virgule l'affichera séparément dans la console.

Exemple:

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

Production:

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

Référence: https://developer.mozilla.org/en-US/docs/Web/API/Console.log

EDIT N'utilisez pas cette réponse car elle ne fonctionne pas dans Internet Explorer. Utilisez Gary Chambers solution .

toSource () est la fonction que vous recherchez qui l'écrira en JSON.

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

Une option :

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

Une autre option (comme l' a souligné soktinpk dans les commentaires), et mieux pour le débogage de la console IMO:

console.log('Item: ', o);

Aucune des solutions ici n'a fonctionné pour moi. JSON.stringify semble être ce que beaucoup de gens disent, mais il coupe les fonctions et semble assez cassé pour certains objets et tableaux que j'ai essayés lors du test.

J'ai créé ma propre solution qui fonctionne au moins dans Chrome. Le publier ici pour que toute personne qui le recherche sur Google puisse le trouver.

//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("")
}

EDIT: Je sais que ce code peut être amélioré, mais je n'ai jamais réussi à le faire. L'utilisateur andrey a suggéré une amélioration ici avec le commentaire:

Voici un peu de code modifié, qui peut gérer 'null' et 'undefined', et n'ajoute pas non plus de virgules excessives.

Utilisez-le à vos risques et périls car je ne l'ai pas vérifié du tout. N'hésitez pas à suggérer des améliorations supplémentaires en tant que commentaire.

Si vous sortez simplement sur la console, vous pouvez utiliser console.log('string:', obj). Remarquez la virgule .

Dans les cas où vous savez que l'objet est juste un booléen, une date, une chaîne, un nombre, etc. La fonction javascript String () fonctionne très bien. J'ai récemment trouvé cela utile pour gérer les valeurs provenant de la fonction $ .each de jquery.

Par exemple, ce qui suit convertirait tous les éléments de "valeur" en une chaîne:

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

Plus de détails ici:

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

var obj={
name:'xyz',
Address:'123, Somestreet'
 }
var convertedString=JSON.stringify(obj) 
 console.log("literal object is",obj ,typeof obj);
 console.log("converted string :",convertedString);
 console.log(" convertedString type:",typeof convertedString);

Je cherchais cela, et j'en ai écrit une profonde récursive avec indentation:

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

Utilisation: objToString({ a: 1, b: { c: "test" } })

Si vous souhaitez simplement voir l'objet à déboguer, vous pouvez utiliser

var o = {a:1, b:2} 
console.dir(o)

1.

JSON.stringify(o);

Élément: {"a": "1", "b": "2"}

2.

var o = {a:1, b:2};
var b=[]; Object.keys(o).forEach(function(k){b.push(k+":"+o[k]);});
b="{"+b.join(', ')+"}";
console.log('Item: ' + b);

Élément: {a: 1, b: 2}

Les méthodes JSON sont assez inférieures à la primitive .toSource () du moteur Gecko.

Voir la réponse de l'article SO pour les tests de comparaison.

De plus, la réponse ci-dessus fait référence à http://forums.devshed.com/javascript-development-115/tosource-with-arrays-in-ie-386109.html qui, comme JSON, (que l'autre article http: // www.davidpirek.com/blog/object-to-string-how-to-deserialize-json utilise via "ExtJs JSON encode code source" ) ne peut pas gérer les références circulaires et est incomplet. Le code ci-dessous montre ses limites (usurpation) (corrigées pour gérer les tableaux et les objets sans contenu).

( lien direct vers le code dans //forums.devshed.com/ ... / tosource-with-arrays-in-ie-386109 )

javascript:
Object.prototype.spoof=function(){
    if (this instanceof String){
      return '(new String("'+this.replace(/"/g, '\\"')+'"))';
    }
    var str=(this instanceof Array)
        ? '['
        : (this instanceof Object)
            ? '{'
            : '(';
    for (var i in this){
      if (this[i] != Object.prototype.spoof) {
        if (this instanceof Array == false) {
          str+=(i.match(/\W/))
              ? '"'+i.replace('"', '\\"')+'":'
              : i+':';
        }
        if (typeof this[i] == 'string'){
          str+='"'+this[i].replace('"', '\\"');
        }
        else if (this[i] instanceof Date){
          str+='new Date("'+this[i].toGMTString()+'")';
        }
        else if (this[i] instanceof Array || this[i] instanceof Object){
          str+=this[i].spoof();
        }
        else {
          str+=this[i];
        }
        str+=', ';
      }
    };
    str=/* fix */(str.length>2?str.substring(0, str.length-2):str)/* -ed */+(
        (this instanceof Array)
        ? ']'
        : (this instanceof Object)
            ? '}'
            : ')'
    );
    return str;
  };
for(i in objRA=[
    [   'Simple Raw Object source code:',
        '[new Array, new Object, new Boolean, new Number, ' +
            'new String, new RegExp, new Function, new Date]'   ] ,

    [   'Literal Instances source code:',
        '[ [], {}, true, 1, "", /./, function(){}, new Date() ]'    ] ,

    [   'some predefined entities:',
        '[JSON, Math, null, Infinity, NaN, ' +
            'void(0), Function, Array, Object, undefined]'      ]
    ])
alert([
    '\n\n\ntesting:',objRA[i][0],objRA[i][1],
    '\n.toSource()',(obj=eval(objRA[i][1])).toSource(),
    '\ntoSource() spoof:',obj.spoof()
].join('\n'));

qui affiche:

testing:
Simple Raw Object source code:
[new Array, new Object, new Boolean, new Number, new String,
          new RegExp, new Function, new Date]

.toSource()
[[], {}, (new Boolean(false)), (new Number(0)), (new String("")),
          /(?:)/, (function anonymous() {}), (new Date(1303248037722))]

toSource() spoof:
[[], {}, {}, {}, (new String("")),
          {}, {}, new Date("Tue, 19 Apr 2011 21:20:37 GMT")]

et

testing:
Literal Instances source code:
[ [], {}, true, 1, "", /./, function(){}, new Date() ]

.toSource()
[[], {}, true, 1, "", /./, (function () {}), (new Date(1303248055778))]

toSource() spoof:
[[], {}, true, 1, ", {}, {}, new Date("Tue, 19 Apr 2011 21:20:55 GMT")]

et

testing:
some predefined entities:
[JSON, Math, null, Infinity, NaN, void(0), Function, Array, Object, undefined]

.toSource()
[JSON, Math, null, Infinity, NaN, (void 0),
       function Function() {[native code]}, function Array() {[native code]},
              function Object() {[native code]}, (void 0)]

toSource() spoof:
[{}, {}, null, Infinity, NaN, undefined, {}, {}, {}, undefined]

Il y a en fait une option simple (pour les navigateurs récents et Node.js) manquante dans les réponses existantes:

console.log('Item: %o', o);

Je préférerais cela car il JSON.stringify()a certaines limites (par exemple avec des structures circulaires).

Il semble que JSON accepte le deuxième paramètre qui pourrait aider avec les fonctions - remplaçant , cela résout le problème de la conversion de la manière la plus élégante:

JSON.stringify(object, (key, val) => {
    if (typeof val === 'function') {
      return String(val);
    }
    return val;
  });

Si vous ne vous souciez que des chaînes, des objets et des tableaux:

function objectToString (obj) {
        var str = '';
        var i=0;
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                if(typeof obj[key] == 'object')
                {
                    if(obj[key] instanceof Array)
                    {
                        str+= key + ' : [ ';
                        for(var j=0;j<obj[key].length;j++)
                        {
                            if(typeof obj[key][j]=='object') {
                                str += '{' + objectToString(obj[key][j]) + (j > 0 ? ',' : '') + '}';
                            }
                            else
                            {
                                str += '\'' + obj[key][j] + '\'' + (j > 0 ? ',' : ''); //non objects would be represented as strings
                            }
                        }
                        str+= ']' + (i > 0 ? ',' : '')
                    }
                    else
                    {
                        str += key + ' : { ' + objectToString(obj[key]) + '} ' + (i > 0 ? ',' : '');
                    }
                }
                else {
                    str +=key + ':\'' + obj[key] + '\'' + (i > 0 ? ',' : '');
                }
                i++;
            }
        }
        return str;
    }

stringify-objectest une bonne bibliothèque npm créée par l'équipe yeoman: https://www.npmjs.com/package/stringify-object

npm install stringify-object

puis:

const stringifyObject = require('stringify-object');
stringifyObject(myCircularObject);

Évidemment, c'est intéressant seulement si vous avez un objet circulaire qui échouerait avec JSON.stringify();

Jetez un oeil au plugin jQuery-JSON

À la base, il utilise JSON.stringify mais revient à son propre analyseur si le navigateur ne l'implémente pas.

Comme firefox ne stringifie pas un objet en tant qu'objet écran; si vous voulez avoir le même résultat tel que JSON.stringify(obj):

function objToString (obj) {
    var tabjson=[];
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            tabjson.push('"'+p +'"'+ ':' + obj[p]);
        }
    }  tabjson.push()
    return '{'+tabjson.join(',')+'}';
}

Pour les objets non imbriqués:

Object.entries(o).map(x=>x.join(":")).join("\r\n")

var o = {a:1, b:2};

o.toString=function(){
  return 'a='+this.a+', b='+this.b;
};

console.log(o);
console.log('Item: ' + o);

Étant donné que Javascript v1.0 fonctionne partout (même IE), il s'agit d'une approche native et permet une apparence très personnalisée de votre objet lors du débogage et de la production https://developer.mozilla.org/en/docs/Web/JavaScript/Reference / Global_Objects / Object / toString

Exemple utile

var Ship=function(n,x,y){
  this.name = n;
  this.x = x;
  this.y = y;
};
Ship.prototype.toString=function(){
  return '"'+this.name+'" located at: x:'+this.x+' y:'+this.y;
};

alert([new Ship('Star Destroyer', 50.001, 53.201),
new Ship('Millennium Falcon', 123.987, 287.543),
new Ship('TIE fighter', 83.060, 102.523)].join('\n'));//now they can battle!
//"Star Destroyer" located at: x:50.001 y:53.201
//"Millennium Falcon" located at: x:123.987 y:287.543
//"TIE fighter" located at: x:83.06 y:102.523

Aussi, en bonus

function ISO8601Date(){
  return this.getFullYear()+'-'+(this.getMonth()+1)+'-'+this.getDate();
}
var d=new Date();
d.toString=ISO8601Date;//demonstrates altering native object behaviour
alert(d);
//IE6   Fri Jul 29 04:21:26 UTC+1200 2016
//FF&GC Fri Jul 29 2016 04:21:26 GMT+1200 (New Zealand Standard Time)
//d.toString=ISO8601Date; 2016-7-29

Si vous pouvez utiliser lodash, vous pouvez le faire de cette façon:

> var o = {a:1, b:2};
> '{' + _.map(o, (value, key) => key + ':' + value).join(', ') + '}'
'{a:1, b:2}'

Avec lodash, map()vous pouvez également parcourir les objets. Cela mappe chaque entrée de clé / valeur à sa représentation sous forme de chaîne:

> _.map(o, (value, key) => key + ':' + value)
[ 'a:1', 'b:2' ]

Et join()regroupez les entrées du tableau.

Si vous pouvez utiliser ES6 Template String, cela fonctionne également:

> `{${_.map(o, (value, key) => `${key}:${value}`).join(', ')}}`
'{a:1, b:2}'

Veuillez noter que cela ne passe pas récursivement par l'objet:

> var o = {a:1, b:{c:2}}
> _.map(o, (value, key) => `${key}:${value}`)
[ 'a:1', 'b:[object Object]' ]

Comme leutil.inspect() fera le nœud :

> util.inspect(o)
'{ a: 1, b: { c: 2 } }'

Si vous utilisez le framework javascript Dojo, il existe déjà une fonction intégrée pour le faire: dojo.toJson () qui serait utilisée de la sorte.

var obj = {
  name: 'myObj'
};
dojo.toJson(obj);

qui renverra une chaîne. Si vous souhaitez convertir l'objet en données json, ajoutez un deuxième paramètre true.

dojo.toJson(obj, true);

http://dojotoolkit.org/reference-guide/dojo/toJson.html#dojo-tojson

/*
    This function is as JSON.Stringify (but if you has not in your js-engine you can use this)
    Params:
        obj - your object
        inc_ident - can be " " or "\t".
        show_types - show types of object or not
        ident - need for recoursion but you can not set this parameter.
*/
function getAsText(obj, inc_ident, show_types, ident) {
    var res = "";
    if (!ident)
        ident = "";
    if (typeof(obj) == "string") {
        res += "\"" + obj + "\" ";
        res += (show_types == true) ? "/* typeobj: " + typeof(obj) + "*/" : "";
    } else if (typeof(obj) == "number" || typeof(obj) == "boolean") {
        res += obj;
        res += (show_types == true) ? "/* typeobj: " + typeof(obj) + "*/" : "";
    } else if (obj instanceof Array) {
        res += "[ ";
        res += show_types ? "/* typeobj: " + typeof(obj) + "*/" : "";
        res += "\r\n";
        var new_ident = ident + inc_ident;
        var arr = [];
        for(var key in obj) {
            arr.push(new_ident + getAsText(obj[key], inc_ident, show_types, new_ident));
        } 
        res += arr.join(",\r\n") + "\r\n";
        res += ident + "]";
    } else {
        var new_ident = ident + inc_ident;      
        res += "{ ";
        res += (show_types == true) ? "/* typeobj: " + typeof(obj) + "*/" : "";
        res += "\r\n";
        var arr = [];
        for(var key in obj) {
            arr.push(new_ident + '"' + key + "\" : " + getAsText(obj[key], inc_ident, show_types, new_ident));
        }
        res += arr.join(",\r\n") + "\r\n";
        res += ident + "}\r\n";
    } 
    return res;
};

exemple à utiliser:

var obj = {
    str : "hello",
    arr : ["1", "2", "3", 4],
b : true,
    vobj : {
        str : "hello2"
    }
}

var ForReading = 1, ForWriting = 2;
var fso = new ActiveXObject("Scripting.FileSystemObject")
f1 = fso.OpenTextFile("your_object1.txt", ForWriting, true)
f1.Write(getAsText(obj, "\t"));
f1.Close();

f2 = fso.OpenTextFile("your_object2.txt", ForWriting, true)
f2.Write(getAsText(obj, "\t", true));
f2.Close();

votre_objet1.txt:

{ 
    "str" : "hello" ,
    "arr" : [ 
        "1" ,
        "2" ,
        "3" ,
        4
    ],
    "b" : true,
    "vobj" : { 
        "str" : "hello2" 
    }

}

votre_objet2.txt:

{ /* typeobj: object*/
    "str" : "hello" /* typeobj: string*/,
    "arr" : [ /* typeobj: object*/
        "1" /* typeobj: string*/,
        "2" /* typeobj: string*/,
        "3" /* typeobj: string*/,
        4/* typeobj: number*/
    ],
    "b" : true/* typeobj: boolean*/,
    "vobj" : { /* typeobj: object*/
        "str" : "hello2" /* typeobj: string*/
    }

}

Pour votre exemple, je pense que ce console.log("Item:",o) serait plus facile. Mais, console.log("Item:" + o.toString) cela fonctionnerait aussi.

L'utilisation de la méthode numéro un utilise une belle liste déroulante dans la console, donc un long objet fonctionnerait bien.

function objToString (obj) {
    var str = '{';
    if(typeof obj=='object')
      {

        for (var p in obj) {
          if (obj.hasOwnProperty(p)) {
              str += p + ':' + objToString (obj[p]) + ',';
          }
      }
    }
      else
      {
         if(typeof obj=='string')
          {
            return '"'+obj+'"';
          }
          else
          {
            return obj+'';
          }
      }



    return str.substring(0,str.length-1)+"}";
}

J'espère que cet exemple aidera tous ceux qui travaillent tous sur un tableau d'objets

var data_array = [{
                    "id": "0",
                    "store": "ABC"
                },{
                    "id":"1",
                    "store":"XYZ"
                }];
console.log(String(data_array[1]["id"]+data_array[1]["store"]));

Si vous ne jouez pas, joignez () à Object.

const obj = {one:1, two:2, three:3};
let arr = [];
for(let p in obj)
    arr.push(obj[p]);
const str = arr.join(',');

Références circulaires

En utilisant ci - dessous succédané nous pouvons produire JSON moins redondante - si l' objet source contient plusieurs références à un objet, ou contient des références circulaires - nous référençons par chemin de chaîne spéciale (similaire à JSONPath ) - nous l' utilisons comme suit

let s = JSON.stringify(obj, refReplacer());

function refReplacer() {
  let m = new Map();
  let v = new Map();
  replacer = (field,value) => value;

  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;
    
    if(!pp && isComplex) v.set(value, path);
   
    return replacer.call(this, field, 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);

BONUS : et voici la fonction inverse d'une telle sérialisation

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