深入理解Javascript中的valueOf与toString


Posted in Javascript onJanuary 04, 2017

基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下。

toString()

toString()函数的作用是返回object的字符串表示,JavaScript中object默认的toString()方法返回字符串”[object Object]“。定义类时可以实现新的toString()方法,从而返回更加具有可读性的结果。JavaScript对于数组对象、函数对象、正则表达式对象以及Date日期对象均定义了更加具有可读性的toString()方法:

1.array的toString()方法将返回以逗号分隔的数组成员。比如,[1,2,3].toString()会返回字符串”1,2,3″。

2.function的toString()方法将返回函数的文本定义。比如,(function(x){return x*2;}).toString()会返回字符串”function(x){return x*2;}”。

3.RegExp的toString()方法与function的toString()方法类似,将返回正则表达式的文本定义。比如,/\d+/g.toString()会返回字符串”/\\d+/g”。

4.Date的toString()方法将返回一个具有可读性的日期时间字符串。

5.如果 Boolean 值是 true,则返回 “true”。否则,返回 “false”。

valueOf()

valueOf()函数的作用是返回该object自身。与toString()一样,定义类时可以实现新的valueOf()方法,从而返回需要的结果。JavaScript对于Date对象定义了更加具有可读性的valueOf()方法:

1.Date的valueOf()方法将返回一个时间戳数值,该数值为Date对象与1970年1月1日零时的时间差(以毫秒为单位)。其他一律返回对象本身。

在js高程里面有一段代码:

var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组 
alert(colors.toString()); // red,blue,green 
alert(colors.valueOf()); // red,blue,green 
alert(colors); // red,blue,green

三个输出全部一样,那么toString()和valueOf()区别到底是什么?看下一个我写的例子:

var arr = [1,2,3]; 
alert(Array.isArray(arr.valueOf())); 
alert(Array.isArray(arr.toString()));

结果是第一个是true而第二个是false,为什么呢,其实valueOf()调用完以后还是返回一个数组。这个数组被alert的时候会调用toString()函数,所以不是valueOf()和toString()函数相同,而是间接的调用了toString()函数!
进一步测试下:

var arr = [1,2,3]; 
arr.toString = function () { 
  alert("你调用了toString函数"); 
} 
alert(arr.valueOf());

结果就是我们会看到“你调用了toString函数”。

而对于数值,我们可以调用valueOf的时候直接可以获得数字进行计算,不必转化成字符串,所以不会调用toString。反言之,如果我们需要获得操作对象的字符串形式的时候就会调用其toString函数。
验证如下代码:

var bbb = { 
 i: 10, 
 toString: function() { 
 console.log('toString'); 
 return this.i; 
 }, 
 valueOf: function() { 
 console.log('valueOf'); 
 return this.i; 
 } 
} 
alert(bbb);// 10 toString 
alert(+bbb); // 10 valueOf 
alert(''+bbb); // 10 valueOf 
alert(String(bbb)); // 10 toString 
alert(Number(bbb)); // 10 valueOf 
alert(bbb == '10'); // true valueOf 
alert(bbb === '10'); // false

我的理解:valueOf的意思是返回最适合该对象类型的原始值,而toString则是将在该对象类型的原始值以字符串形式返回。

第一个

alert(bbb);// 10 toString

这里我们的alert函数需要是的字符串,所以获取的是字符串,而不是原始值,故而调用了toString

第二个

alert(+bbb); // 10 valueOf

同理,alert要的是字符串不是原始值,其实是+bbb这个东西被调用了toString,而bbb被调用了valueOf

为了验证我们这样写

var a = { 
  i: 1, 
  valueOf: function () { 
    alert("你调用了a的valueOf函数"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你调用了a的toString函数"); 
    return this.i; 
  } 
}; 
var c = { 
  i: +a, 
  valueOf: function () { 
    alert("你调用了c的valueOf函数"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你调用了c的toString函数"); 
    return this.i; 
  } 
}; 
alert(c);

其中让c=+a,那么即可知道结果,果然如此,调用了a的valueOf和c的toString

第三个

alert(''+bbb); // 10 valueOf

同理,我们可以把上一段我写的程序里面的c:+a改成c:''+a

第四个

alert(String(bbb)); // 10 toString

String这个强制转换其实在其内部是调用了传入参数的toString函数……

第五个

alert(Number(bbb)); // 10 valueOf

这个是有区别的,因为bbb的i属性是数值类型的,如果i为11111xxxxx这样的字符串,我们就可以看到调用了bbb的toString了

代码例子:

var c = { 
  i: "11111xxxx", 
  valueOf: function () { 
    alert("你调用了c的valueOf函数"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你调用了c的toString函数"); 
    return this.i; 
  } 
}; 
alert(c);

第六个

alert(bbb == '10'); // true valueOf

这个里面的判等的顺序是,获取原始值,然后判断两边的原始值是否相等,所以调用valueOf

第七个也就是最后一个

alert(bbb === '10'); // false

===操作符不进行隐式转换,判全等的第一个步骤是判断类型,因为类型都不一样了,所以后面什么都不会调用

总结:valueOf偏向于运算,toString偏向于显示。

1、 在进行强转字符串类型时将优先调用toString方法,强转为数字时优先调用valueOf。

2、 在有运算操作符的情况下,valueOf的优先级高于toString。

下面给大家简单说下valueof和tostring的区别。

valueOf():返回最适合该对象类型的原始值;

toString(): 将该对象的原始值以字符串形式返回。

这两个方法一般是交由JS去隐式调用,以满足不同的运算情况。

在数值运算里,会优先调用valueOf(),如a + b;

在字符串运算里,会优先调用toString(),如alert(c)。

以上所述是小编给大家介绍的Javascript中的valueOf与toString,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
javascript动画浅析
Aug 30 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 #Javascript
js实现定时进度条完成后切换图片
Jan 04 #Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 #Javascript
深入理解JavaScript中的预解析
Jan 04 #Javascript
jQuery操作json常用方法示例
Jan 04 #Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 #Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 #Javascript
You might like
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
浅析PHP绘图技术
2013/07/03 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python实现贪吃蛇小游戏
2020/03/21 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
50道外企软件测试面试题
2014/08/18 面试题
生产部主管岗位职责
2014/01/06 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
工程合作意向书范本
2015/05/09 职场文书
欠条范文
2015/07/03 职场文书
中学政教处工作总结
2015/08/13 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Python编程super应用场景及示例解析
2021/10/05 Python
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
全新239军机修复记
2022/04/05 无线电