作用

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()); //
console.log(today * 1); //

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

console.log(today.toString()); // Mon Jul 15 2019 11:34:56 GMT+0800 (中国标准时间)
console.log(today.valueOf()); //
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使得对象访问时显示一个特定格式的字符串,但是可以进行数字运算的更多相关文章

  1. 【转载】vue-cli搭建的环境,用nginx做代理服务器,访问时显示:Invalid Host header

    来源:https://blog.csdn.net/Cookysurongbin/article/details/86077241 vue-cli搭建的环境,用nginx做代理服务器,访问时显示:Inv ...

  2. 页面进行ajax时 显示一个中间浮动loading

    先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的loading弹层. 适用于触屏和pc页面. /* 页面进行ajax时 显示一个中间浮动loading @auther ...

  3. QT:窗口最小化时显示一个小浮标

    有些窗口在自身最小化时要在桌面上显示一个小浮标,让用户利用这个小浮标进行各种操作(例如迅雷的悬浮窗一样),我试着用QT实现一下这个功能. PS:本来以为这个功能很简单,却搞了我两个晚上,泪奔... 思 ...

  4. web页面过一段时间再次访问时显示数据库连接错误

    这个问题是我之前遇到的,过了很久才想着去解决它,因为这也没多大影响,无非就是再访问一次的问题,后来有一次观察网站的运行情况时,发现这个问题还挺严重,如果一直用,就不会出现问题,如果中间歇一会,再用就会 ...

  5. listview 没数据内容时显示一个提示文本

    listview和textview 1:1.listview无内容的时候本身是不显示的,所以textview会显示 getlistview获取系统定义的listview

  6. QC9.2登陆时显示一个X号

    这个是因为浏览器安全设置的问题,具体解决步骤如下: 进入“工具-Internet选项”设置窗口,进入“高级”选项卡,将“安全”设置中的“启用内存保护减少联机攻击”选项的勾选去掉,然后应用并确定.重启浏 ...

  7. v关于使用Glide加载图片失败时显示自己特定的图片

    Glide是Android加载图片的一个框架. 常用加载图片到imageView:Glide.with(this).load(url).into(ImageView imageview). 当加载失败 ...

  8. 显示器如何显示一个YUV422格式的图形

    记录在开发过程中对知识点的一些理解: 在开发渲染程序的过程中,需要对视屏文件进行解码解码后特效文件的叠加,使用的技术是(FFmpeg+DirectX) 解码出来的视屏数据格式是YUYV,使用Direc ...

  9. 一日一练-JS toString 和valueOf 方法的联系与区别

    子曰:类型转换中toString 和valueOf 的联系与区别分析 首先是看看ES5 的规范是如何进行说明的 在这里有几个基础知识点需要了解一下: [[Class]] [[Class]] 属于Obj ...

随机推荐

  1. 1.appium工作原理及环境搭建

    1.appium: 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生应用,web应用和混合应用. 2.工作原理: 3.搭建appium环境: (1)安装python和nod ...

  2. [转]JS设计模式-单例模式(二)

    单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等.在javaScript开发中 ...

  3. ACMer之歌

    <<死了都要编>> 死了都要编 不动态规划不痛快 算法多深只有这样 才足够表白 死了都要编 不A星算法不痛快 宇宙毁灭星还在 把每天当成是比赛来编程 一分一秒都编到汗水掉下来 ...

  4. poj 1269 Intersecting Lines(判断两直线关系,并求交点坐标)

    Intersecting Lines Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12421   Accepted: 55 ...

  5. JS---案例:tab切换效果

    案例:tab切换效果 获取所有的li标签 第一件事:把这个a所在的所以兄弟元素的类样式全部移除 (removeAttributes) 第二件事:当前点击的a父级元素li (点击这个a所在的所在元素li ...

  6. NFS挂载服务具体的实施方案

    1.服务器磁盘共享实施方案 第一步:安装NFS和rpc. 1. 安装nfs-utils:NFS主程序,rpcbind:PRC主程序 nfs-utils:NFS主程序,包含rpc.nfsd  rpc.m ...

  7. IO流10 --- 缓冲流(字节型)实现非文本文件的复制 --- 技术搬运工(尚硅谷)

    字节型缓冲流,BufferedOutputStream默认缓冲区大小 8192字节byte,满了自动flush() @Test public void test6(){ File srcFile = ...

  8. Lab2 内存管理(实现细节)

    lab2 中的变动 bootloader 的入口发生了改变 bootloader不像lab1那样,直接调用kern_init函数,而是先调用位于lab2/kern/init/entry.S中的kern ...

  9. Uva10817 Headmaster's Headache

    https://odzkskevi.qnssl.com/b506a3c20adad78678917d1ff4c9b953?v=1508327485 [题解] dp[i][S1][S2]表示前i个教师选 ...

  10. 洛谷P1244 [NOI2000] 青蛙过河 [2017年4月计划 动态规划07]

    P1244 青蛙过河 题目描述 有一条河,左边一个石墩(A区)上有编号为1,2,3,4,…,n的n只青蛙,河中有k个荷叶(C区),还有h个石墩(D区),右边有一个石墩(B区),如下图所示.n只青蛙要过 ...