Чи можливо замінити функцію toString () JavaScript для надання значущого виводу для налагодження?


115

Коли я console.log()об’єкт у своїй програмі JavaScript, я просто бачу вихід [object Object], який не дуже допомагає з'ясувати, що це за об'єкт (або навіть який тип об'єкта).

У C # я звик переосмислювати, ToString()щоб мати можливість налаштувати налагоджувальне представлення об'єкта. Чи можу я щось зробити в JavaScript?


2
Я вважаю, що вихід - це найнадійніший спосіб сказати вам, що має змінна (або принаймні краще, ніж typeof).
alex

Відповіді:


103

Ви також можете перекрити 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.


8
Хоча це правда, функція попередження відображатиме повернене значення функції, що перекриває toStringвластивість прототипу , Object.prototype.toString.call(f)все одно відображатиметься [object Object].
Фредерік Краутвальд

14
'Object.prototype.toString.call (f) все ще відображатиме [object Object].' Так, тому що це абсолютно інша функція, ніж "Foo.prototype.toString", lol.
Трайнко

5
Якщо хтось, як я, опинився тут, ви можете використовувати Sybmol.toStringTag в ES6 для налаштування поведінки Object.prototype.toString.call. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
TLadd

32

Спочатку замініть 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'

6
console.log ('' + foo); це була проблема, я не бачив жодної реалізації toString, поки не дійшов до вашої відповіді.
ахмадалібалох

13

Найпростіший спосіб отримати налагоджуваний вихід у веб-переглядачі JS - це просто серіалізувати об'єкт на JSON. Таким чином, ви могли б зателефонувати на зразок

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

Так, наприклад, alert("Blah! " + JSON.stringify({key: "value"}));виробляє попередження з текстомBlah! {"key":"value"}


Це досить зручно. Я думаю, вихід може бути трохи величезним, але він працює в крайній мірі!
devios1

@dev Зручно, але не замінює toString ().
Дан Даскалеску

10

Якщо ви використовуєте 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 }

6

Просто перекрийте 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}"

9
Цей код не вирішує проблему console.log ОП, принаймні, не в node.js v0.10.*або Chrome Version 32.0.1700.102. Під час прямого виклику toString (кульгавий) або використання примусу типу (lamer) буде працювати з цим, консоль [/ info | log /] використовує для старого попереднього модулю toString.
james_womack

1
Зараз 2019 рік, і nodejs, і хромовані симпатичні друковані об’єкти самостійно, тож примус (коли ви додаєте об'єкт до рядка) - єдиний випадок використання, який ви б переглядали в Google за цим питанням.
Клесун

6

Якщо об'єкт визначений вами, ви завжди можете додати перестановку 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);



3

Додайте властивість 'Symbol.toStringTag' у спеціальний об’єкт або клас.

Значенням рядка, яке йому призначено, буде його опис рядка за замовчуванням, тому що це Object.prototype.toString()метод має внутрішній доступ .

Наприклад:

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

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

Деякі типи Javascript, такі як "Карти" та "Обіцяння", мають вбудований toStringTagсимвол

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

Оскільки Symbol.toStringTagце добре відомий символ , ми можемо посилатися на нього та переконатися, що вказані типи мають властивість Symbol.toStringTag -

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

Це разом із переосмисленням toString()безпосередньо єдиний спосіб досягти function MyObj() {} Object.prototype.toString.call(new MyObj()) // "[object MyObj]"?
тонікс

1
@tonix - Я думаю, що так ... Якщо є інший спосіб, будь ласка, повідомте мене;)
Danield

0

Журнал консолі Chrome дозволяє оглянути об’єкт.


Так, це правда, якщо я виведіть лише об'єкт, який зручно. Однак іноді я просто хочу вивести його як частину рядка, який я міг би використовувати для включення інших даних, і було б непогано, якби я міг налаштувати цю форму якимось чином.
devios1

6
Я тільки що виявив , що ви можете використовувати додаткові аргументи в console.log для виведення об'єктів рядного з рядком: console.log("this is my object:", obj).
devios1

0

-Це операція займає багато часу для її завершення, і її використання відмовляється відповідно до документів mozilla: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/proto

-Мабуть, сучасні браузери застаріли .prototype та ECMA6 вказує, використовуючи замість власного__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

Ось приклад того, як зробити порядок об'єкта Map:

  Map.prototype.toString = function() {

    let result = {};

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

    return JSON.stringify(result);
  };

-1

Ви можете надати будь-яким спеціальним об’єктам свої власні методи 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);
}


-1

Ви можете продовжити або змінити в JS

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


Як це щось додає до відповідей 2011 року, які дають те саме рішення?
Дан Даскалеску

-3
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;
};
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.