variable - string to html javascript




Konvertieren eines Objekts in eine Zeichenfolge (18)

1.

JSON.stringify(o);

Artikel: {"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);

Artikel: {a: 1, b: 2}

Wie kann ich ein JavaScript-Objekt in eine Zeichenfolge konvertieren?

Beispiel:

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

Ausgabe:

Objekt {a = 1, b = 2} // Sehr gut lesbare Ausgabe :)
Artikel: [Objekt Objekt] // keine Ahnung, was drin ist :(


Für Ihr Beispiel denke ich, dass console.log("Item:",o) am einfachsten ist. Aber console.log("Item:" + o.toString) würde auch funktionieren.

Die Verwendung der Methode Nummer 1 verwendet ein nettes Dropdown in der Konsole, so dass ein langes Objekt gut funktionieren würde.


Ich suchte danach und schrieb einen tiefen rekursiven mit Einrückung:

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

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


Ich würde empfehlen, JSON.stringify , das die Menge der Variablen im Objekt in eine JSON-Zeichenfolge konvertiert. Die meisten modernen Browser unterstützen diese Methode nativ, aber für diejenigen, die dies nicht tun, können Sie eine JS-Version hinzufügen :

var obj = {
  name: 'myObj'
};

JSON.stringify(obj);

JSON-Methoden sind dem Geo-Engine-Grundelement .toSource () ziemlich unterlegen.

Siehe die SO-Artikelantwort für Vergleichstests.

Auch die obige Antwort bezieht sich auf http://forums.devshed.com/javascript-development-115/tosource-with-arrays-in-ie-386109.html welche, wie JSON, (welcher der andere Artikel http://www.davidpirek.com/blog/object-to-string-how-to-deserialize-json verwendet über "ExtJs JSON Encode Quellcode" ) kann nicht mit zirkulären Referenzen umgehen und ist unvollständig. Der Code unten zeigt seine (Spoof) Einschränkungen (korrigiert, um Arrays und Objekte ohne Inhalt zu behandeln).

( direkter Link zum Code in //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'));

welches anzeigt:

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")]

und

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")]

und

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]

Keine der Lösungen hier funktioniert für mich. JSON.stringify scheint zu sein, was viele Leute sagen, aber es schneidet Funktionen aus und scheint ziemlich kaputt zu sein für einige Objekte und Arrays, die ich beim Testen ausprobiert habe.

Ich habe meine eigene Lösung entwickelt, die zumindest in Chrome funktioniert. Veröffentlichen Sie es hier, damit jeder, der auf Google nachschaut, es finden kann.

//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: Ich weiß, dass dieser Code verbessert werden kann, aber nie dazu kam. User andrey schlug hier eine Verbesserung mit dem Kommentar vor:

Hier ist ein etwas veränderter Code, der mit 'null' und 'undefiniert' umgehen kann und außerdem keine übermäßigen Kommas hinzufügt.

Verwenden Sie das auf eigene Gefahr, da ich es überhaupt nicht verifiziert habe. Fühlen Sie sich frei, irgendwelche zusätzlichen Verbesserungen als Kommentar vorzuschlagen.


Um ein Objekt in einen String zu konvertieren, müssen Sie entweder eine eigene Methode verwenden, wie zum Beispiel:

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

Tatsächlich zeigt das Obige nur den allgemeinen Ansatz; Vielleicht möchten Sie etwas wie http://phpjs.org/functions/var_export:578 oder http://phpjs.org/functions/var_dump:604

oder, wenn Sie keine Methoden verwenden (Funktionen als Eigenschaften Ihres Objekts), können Sie möglicherweise den neuen Standard verwenden (aber nicht in älteren Browsern implementiert, obwohl Sie ein Dienstprogramm finden können, das ihnen dabei hilft), JSON .stringify (). Aber auch das funktioniert nicht, wenn das Objekt Funktionen oder andere Eigenschaften verwendet, die für JSON nicht serialisierbar sind.


Verwenden Sie Javascript String () -Funktion.

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

oder

JSON.stringify(yourobject)

.


Wenn Sie das Dojo-Javascript-Framework verwenden, gibt es bereits eine eingebaute Funktion: dojo.toJson (), die so verwendet wird.

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

Das wird eine Zeichenfolge zurückgeben. Wenn Sie das Objekt in json-Daten konvertieren möchten, fügen Sie einen zweiten Parameter von true hinzu.

dojo.toJson(obj, true);

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


Wenn Sie lodash verwenden können, können Sie dies folgendermaßen tun:

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

Mit lodash map() Sie auch über Objekte iterieren. Dies ordnet jeden Schlüssel / Wert-Eintrag seiner Zeichenfolgendarstellung zu:

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

Und join() fügt die Array-Einträge zusammen.

Wenn Sie ES6 Template String verwenden können, funktioniert dies auch:

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

Bitte beachten Sie, dass dies nicht rekursiv durch das Objekt geht:

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

Wie der Knoten util.inspect() tut:

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

Wenn Sie nur das Objekt zum Debuggen anzeigen möchten, können Sie es verwenden

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

Wenn Sie sich nur für Strings, Objekte und Arrays interessieren:

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


BEARBEITEN Verwenden Sie diese Antwort nicht, da sie im Internet Explorer nicht funktioniert. Verwenden Sie die Gary Chambers- Lösung.

toSource() ist die toSource() Funktion, die sie als JSON toSource() .

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

Sehen Sie sich das jQuery-JSON Plugin an

Im Kern verwendet es JSON.stringify, greift jedoch auf seinen eigenen Parser zurück, wenn der Browser es nicht implementiert.


/*
    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;
};

Beispiel zu verwenden:

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

Ihre_Objekt1.txt:

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

}

Ihre_Objekt2.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*/
    }

}

setobjToString:function(obj){
        var me =this;
        obj=obj[0];
        var tabjson=[];
        for (var p in obj) {
            if (obj.hasOwnProperty(p)) {
                if (obj[p] instanceof Array){
                    tabjson.push('"'+p +'"'+ ':' + me.setobjToString(obj[p]));
                }else{
                    tabjson.push('"'+p +'"'+':"'+obj[p]+'"');
                }
            }
        }  tabjson.push()
        return '{'+tabjson.join(',')+'}';
    }

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

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

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

Da Javascript v1.0 überall funktioniert (auch IE), ist dies ein nativer Ansatz und ermöglicht ein sehr kosteneffektives Aussehen Ihres Objekts während des Debuggens und in der Produktion https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

Nützliches Beispiel

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

Auch als 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






tostring