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

JavaScript 的 valueOf() 方法

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

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

1
2
3
4
<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 对象，并把它转换成字符串：

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

脚本输出：true。

先看一例：

1
2
3
4
5
6
7
8
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中实验！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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方法……另一个我们暂时可以理解为===操作符不进行隐式转换，因此不调用它们。为了追究真相，我们需要更严谨的实验。

1
2
3
4
5
6
7
8
9
10
11
12
13
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。

1
2
3
4
5
6
7
8
9
10
11
12
13
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那里继承过来的，我们再去掉它看看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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的高。可以这样说，所有JS数据类型都拥有valueOf和toString这两个方法，null除外。它们俩解决javascript值运算与显示的问题。在程序应用非常广泛。下面我们逐一来给大家介绍下。

JavaScript 的 valueOf() 方法

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

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

1
2
3
4
<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 对象，并把它转换成字符串：

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

脚本输出：true。

先看一例：

1
2
3
4
5
6
7
8
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中实验！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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方法……另一个我们暂时可以理解为===操作符不进行隐式转换，因此不调用它们。为了追究真相，我们需要更严谨的实验。

1
2
3
4
5
6
7
8
9
10
11
12
13
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。

1
2
3
4
5
6
7
8
9
10
11
12
13
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那里继承过来的，我们再去掉它看看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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的高。

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

JavaScript 的 valueOf() 方法

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

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

1
2
3
4
<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 对象，并把它转换成字符串：

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

脚本输出：true。

先看一例：

1
2
3
4
5
6
7
8
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中实验！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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方法……另一个我们暂时可以理解为===操作符不进行隐式转换，因此不调用它们。为了追究真相，我们需要更严谨的实验。

1
2
3
4
5
6
7
8
9
10
11
12
13
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。

1
2
3
4
5
6
7
8
9
10
11
12
13
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那里继承过来的，我们再去掉它看看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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的高。

转载一篇关于toString和valueOf的更多相关文章

  1. javascript之toString()和valueOf()函数

    1.我们为什么要了解这两种方法 众所周知,toString()函数和valueOf函数,这两个函数是Object类的对象生来就拥有的,而且他们还可以允许我们重写,那么,这两个函数到底有什么用呢? 从名 ...

  2. JavaScript系列-----Object之toString()和valueOf()方法 (2)

    深入理解toString()和valueOf()函数 1.我们为什么要了解这两种方法 众所周知,toString()函数和valueOf函数,这两个函数是Object类的对象生来就拥有的,而且他们还可 ...

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

    作用 toString()的作用是返回一个反映这个对象的字符串; valueOf()的作用是返回它相应的原始值; 异同点 共同点:在 JavaScript 中,toString()方法和valueOf ...

  4. 简单说 JavaScript中的tostring( ) 与 valueOf( )方法

    说明 所有的对象都继承有toString() 和 valueOf() 方法,对象到字符串,对象到数字的转换,会通过调用待转换对象的这两个方法中的一个来完成. 解释 toString( )方法的作用是: ...

  5. 探究toString()和valueOf()

    1.用法如下:toString()方法:返回对象的字符串表示. 对象 操作 Array 将 Array 的元素转换为字符串.结果字符串由逗号分隔,且连接起来. Boolean 如果 Boolean 值 ...

  6. js函数--关于toString和valueOf

    js函数--关于toString和valueOf 标签(空格分隔): JavaScript 今天看到一个试题,实现如下语法的功能: var a = add(2)(3)(4); //9 这个就是一个高阶 ...

  7. JavaScript引用类型之Array数组的toString()和valueof()方法的区别

    一.转换方法 1.在JavaScript中几乎所有对象都具有toLocaleString().toString和valueof()方法,因为,所有的对象都继承自Object,而前面所说的方法都是Obj ...

  8. 上一篇括号配对让人联想起catalan数，顺便转载一篇归纳的还不错的文章

    转载请注明来自souldak,微博:@evagle 怎么样才是合法的组合? 只要每一时刻保证左括号的数目>=右括号的数目即可. 直接递归就行,每次递归加一个括号,左括号只要还有就能加,右括号要保 ...

  9. 区分javascript中的toString(),toLocaleString(),valueOf()方法

    首先我们随意创建一个对象,这很简单,打开FF浏览器的Firebug切换到控制台或者打开webkit浏览器的审查元素功能. 输入以下内容: var obj1=[1,2,3,4,5] var obj2=[ ...

随机推荐

  1. Android 截屏与 WebView 长图分享经验总结

    最近在做新业务需求的同时,我们在 Android 上遇到了一些之前没有碰到过的问题,截屏分享. WebView 生成长图以及长图在各个分享渠道分享时图片模糊甚至分享失败等问题,在这过程中踩了很多坑,到 ...

  2. mysql5.7安装教程图解

    启动安装包: 左边是你电脑上可以连接到mysql的软件,比如Visual Studio,Eclipse,PyCharm等,中间是需求的版本或者额外组件,右边是状态. 选择一个选项,然后点击下面的che ...

  3. 缓存之EHCache（一）

    源文: http://blog.csdn.net/l271640625/article/details/20528573 一.简介 非常简单,而且易用.     ehcache 是一个非常轻量级的缓存 ...

  4. vue首次赋值不触发watch

    可通过其immediate 属性进行配置,默认为false watch:{ "aaa":{ immediate:true, handler:function(){ } }

  5. Laravel Eloquent 自定义返回字段

    返回指定字段 Book::select("price", "name")->all(); 返回关系字段关联的属性 Book::select("p ...

  6. java 判断字符串什么编码类型

    public static String getEncoding(String str) { String encode = "GB2312"; try { if (str.equ ...

  7. Js引擎解析执行 阅读笔记

    Js引擎解析执行 阅读笔记 一篇阅读笔记 http://km.oa.com/group/2178/articles/show/145691?kmref=search&from_page=1&a ...

  8. win7 64 下 VS2008 调试、退出时错误的解决

    最近调试老程序的时候发现原来的VS2008会偶尔在调试C++程序的时候出现程序未响应的情况,开始还以为是个案,后来出现的频率越来越高完全影响心情啊!! 准备花时间解决一下这个问题.网上搜索没有发现任何 ...

  9. 015 在大数据中，关于mapreduce的粗略优化，以及mapreduce的处理过程解释

    使用的案例是wordcountmapreduce的程序演示 一: 1.源程序 2.优化的切入点 3.优化的部分代码 二:wordcount的处理过程 1.重点 一个块对应一个map任务. 而做单词统计 ...

  10. U盘装机教程

    http://winpe.uqidong.asia/upzxpxt/upzxpxt.html