toString()和valueOf()之间的区别

最新推荐文章于 2024-01-06 04:35:05 发布

原创最新推荐文章于 2024-01-06 04:35:05 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#111

原生JS 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了JavaScript中toString()和valueOf()方法的功能与用法，包括基本数据类型、复合数据类型及内置对象类型的处理方式，并提供了实用案例。

toString()和valueOf()都是对象的方法。toString()方法返回反映这个对象的字符串。valueOf()方法如果存在任意原始值，它就默认将对象转换为表示它的原始值；对象是复合值，而大多数对象无法真正表示为一个原始值，因此默认的valueOf()方法简单地返回对象本身，而不是返回一个原始值。

【1】undefined和null没有toString()和valueOf()方法

undefined.toString();//错误
null.toString();//错误

undefined.valueOf();//错误
null.valueOf();//错误

【2】布尔型类型

true.toString();//'true'
false.toString();//'false'
Boolean.toString();//"function Boolean() { [native code] }"
typeof Boolean.toString();//string

true.valueOf();//true
false.valueOf();//false
Boolean.valueOf();//Boolean() { [native code] }
typeof Boolean.valueOf();//'function'

【3】字符串类型

'1'.toString();//'1'
''.toString();//''
'abc'.toString();//'abc'
String.toString();//"function String() { [native code] }"

'1'.valueOf();//'1'
''.valueOf();//''
'abc'.valueOf();//'abc'
String.valueOf();//String() { [native code] }
typeof String.valueOf();//'function'

【4】数值类型

Number.toString();//"function Number() { [native code] }"
toString()对于数值的转换，会直接转换成字符串，如果数值前面有（+）则会省略。
整数直接跟上.toString()形式，会报错，提示无效标记，因为整数后的点会被识别为小数点
0.toString();//Uncaught SyntaxError: Invalid or unexpected token
可以这样写：
(0).toString();//'0'

Number.valueOf();//Number() { [native code] }
typeof Number.valueOf();//'function'
[注意]-0的valueOf()值是-0，而-0的toString()值是'0'
对于数值的注意写法同上

【5】对象Object类型及自定义对象类型

{}.toString();//报错，Unexpected token .
({}).toString();//[object Object]
({a:123}).toString();//[object Object]
Object.toString();//"function Object() { [native code] }"
function Person(){
    this.name = 'test';
}
var person1 = new Person();
person1.toString();//"[object Object]"

常常使用Object.prototype.toString()来进行类型识别，返回代表该对象的[object 数据类型]字符串表示

[注意]Object.prototype.toString()可以识别标准类型及内置对象类型，但不能识别自定义类型

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]

console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]

除了类型识别之外，还可以进行其他识别，如识别arguments或DOM元素

(function(){
    console.log(Object.prototype.toString.call(arguments));//[object Arguments]
})()
console.log(Object.prototype.toString.call(document));//[object HTMLDocument]

valueOf()

{}.valueOf();//报错，Unexpected token .
({}).valueOf();//Object{}
typeof ({}).valueOf();//'object'
({a:123}).valueOf();//Object{a:123}
Object.valueOf();//Object() { [native code] }
typeof Object.valueOf();//'function'

function Person(){
    this.name = 'test';
}
var person1 = new Person();
person1.valueOf();//Person {name: "test"}

【6】函数Function类型

toString()
函数Function类型返回函数代码，当我们对一个自定义函数调用toString()方法时，可以得到该函数的源代码；如果对内置函数使用toString()方法时，会得到一个’[native code]’字符串。因此，可以使用toString()方法来区分自定义函数和内置函数

function test(){
    alert(1);//test
}
test.toString();/*"function test(){
                    alert(1);//test
                  }"*/
Function.toString();//"function Function() { [native code] }"

valueOf()
函数Function类型返回原函数

function test(){
    alert(1);//1
}
test.valueOf();/*function test(){
                    alert(1);//1
                  }*/
Function.valueOf();//Function() { [native code] }

【7】数组Array类型

toString()
数组Array类型返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

[].toString();//''
[1].toString();//'1'
[1,2,3,4].toString();//'1,2,3,4'
Array.toString();//"function Array() { [native code] }"

valueOf()
数组Array类型返回原数组

[].valueOf();//[]
[1].valueOf();//[1]
[1,2,3,4].valueOf();//[1,2,3,4]
Array.valueOf();//Array() { [native code] }

【8】时间Date类型

toString()
时间Date类型返回表示当前时区的时间的字符串表示

(new Date()).toString();//"Sun Jun 10 2017 10:04:53 GMT+0800 (中国标准时间)"
Date.toString();//"function Date() { [native code] }"

valueOf()
和其他对象不同，时间Date类型返回一个数字值，它是当前时间值

Date.now();//1465115123742
(new Date()).valueOf();//1465115123742
typeof (new Date()).valueOf();//'number'
Date.valueOf();//Date() { [native code] }

【9】正则表达式RegExp类型

toString()
正则表达式RegExp类型返回正则表达式字面量的字符串表示

/ab/i.toString();//'/ab/i'
/mom( and dad( and baby)?)?/gi.toString();//'mom( and dad( and baby)?)?/gi'
RegExp.toString();//"function RegExp() { [native code] }"

valueOf()
正则表达式RegExp类型返回原正则对象

/ab/i.valueOf();///ab/i
/mom( and dad( and baby)?)?/gi.valueOf();//mom( and dad( and baby)?)?/gi
RegExp.valueOf();//RegExp() { [native code] }

错误Error类型

Error.toString();//"function Error() { [native code] }"
RangeError.toString();//"function RangeError() { [native code] }"
ReferenceError.toString();//"function ReferenceError() { [native code] }"
SyntaxError.toString();//"function SyntaxError() { [native code] }"
TypeError.toString();//"function TypeError() { [native code] }"
URIError.toString();//"function URIError() { [native code] }"

Error.valueOf();//Error() { [native code] }
RangeError.valueOf();//RangeError() { [native code] }
ReferenceError.valueOf();//ReferenceError() { [native code] }
SyntaxError.valueOf();//SyntaxError() { [native code] }
TypeError.valueOf();//TypeError() { [native code] }
URIError.valueOf();//URIError() { [native code] }