全面解析JavaScript中的valueOf与toString方法(推荐)


Posted in Javascript onJune 14, 2016

可以这样说,所有JS数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题。在程序应用非常广泛。下面我们逐一来给大家介绍下。

JavaScript 的 valueOf() 方法

valueOf() 方法可返回 Boolean 对象的原始值。

用法booleanObject.valueOf(),返回值为booleanObject 的原始布尔值。如果调用该方法的对象不是 Boolean,则抛出异常 TypeError。

<script type="text/javascript">
var boo = new Boolean(false);
document.write(boo.valueOf());
</script>

以上脚本会输出false。

JavaScript 的 toString() 方法

toString() 方法可把一个逻辑值转换为字符串,并返回结果。

用法 booleanObject.toString(),返回值根据原始布尔值或者 booleanObject 对象的值返回字符串 "true" 或 "false"。如果调用该方法的对象不是 Boolean,则抛出异常 TypeError。

在 Boolean 对象被用于字符串环境中时,此方法会被自动调用。

下面脚本将创建一个 Boolean 对象,并把它转换成字符串:

<script type="text/javascript">
var boo = new Boolean(true);
document.write(boo.toString());
</script>

脚本输出:true。

先看一例:

var aaa = {
i: 10,
valueOf: function() { return this.i+30; },
toString: function() { return this.valueOf()+10; }
}
alert(aaa > 20); // true
alert(+aaa); // 40
alert(aaa); // 50

之所以有这样的结果,因为它们偷偷地调用valueOf或toString方法。但如何区分什么情况下是调用了哪个方法呢,我们可以通过另一个方法测试一下。由于用到console.log,请在装有firebug的FF中实验!

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

乍一看结果,大抵给人的感觉是,如果转换为字符串时调用toString方法,如果是转换为数值时则调用valueOf方法,但其中有两个很不和谐。一个是alert(''+bbb),字符串合拼应该是调用toString方法……另一个我们暂时可以理解为===操作符不进行隐式转换,因此不调用它们。为了追究真相,我们需要更严谨的实验。

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

再看valueOf。

var bb = {
i: 10,
valueOf: function() {
console.log('valueOf');
return this.i;
}
}
alert(bb);// [object Object]
alert(+bb); // 10 valueOf
alert(''+bb); // 10 valueOf
alert(String(bb)); // [object Object]
alert(Number(bb)); // 10 valueOf
alert(bb == '10'); // true valueOf

发现有点不同吧?!它没有像上面toString那样统一规整。对于那个[object Object],我估计是从Object那里继承过来的,我们再去掉它看看。

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

如果只重写了toString,对象转换时会无视valueOf的存在来进行转换。但是,如果只重写了valueOf方法,在要转换为字符串的时候会优先考虑valueOf方法。在不能调用toString的情况下,只能让valueOf上阵了。对于那个奇怪的字符串拼接问题,可能是出于操作符上,翻开ECMA262-5 发现都有一个getValue操作。嗯,那么谜底应该是揭开了。重写会加大它们调用的优化高,而在有操作符的情况下,valueOf的优先级本来就比toString的高。

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

Javascript 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
js中的闭包实例展示
Nov 01 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 #Javascript
Jquery基础之事件操作详解
Jun 14 #Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 #Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 #Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 #Javascript
返回函数的JavaScript函数
Jun 14 #Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 #Javascript
You might like
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
javascript add event remove event
2008/04/07 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
教师队伍管理制度
2014/01/14 职场文书
高中生的自我评价
2014/03/04 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS