码迷,mamicode.com
首页 > 其他好文 > 详细

toString和valueOf使得对象访问时显示一个特定格式的字符串,但是可以进行数字运算

时间:2019-07-15 12:10:39      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:数字运算   eof   get   text   tostring   day   cas   字符串   asc   

作用

toString()的作用是返回一个反映这个对象的字符串;

valueOf()的作用是返回它相应的原始值;

异同点

共同点:在 JavaScript 中,toString()方法和valueOf()方法,在输出对象时会自动调用
不同点:二者并存的情况下,在数值运算中,优先调用了valueOf字符串运算中,优先调用了toString

 

js中的Date, Array, Number, Boolean, Function等访问实例的toSting方法和valueOf方法,都会返回不同的东西。自己可以试一试哦,毕竟实践才是检验真理的唯一标准!

刚突发奇想,想到一个日期方面的应用。

let today = new Date();
console.log(today); // Mon Jul 15 2019 11:34:56 GMT+0800 (中国标准时间)
console.log(today.getTime()); // 1563161696274
console.log(today * 1); // 1563161696274

直接输出today,调用的是toString方法,返回了一个字符串。today * 1调用的是valueOf方法,可以发现利用这一点可以代替getTime方法,写起来更方便了。下面是一个验证

console.log(today.toString()); // Mon Jul 15 2019 11:34:56 GMT+0800 (中国标准时间)
console.log(today.valueOf()); // 1563161696274
console.log("Mon Jul 15 2019 11:34:56 GMT+0800 (中国标准时间)" * 1); // NaN

 

在日常生活中,现金中的应用。计算的时候是数字,显示的时候是特定的格式

class Cash{
    constructor(val){
        this.val = val;
    }
    static add(num1, num2){
        return Cash.getVal(num1 + num2);
    }
    add(num){
        return Cash.getVal(this.val + num);
    }
    static getVal(num){
        let yuan = parseInt(num / 100);
        let jiao = parseInt((num % 100) / 10);
        let fen = num % 10;
        return `${yuan}元${jiao}角${fen}分`;
    }
    // toString的作用是返回一个反映这个对象的字符串;
    toString(){
        return Cash.getVal(this.val);
    }
    // valueOf的作用是返回它相应的原始值;
    valueOf(){
        return this.val;
    }
}

const c1 = new Cash(105);
const c2 = new Cash(66);
const c3 = c1.add(c2);
const c4 = Cash.add(c1, c2);
const c5 = new Cash(c1 + c2);
console.log(`${c3}, ${c4}, ${c5}`);// 1元7角1分, 1元7角1分, 1元7角1

在这个例子中,Cash的实例是实例化的一个对象,但是却进行了加法运算(c1+c2),输出的时候却显示的是圆角分的格式。

希望看了这篇文章对你理解toString和valueOf有所理解。

toString和valueOf使得对象访问时显示一个特定格式的字符串,但是可以进行数字运算

标签:数字运算   eof   get   text   tostring   day   cas   字符串   asc   

原文地址:https://www.cnblogs.com/zhaodesheng/p/11187992.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!