深入理解JavaScript中的toString,valueOf属性

前言

原始类型:在javascript中有三种主要的原始类型,数值、字符串、布尔值,当使typeof操作符时分别返回'number''string''boolean',还有另外两个是'undefined''null',其余类型都是对象类型。
包装对象:可以把原始类型的值包装成对象,三种原始类型的包装对象分别为NumberStringBoolean,当使用new Number()创建一个数字时,typeof操作会返回'object'而非number,而通过调用数字对象的valueOf方法可以返回该数字对象的原始类型的值。由于包装对象的存在,原始类型也可以调用包装对象上的方法和参数,调用时JavaScrip引擎会自动将原始类型的值转为包装对象实例,调用结束立即销毁实例。


一、概述

javascript 中几乎所有类型都具有toStringvalueOf属性。几乎所有的类型对象比如Number,String,Boolean,Array,Function,Object,Date,RegExp的原型对象上都有各自的toStringvalueOf方法的实现,故它们的实例化的对象自然就继承了这两个方法。下面看一下这些类型的原型对象上是否有这两个方法的实现:

代码示例:
Number.prototype.hasOwnProperty('toString');    //输出true
Number.prototype.hasOwnProperty('valueOf');    //输出true
String.prototype.hasOwnProperty('toString');    //输出true
String.prototype.hasOwnProperty('valueOf');    //输出true
Boolean.prototype.hasOwnProperty('toString');    //输出true
Boolean.prototype.hasOwnProperty('valueOf');    //输出true
Array.prototype.hasOwnProperty('toString');     //输出true
Array.prototype.hasOwnProperty('valueOf');     //输出false 
Function.prototype.hasOwnProperty('toString');     //输出true
Function.prototype.hasOwnProperty('valueOf');     //输出false
Object.prototype.hasOwnProperty('toString');     //输出true
Object.prototype.hasOwnProperty('valueOf');     //输出true
Date.prototype.hasOwnProperty('toString');     //输出true
Date.prototype.hasOwnProperty('valueOf');     //输出true
RegExp.prototype.hasOwnProperty('toString');     //输出true
RegExp.prototype.hasOwnProperty('valueOf');     //输出false
说明:hasOwnProperty用于查看某个对象本身是否具有某属性,只在对象本身查找不在该对象的原型链上查找

上面代码中,只有Array,Function,RegExp的原型上没有valueOf属性,但是为什么其实例化对象能调用该方法呢?我们都知道上面所有列举的类型的原型(prototype)都是继承于Object的原型(prototype)的,当Array,Function,RegExp的实例化对象找不到某个属性时会沿着原型链往上找,直到找到或给出undefined。其实例对象调用的是Object原型上的valueOf


二、toString的作用

1.将值转换为字符串形式并返回,不同类型的toString方法各有不同

类型 toString()的作用
Number 返回文本表示,可接收一个参数表示输出的进制数,默认为十进制,注意:10..toString()会把第一个.当作小数点
String 直接返回原字符串值
Boolean 返回文本表示'true'或'false'
Object 返回[object 类型名],Object类型调用该方法时返回[object Object]
Array 将数组元素转换为字符串,用逗号拼接并返回
Function 直接返回函数的文本声明
Date 返回日期的文本表示, eg:'Sat Apr 21 2018 16:07:37 GMT+0800 (中国标准时间)'
RegExp 返回文本格式为'/pattern/flag',其中pattern是正则表达式,flag是匹配模式:g:全局匹配、i:不分大小写、m:多行匹配;eg:'/\[bc\]at/g'

2.判断对象的类型

代码示例:
var a = new Object();
a.toString();      //"[object Object]"
a.toString.call(a);  //"[object Object]"
Object.prototype.toString.call(a);  //"[object Object]"
Object.prototype.toString.call(Object); //"[object Function]"
Object.prototype.toString.call(Object.prototype);   //"[object Object]"

上面提到Object.prototype.toString()可以返回"[object 调用该方法的对象类型]",所以说是不是可以通过这个方法来判断对象的类型。只要让对象直接调用该方法即可,这需要借助Function.prototype.call方法。

Object.prototype.toString.call(1);   //"[object Number]"
Object.prototype.toString.call('2');    //"[object String]"
Object.prototype.toString.call(true);    //"[object Boolean]"
Object.prototype.toString.call([]);      //"[object Array]"
Object.prototype.toString.call(function(){});    //"[object Function]"
Object.prototype.toString.call(new Date());      //"[object Date]"
Object.prototype.toString.call(/^hello world$/);  //"[object RegExp]"

三、valueOf的作用
类型 valueOf()的作用
Number 返回原始类型的数字值
String 返回原始类型的字符串值
Boolean 返回原始类型的Boolean
Object 返回对象本身
Array 方法继承于Object.prototype,返回原数组
Function 方法继承于Object.prototype,返回函数本身
Date 方法等同于getTime,返回时间戳
RegExp 方法继承于Object.prototype,返回值本身

四、toString和valueOf的关系

两者在类型转换中扮演着重要的角色,两者关系与javascript的类型转换息息相关,下面说下javascript的类型转换及其原则

1.强制转换: Number()、String()、Boolean()

示例://原始类型的强制转换
Number(123) // 123
Number('123') // 123
Number('a123b') // NaN
Number('') // 0
Number(true) // 1
Number(false) // 0
Number(undefined) // NaN
Number(null) // 0
String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"
//下面5种情况为false,其余情况为true
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

以上是NumberStringBooleannullundefined对于原始类型的强制转换的规则,但是当Number()String()遇到对对象的强制转换时情况就不同了,这个时候就会用到toString(),valueOf()方法了。

Number(对象)
调用对象的valueOf方法,若返回原始类型的值,则遵照上面的"非对象强制转换规则",若还是返
回对象,则调用toString方法,若返回原始类型的值,则遵照上面的"非对象强制转换规则",
若返回对象则报错
String(对象)
调用对象的toString方法,若返回原始类型的值,则遵照上面的"非对象强制转换规则",若还是返
回对象,则调用valueOf方法,若返回原始类型的值,则遵照上面的"非对象强制转换规则",
若返回对象则报错

2.自动类型转换

情况一:两个不同类型的值进行数值运算
情况二:对非Boolean类型进行Boolean运算
情况三:对非数值类型使用一元运算符(+ 、-)

规则:预期什么类型的值,就调用该类型的转换函数。
若预期为String类型的值,那么就用String()来进行强转。
如果该位置即可以是String,也可能是Number,那么默认为Number。
一般Number的优先级高于String
//1.二元运算符+若有一个参与运算的数值为String则预期为String:
'3'+1;  //31
'3' + true // "3true"
'3' + {} // "3[object Object]"
'3' + [] // "3"
'3' + function (){} // "3function (){}"
'3' + undefined // "3undefined"
'3' + null // "3null"
//2.二元运算符 - 、* 、/ 预期一般为Number:
'7' - '2' // 5
'7' * '2' // 14
true - 2  // -1
false - 1 // -1
'3' * []    // 0
false / '3' // 0
'abcd' - 2   // NaN
null + 2 // 2
undefined + 1 // NaN
//3.一元运算符预期为Number:
+'abcde' // NaN
-'abcde' // NaN
+true // 1
-false // 0
参考文章:

JavaScript 标准参考教程(alpha)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容