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

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

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

Sie können auch toStringin 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]

In dieser Diskussion erfahren Sie, wie Sie den Objekttypnamen in JavaScript bestimmen.

Erste Überschreibung toStringfü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);
};

Verwendung:

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'

Eine einfache Möglichkeit, eine debuggbare Ausgabe in Browser JS zu erhalten, besteht darin, das Objekt einfach in JSON zu serialisieren. So könnten Sie einen Anruf tätigen wie

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

So zum Beispiel alert("Blah! " + JSON.stringify({key: "value"}));erzeugt eine Benachrichtigung mit dem TextBlah! {"key":"value"}

Wenn Sie Node verwenden, ist dies möglicherweise eine Überlegung wert util.inspect.

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 ergibt:

{ #Point 1,2 }

Während die Version ohne Inspektion druckt:

{ x: 1, y: 2 }

Ü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

Es ist sogar noch besser, 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}"

Wenn das Objekt von Ihnen selbst definiert wurde, können Sie jederzeit 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);

Mit Vorlagenliteralen :

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

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

Fügen Sie dem benutzerdefinierten Objekt oder der benutzerdefinierten Klasse die Eigenschaft 'Symbol.toStringTag' hinzu .

Der ihm zugewiesene Zeichenfolgenwert ist die Standardzeichenfolgenbeschreibung, da die Object.prototype.toString()Methode intern auf sie zugreift.

Beispielsweise:

class Person {
  constructor(name) {
    this.name = name
  }
  get [Symbol.toStringTag]() {
    return 'Person';
  }
}

let p = new Person('Dan');
Object.prototype.toString.call(p); // [object Person]

class Person {
  constructor(name) {
    this.name = name
  }
  get[Symbol.toStringTag]() {
    return 'Person';
  }
}

let p = new Person('Dan');
console.log(Object.prototype.toString.call(p));

Für einige Javascript-Typen wie Maps und Promises ist ein integriertes toStringTagSymbol definiert

Object.prototype.toString.call(new Map());       // "[object Map]"
Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"

Da Symbol.toStringTages sich um ein bekanntes Symbol handelt , können wir darauf verweisen und überprüfen, ob die oben genannten Typen die Eigenschaft Symbol.toStringTag haben.

new Map()[Symbol.toStringTag] // 'Map'
Promise.resolve()[Symbol.toStringTag] // 'Promise'

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

-Dieser Vorgang nimmt viel Zeit in Anspruch und wird laut Mozilla-Dokumenten nicht empfohlen: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/proto

- Offensichtlich veralten moderne Browser .prototype und ECMA6 spezifiziert stattdessen die Verwendung von Proper__proto__.

Wenn Sie beispielsweise Ihre eigene Objekt- Geoposition definieren , sollten Sie die Eigenschaft __proto__ 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());

Hier ist ein Beispiel zum Stringifizieren eines Map-Objekts:

  Map.prototype.toString = function() {

    let result = {};

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

    return JSON.stringify(result);
  };

Sie können allen benutzerdefinierten Objekten ihre eigenen toString-Methoden zuweisen oder eine allgemeine Methode schreiben, die Sie für das Objekt aufrufen können, das Sie betrachten.

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

toString()Wenn Sie die Prototype JavaScript Library einschließen , können Sie Object.inspect()eine viel nützlichere Darstellung erhalten, anstatt sie zu überschreiben .

Die beliebtesten Frameworks enthalten etwas Ähnliches.

Sie können in JS erweitern oder überschreiben

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

A simple format Date function using Javascript prototype, it can be used for your purpose

https://gist.github.com/cstipkovic/3983879 :

Date.prototype.formatDate = function (format) {
    var date = this,
        day = date.getDate(),
        month = date.getMonth() + 1,
        year = date.getFullYear(),
        hours = date.getHours(),
        minutes = date.getMinutes(),
        seconds = date.getSeconds();

    if (!format) {
        format = "MM/dd/yyyy";
    }

    format = format.replace("MM", month.toString().replace(/^(\d)$/, '0$1'));

    if (format.indexOf("yyyy") > -1) {
        format = format.replace("yyyy", year.toString());
    } else if (format.indexOf("yy") > -1) {
        format = format.replace("yy", year.toString().substr(2, 2));
    }

    format = format.replace("dd", day.toString().replace(/^(\d)$/, '0$1'));

    if (format.indexOf("t") > -1) {
        if (hours > 11) {
            format = format.replace("t", "pm");
        } else {
            format = format.replace("t", "am");
        }
    }

    if (format.indexOf("HH") > -1) {
        format = format.replace("HH", hours.toString().replace(/^(\d)$/, '0$1'));
    }

    if (format.indexOf("hh") > -1) {
        if (hours > 12) {
            hours -= 12;
        }

        if (hours === 0) {
            hours = 12;
        }
        format = format.replace("hh", hours.toString().replace(/^(\d)$/, '0$1'));
    }

    if (format.indexOf("mm") > -1) {
        format = format.replace("mm", minutes.toString().replace(/^(\d)$/, '0$1'));
    }

    if (format.indexOf("ss") > -1) {
        format = format.replace("ss", seconds.toString().replace(/^(\d)$/, '0$1'));
    }

    return format;
};