web-dev-qa-db-fra.com

Est-il possible de remplacer la fonction toString () de JavaScript pour fournir une sortie significative pour le débogage?

Lorsque je nomme console.log() un objet de mon programme JavaScript, je ne vois que la sortie [object Object], qui n'est pas très utile pour déterminer quel objet (ou même quel type d'objet) il s'agit.

En C #, je suis habitué à surcharger ToString() pour pouvoir personnaliser la représentation du débogueur d'un objet. Y a-t-il quelque chose de similaire que je puisse faire en JavaScript?

javascriptdebuggingtostring
98
devios1

Vous pouvez également remplacer toString en Javascript. Voir exemple:

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]

Voir this discussion sur la façon de déterminer le nom du type d'objet en JavaScript.

87
michael

Commencez par remplacer toString pour votre objet ou le prototype:

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

var foo = new Foo();

Puis convertissez en chaîne pour voir la représentation sous forme de chaîne de l'objet:

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

Si vous n'aimez pas le typage supplémentaire, vous pouvez créer une fonction qui enregistre les représentations sous forme de chaîne de ses arguments dans la console:

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

Usage:

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

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

Mettre à jour

E2015 fournit une syntaxe beaucoup plus agréable pour ce genre de choses, mais vous devrez utiliser un transpiler comme Babel :

// 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

Un moyen simple d’obtenir une sortie débogable dans le navigateur JS consiste à sérialiser l’objet au format JSON. Pour pouvoir faire un appel comme

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

Ainsi, par exemple, alert("Blah! " + JSON.stringify({key: "value"})); génère une alerte avec le texte Blah! {"key":"value"}

13
Paul V

Remplacez simplement la méthode toString().

Exemple simple:

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

C'est encore mieux quand vous définissez un nouveau type:

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

Si vous utilisez Node, il pourrait être utile d’envisager 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 );

Cela donnera:

{ #Point 1,2 }

Alors que la version sans inspecter imprime:

{ x: 1, y: 2 }
6
SystematicFrank

Si l'objet est défini par vous-même, vous pouvez toujours ajouter un remplacement toString.

//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

Avec modèles littéraux :

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

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

Le journal de la console Chrome vous permet d'inspecter l'objet.

1
tomconte

Voici un exemple comment stringifier un objet Map:

  Map.prototype.toString = function() {

    let result = {};

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

    return JSON.stringify(result);
  };
0
Agustí Sánchez

Vous pouvez attribuer à chaque objet personnalisé ses propres méthodes toString ou en écrire une générale que vous pouvez appeler sur l'objet que vous regardez

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

Vous pouvez étendre ou remplacer dans JS

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

0
ch2o

-Cette opération prend beaucoup de temps pour Selon mozilla docs, son utilisation est interdite: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/proto

Apparemment, les navigateurs modernes ont déconseillé le .prototype et ECMA6 spécifie en utilisant proper__proto__ à la place.

Ainsi, par exemple, si vous définissez votre propre objet geoposition, vous devez appeler la propriété _PROTO_ au lieu de .prototype:

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

Plutôt que de remplacer toString(), si vous incluez la Bibliothèque JavaScript Prototype , vous pouvez utiliser Object.inspect() pour obtenir une représentation beaucoup plus utile.

Les frameworks les plus populaires incluent quelque chose de similaire.

0
codelahoma