[javascript] 디버깅을위한 의미있는 출력을 제공하기 위해 JavaScript의 toString () 함수를 재정의 할 수 있습니까?

Program / 글쓴이

console.log()JavaScript 프로그램에서 객체 일 때 출력 만 [object Object]보는데, 어떤 객체 (또는 어떤 유형의 객체)인지 파악하는 데별로 도움이되지 않습니다.

C #에서는 ToString()개체의 디버거 표현을 사용자 지정할 수 있도록 재정의 하는 데 익숙 합니다. JavaScript에서 비슷한 작업이 있습니까?

답변

toStringJavascript에서도 재정의 할 수 있습니다 . 예를보십시오 :

function Foo() {}

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

var f = new Foo();
console.log("" + f); // console displays [object Foo]

스 니펫 확장

JavaScript에서 객체 유형 이름을 결정하는 방법에 대한 이 토론을 참조하십시오 .

답변

먼저 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'

답변

브라우저 JS에서 디버깅 가능한 출력을 얻는 쉬운 방법은 객체를 JSON으로 직렬화하는 것입니다. 그래서 당신은 다음과 같이 전화를 걸 수 있습니다.

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

예를 들어, alert("Blah! " + JSON.stringify({key: "value"}));텍스트가 포함 된 경고를 생성합니다.Blah! {"key":"value"}

답변

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 }

답변

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

답변

객체가 직접 정의 된 경우 항상 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);

스 니펫 확장

답변

와 템플릿 리터럴 :

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

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