是否可以重写 JavaScript 的 toString() 函数来为调试提供有意义的输出？

问题描述 投票：0回答：17

当我在 JavaScript 程序中

console.log()
一个对象时，我只看到输出
[object Object]
，这对于弄清楚它是什么对象（甚至是什么类型的对象）没有太大帮助。

在 C# 中，我习惯于重写 

ToString()
以便能够自定义对象的调试器表示。我可以用 JavaScript 做类似的事情吗？

javascript debugging tostring
17个回答
122
投票

您也可以在 Javascript 中覆盖 

toString
。参见示例：

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]

请参阅 this 关于如何在 JavaScript 中确定对象类型名称的讨论。

47
投票

首先覆盖 

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'
17
投票

将 '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]


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

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

某些 Javascript 类型（例如 Maps 和 Promises）定义了内置的 

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'
17
投票

如果您使用 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 }

更多信息（+在

class
es中使用的示例）：

https://nodejs.org/api/util.html#util_util_inspect_custom

14
投票

在浏览器 JS 中获得可调试输出的一个简单方法是将对象序列化为 JSON。所以你可以拨打这样的电话

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

举个例子，

alert("Blah! " + JSON.stringify({key: "value"}));
会生成一个带有文本
Blah! {"key":"value"}

的警报
11
投票

使用模板文字：

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

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

如果该对象是您自己定义的，您可以随时添加 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);

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}"
0
投票

您可以为任何自定义对象提供自己的 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
投票

-此操作需要花费大量时间 完整，并且根据 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);
  };
0
投票

要更新所有对象

toString()
方法，您可以使用对象原型：


Object.prototype.toString = function () {
  console.log("TO STRING WORKS FOR: ", this);
  return JSON.stringify(this);
};
-2
投票

而不是覆盖 

toString()
，如果您包含 Prototype JavaScript Library，您可以使用 
Object.inspect()
来获得更有用的表示。

大多数流行的框架都包含类似的东西。

-2
投票

你不能！

到 2023 年，Chrome 的控制台输出不再基于您可以控制的任何内容。

您能做的最好的事情就是将其输出到 console.log 行，强制对象强制转换。

-3
投票

Chrome 控制台日志允许您检查对象。

-3
投票

您可以在 JS 中扩展或覆盖

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

-4
投票
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;
};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.