it-swarm.com.de

Ist es möglich, die toString () - Funktion von JavaScript zu überschreiben, um eine aussagekräftige Ausgabe für das Debugging bereitzustellen?

Wenn ich ein Objekt in meinem JavaScript-Programm console.log() sehe, sehe ich nur die Ausgabe [object Object]. Dies ist nicht sehr hilfreich, um herauszufinden, um welches Objekt (oder sogar um welchen Objekttyp es sich handelt).

In C # bin ich es gewohnt, ToString() zu überschreiben, um die Debugger-Darstellung eines Objekts anpassen zu können. Kann ich in JavaScript etwas Ähnliches tun?

98
devios1

Sie können toString auch in Javascript überschreiben. Siehe Beispiel:

function Foo() 
{
}

// toString override added to prototype of Foo class
Foo.prototype.toString = function()
{
    return "[object Foo]";
}

var f = new Foo();
alert(f);  // popup displays [object Foo]

Siehe this Diskussion, wie der Objekttypname in JavaScript ermittelt wird.

87
michael

Überschreiben Sie zuerst toString für Ihr Objekt oder den Prototyp:

var Foo = function(){};
Foo.prototype.toString = function(){return 'Pity the Foo';};

var foo = new Foo();

Konvertieren Sie dann in eine Zeichenfolge, um die Zeichenfolgendarstellung des Objekts anzuzeigen:

//using JS implicit type conversion
console.log('' + foo);

Wenn Ihnen die zusätzliche Eingabe nicht gefällt, können Sie eine Funktion erstellen, die Zeichenfolgendarstellungen ihrer Argumente in der Konsole protokolliert:

var puts = function(){
    var strings = Array.prototype.map.call(arguments, function(obj){
        return '' + obj;
    });
    console.log.apply(console, strings);
};

Verwendungszweck:

puts(foo)  //logs 'Pity the Foo'

puts(foo, [1,2,3], {a: 2}) //logs 'Pity the Foo 1,2,3 [object Object]'

Aktualisieren

E2015 bietet eine viel schönere Syntax für dieses Zeug, aber Sie müssen einen Transpiler wie Babel verwenden:

// override `toString`
class Foo {
  toString(){
    return 'Pity the Foo';
  }
}

const foo = new Foo();

// utility function for printing objects using their `toString` methods
const puts = (...any) => console.log(...any.map(String));

puts(foo); // logs 'Pity the Foo'
21
Max Heiber

Eine einfache Möglichkeit, eine debugierbare Ausgabe in Browser JS zu erhalten, ist die Serialisierung des Objekts in JSON. Du könntest also gerne anrufen

console.log ("Blah: " + JSON.stringify(object));

Zum Beispiel erzeugt alert("Blah! " + JSON.stringify({key: "value"})); eine Warnung mit dem Text Blah! {"key":"value"}

13
Paul V

Überschreiben Sie einfach die toString()-Methode.

Einfaches Beispiel:

var x = {foo: 1, bar: true, baz: 'quux'};
x.toString(); // returns "[object Object]"
x.toString = function () {
    var s = [];
    for (var k in this) {
        if (this.hasOwnProperty(k)) s.Push(k + ':' + this[k]);
    }
    return '{' + s.join() + '}';
};
x.toString(); // returns something more useful

Noch besser ist es, wenn Sie einen neuen Typ definieren:

function X()
{
    this.foo = 1;
    this.bar = true;
    this.baz = 'quux';
}

X.prototype.toString = /* same function as before */

new X().toString(); // returns "{foo:1,bar:true,baz:quux}"
6
Matt Ball

Wenn Sie Node verwenden, sollten Sie util.inspect in Betracht ziehen.

var util = require('util')

const Point = {
  x: 1,
  y: 2,
  [util.inspect.custom]: function(depth) { return `{ #Point ${this.x},${this.y} }` }

}

console.log( Point );

Dies wird ergeben:

{ #Point 1,2 }

Während die Version ohne Prüfung druckt:

{ x: 1, y: 2 }
6
SystematicFrank

Wenn das Objekt von Ihnen selbst definiert wird, können Sie immer eine toString-Überschreibung hinzufügen.

//Defined car Object
var car = {
  type: "Fiat",
  model: 500,
  color: "white",
  //.toString() Override
  toString: function() {
    return this.type;
  }
};

//Various ways to test .toString() Override
console.log(car.toString());
console.log(car);
alert(car.toString());
alert(car);

//Defined carPlus Object
var carPlus = {
  type: "Fiat",
  model: 500,
  color: "white",
  //.toString() Override
  toString: function() {
    return 'type: ' + this.type + ', model: ' + this.model + ', color:  ' + this.color;
  }
};

//Various ways to test .toString() Override
console.log(carPlus.toString());
console.log(carPlus);
alert(carPlus.toString());
alert(carPlus);

5
Hacked Child

Mit Template-Literalen :

class Foo {
  toString() {
     return 'I am foo';
  }
}

const foo = new Foo();
console.log(`${foo}`); // 'I am foo'
2
sami

Im Chrome-Konsolenprotokoll können Sie das Objekt überprüfen.

1
tomconte

Hier ein Beispiel, wie ein Map-Objekt stringifiziert wird:

  Map.prototype.toString = function() {

    let result = {};

    this.forEach((key, value) => { result[key] = value;});

    return JSON.stringify(result);
  };
0

Sie können jedem benutzerdefinierten Objekt eine eigene toString-Methode zuweisen oder ein allgemeines Objekt schreiben, das Sie für das Objekt aufrufen können,

Function.prototype.named= function(ns){
    var Rx=  /function\s+([^(\s]+)\s*\(/, tem= this.toString().match(Rx) || "";
    if(tem) return tem[1];
    return 'unnamed constructor'
}

function whatsit(what){
    if(what===undefined)return 'undefined';
    if(what=== null) return 'null object';
    if(what== window) return 'Window object';
    if(what.nodeName){
        return 'html '+what.nodeName;
    }
    try{
        if(typeof what== 'object'){
            return what.constructor.named();
        }
    }
    catch(er){
        return 'Error reading Object constructor';
    }
    var w=typeof what;
    return w.charAt(0).toUpperCase()+w.substring(1);
}
0
kennebec

Sie können in JS erweitern oder überschreiben

String.prototype.toString = function() {
    return this + "..."
}
document.write("Sergio".toString());

0
ch2o

-Diese Operation dauert viel Zeit bis abgeschlossen und seine Verwendung wird gemäß Mozilla-Dokumenten nicht empfohlen: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/proto

- Anscheinend veralteten moderne Browser .prototype und ECMA6 Verwenden Sie stattdessen proper__proto__.

Wenn Sie beispielsweise Ihr eigenes Objekt geoposition definieren, sollten Sie _PROTO_ - Eigenschaft anstelle von .prototype aufrufen:

var  geoposition = {

        lat: window.pos.lat,
        lng: window.pos.lng
    };

geoposition.__proto__.toString = function(){ return "lat: "+this.lat+", lng: "+this.lng }
console.log("Searching nearby donations to: "+geoposition.toString());
0
cepix

Anstatt toString() zu überschreiben, können Sie, wenn Sie die Prototype JavaScript Library einschließen, Object.inspect() verwenden, um eine wesentlich nützlichere Darstellung zu erhalten.

Die meisten gängigen Frameworks enthalten etwas Ähnliches.

0
codelahoma