web-dev-qa-db-ja.com

JavaScriptのtoString（）関数をオーバーライドして、デバッグ用の意味のある出力を提供することは可能ですか？

JavaScriptプログラムでオブジェクトをconsole.log()すると、_[object Object]_という出力が表示されますが、これはオブジェクト（またはオブジェクトのタイプ）を把握するのにあまり役立ちません。

C＃では、オブジェクトのデバッガー表現をカスタマイズできるようにToString()をオーバーライドすることに慣れています。 JavaScriptでできることは何ですか？

javascriptdebuggingtostring
104
devios1

JavascriptでtoStringもオーバーライドできます。例を参照してください：

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]

JavaScriptでオブジェクトタイプ名を決定する方法については、 this の説明を参照してください。

94
Michael Spector

まず、オブジェクトまたはプロトタイプのtoStringをオーバーライドします。

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

var foo = new Foo();

次に、文字列に変換して、オブジェクトの文字列表現を確認します。

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

余分な入力が気に入らない場合は、引数の文字列表現をコンソールに記録する関数を作成できます。

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

使用法：

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

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

更新

E2015はこのようなもののためのより良い構文を提供しますが、 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'
25
Max Heiber

ブラウザJSでデバッグ可能な出力を取得する簡単な方法は、オブジェクトをJSONにシリアル化することです。だからあなたは次のような電話をかけることができます

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

したがって、たとえば、alert("Blah! " + JSON.stringify({key: "value"}));は、テキスト_Blah! {"key":"value"}_を含むアラートを生成します

13
Paul V

Nodeを使用している場合、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 );

これにより以下が得られます。

{ #Point 1,2 }

検査なしのバージョンが印刷される間：

{ x: 1, y: 2 }
7
SystematicFrank

toString()メソッドをオーバーライドするだけです。

簡単な例：

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

新しい型を定義するとさらに良くなります：

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

オブジェクトが自分で定義されている場合、いつでも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

テンプレートリテラル の場合：

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

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

Mapオブジェクトを文字列化する方法の例を次に示します。

  Map.prototype.toString = function() {

    let result = {};

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

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

任意のカスタムオブジェクトに独自のtoStringメソッドを指定するか、見ているオブジェクトで呼び出すことができる一般的なオブジェクトを記述できます。

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

JSで拡張またはオーバーライドできます

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

-この操作は完了するまでに時間がかかり、mozillaのドキュメントによると、その使用は推奨されません： https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/proto

-明らかに、最新のブラウザは.prototypeを廃止し、ECMA6はproper__proto__を代わりに使用するように指定しています。

したがって、たとえば、オブジェクトgeopositionを定義している場合は、__ proto__を呼び出す必要がありますプロパティではなく。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

toString()をオーバーライドするのではなく、 Prototype JavaScript Library を含めると、Object.inspect()を使用してより有用な表現を取得できます。

最も一般的なフレームワークには、同様のものが含まれています。

0
codelahoma

Chromeコンソールログを使用すると、オブジェクトを検査できます。

0
tomconte