valueOf

JavaScriptは、valueOfメソッドを呼び出してオブジェクトを原始値に変換します。通常、開発者はこのメソッドを直接呼び出すことはほとんどありませんが、予期される原始値が必要な場合、JavaScriptは自動的にこのメソッドを呼び出します。各組み込みオブジェクトは、適切な値を返すためにこのメソッドをオーバーライドしています。

const arr = [];
console.log(arr.valueOf() === arr); // true

const date = new Date();
console.log(date.valueOf()); // 1376838719230

const num = 1;
console.log(num.valueOf()); // 1

const bool = true;
console.log(bool.valueOf() === bool); // true

const newBool = new Boolean(true);
console.log(newBool.valueOf() === newBool); // false

function funct() {}
console.log(funct.valueOf() === funct); // true

const obj = {};
console.log(obj.valueOf() === obj); // true

const str = "";
console.log(str.valueOf() === str); // true

const newStr = new String("");
console.log(newStr.valueOf() === newStr); // false

valueOfメソッドは、JavaScriptの実行中に頻繁に暗黙的に呼び出されます。以下は、カスタムクラスでvalueOfメソッドをオーバーライドする例です。

class ValueOfTest {
    constructor(val) {
        this.val = val;
    }
    valueOf() {
        return this.val;
    }
}

const v = new ValueOfTest(10);
console.log(v + 1); // 11

toString

JavaScriptは、toStringメソッドを呼び出してオブジェクトを文字列表現に変換します。各オブジェクトにはtoStringメソッドがあり、オブジェクトが文字列として表示されるときに自動的に呼び出されます。デフォルトでは、toStringメソッドはすべてのオブジェクトから継承され、カスタムオブジェクトでオーバーライドされていない場合、[object type]という形式の文字列を返します。

const arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3

const date = new Date();
console.log(date.toString()); // Tue Oct 27 2020 16:12:35 GMT+0800 (中国標準時)

const num = 1;
console.log(num.toString()); // 1

const bool = true;
console.log(bool.toString()); // true

function funct() { var a = 1; }
console.log(funct.toString()); // function funct() { var a = 1; }

const obj = {a: 1};
console.log(obj.toString()); // [object Object]

const str = "1";
console.log(str.toString()); // 1

比較

JavaScriptは異なる状況でtoStringまたはvalueOfメソッドを呼び出します。toStringメソッドが優先されますが、演算子が使用される場合はvalueOfメソッドが優先されます。もしvalueOfメソッドで演算が不可能な場合、toStringメソッドが呼び出されます。

const v = {
    val: 10,
    valueOf: function() {
        console.log("valueOf");
        return this.val;
    },
    toString: function() {
        console.log("toString");
        return this.val;
    }
};

const obj = {"10": 1};

console.log(v); // {val: 10, valueOf: ƒ, toString: ƒ}
console.log(1 + v); // valueOf // 11
console.log(obj[v]); // toString // 1
console.log("" + v); // valueOf // 10
console.log(String(v)); // toString // 10
console.log(Number(v)); // valueOf // 10
console.log(v == 10); // valueOf // true