再学JS--数据类型转换之显式转换

原始值转布尔值

在JavaScript中,只有6种值可以被转换为false,其他都会被转换为true

// 当Boolean函数不传任何参数时,返回false
console.log(Boolean())  // false

console.log(Boolean(false))  // false

console.log(Boolean(''))  // false
console.log(Boolean(+0))  // false
console.log(Boolean(-0))  // false
console.log(Boolean(NaN))  // false
console.log(Boolean(undefined))  // false
console.log(Boolean(null))  // false

原始值转数字

可以通过Number函数将类型转换成数字类型,如果不传参数的话,返回+0;如果参数无法被转换为数字,则返回NaN

console.log(Number())  // +0

console.log(Number(undefined))  // NaN
console.log(Number(null))  // NaN

console.log(Number(false))  // 0
console.log(Number(true))  // 1

console.log(Number('123'))  // 123
console.log(Number('-123'))  // -123
console.log(Number('1.2'))  // 1.2
console.log(Number('000123'))  // 123
console.log(Number('-000123'))  // -123

console.log(Number('0x11'))  // 17
console.log(Number(''))  // 0
console.log(Number(' '))  // 0
console.log(Number('123 123'))  // NaN
console.log(Number('foo'))  // NaN
console.log(Number('100a'))  // NaN

如果通过Number转换函数传入一个字符串,它会试图将其转换成一个整数或浮点数,而且会忽略所有前导0,如果有一个字符不是数字,结果都会返回NaN。

parseInt只解析整数,parseFloat则可以解析整数和浮点数,如果字符串前缀是0x或0X,parseInt将其解释为十六进制数,parseInt和parseFloat都会跳过任意数量的前导空格,尽可能解析更多数值字符,并忽略后面的内容。如果第一个非空字符是非法的数字直接量,将最终返回NaN

console.log(parseInt('3 abc')) // 3
console.log(parseFloat('3.14 abc')) // 3.14
console.log(parseInt('-12.34')) // -12
console.log(parseInt('0xFF')) // 255
console.log(parseFloat('.1')) // 0.1
console.log(parseInt('0.1')) // 0 

原始值转字符

使用String函数将类型转换成字符串类型,如果String不传参数,返回空字符串。

console.log(String())  // 空字符串

console.log(String(undefined))  // undefined
console.log(String(null))  // null

console.log(String(true))  // true
console.log(String(false))  // false

console.log(String(0))  // 0
console.log(String(-0))  // 0
console.log(String(NaN))  // NaN
console.log(String(Infinity))  // Infinity
console.log(String(-Infinity))  // -Infinity
console.log(String(1))  // 1

原始值转对象

原始值到对象的转换非常简单,原始值通过调用String()、Number()或者Boolean()构造函数,转换为它们各自的包装对象。

null和undefined属于例外,当将它们用在期望是一个对象的地方都会造成一个类型错误,而不是执行正常的转换。

var a = 1
console.log(typeof a)  // number

var b = new Number(a)
console.log(typeof b)  // object

对象转布尔值

所有对象(包含数组和函数)都会被转换为true

console.log(Boolean(new Boolean(false)))  // true

对象转换

JavaScript有两个不同的方法来执行转换,toString和valueOf

所有对象除了null和undefined之外的任何值都具有toString方法,通常情况下,它和使用String方法返回的结果是一致的。

然而JavaScript下的很多类根据各自的特点,定了更多版本的toString方法,例如:

  1. 数组的toString方法将每个数组元素转换成一个字符串,并在元素之间添加逗号后合并成字符串
  2. 函数的toString方法返回源代码字符串
  3. 日期的toString方法返回一个可读的日期和时间字符串
  4. RegExp的toString方法返回一个表示正则表达式直接量的字符串
console.log({}.toString()) // [object Object]

console.log([].toString()) // ""
console.log([0].toString()) // 0
console.log([1, 2, 3].toString()) // 1,2,3
console.log(function(){}.toString()) // function(){}
console.log(/\d+/g.toString()) // /\d+/g
console.log(new Date(2010, 0, 1).toString()) // Fri Jan 01 2010 00:00:00 GMT+0800 (中国标准时间)

另一个转换对象的函数时valueOf,表示对象的原始值。默认的valueOf方法返回这个对象本身,数组、函数、正则简单的继承了这个方法,也会返回对象本身。日期是一个例外,它会返回它的一个内容表示:1970年1月1日以来的毫秒数

var date = new Date(2017, 4, 21)
console.log(date.valueOf())  // 1495296000000

对象转字符串

对象转字符串可以概括如下:

  1. 如果对象具有toString方法,则调用该方法。如果它返回一个原始值,JavaScript将这个值转换为字符串,并返回这个字符串结果
  2. 如果对象没有toString方法,或者这个方法并不返回一个原始值,那么JavaScript会调用valueOf方法。如果存在这个方法,则调用它。如果返回值是原始值,JavaScript将这个值转换为字符串,并返回这个字符串的结果
  3. 否则,JavaScript无法从toString和valueOf获得一个原始值,这时它将抛出一个类型错误异常。

对象转数字

  1. 如果对象具有valueOf方法,并返回一个原始值,则JavaScript将这个原始值转换为数字并返回这个数字
  2. 否则,如果对象具有toString方法,并返回一个原始值,则JavaScript将其转换并返回
  3. 否则,JavaScript抛出一个类型错误异常
console.log(Number({}))  // NaN
console.log(Number({a:1}))  // NaN

console.log(Number([]))  // 0
console.log(Number([0]))  // 0
console.log(Number([1,2,3]))  // NaN  Number('1,2,3')
console.log(Number(function(){}))  // NaN
console.log(Number(/\d+/g))  // NaN
console.log(Number(new Date(2017, 4, 21)))  // 1495296000000
console.log(Number(new Error('a')))  // NaN

JSON.stringify

  1. 处理基本类型时,以使用toSting基本相同,结果都是字符串,除了undefined

    console.log(JSON.stringify(null))  // null
    console.log(JSON.stringify(undefined))  // undefined,不是字符串undefined
    console.log(JSON.stringify(true))  // true
    console.log(JSON.stringify(42))  // 42
    console.log(JSON.stringify('42'))  // '42'
    
  2. 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

    console.log(JSON.stringify([new Number(1), new String('false'), new Boolean(false)]))  // [1,"false",false]
    
  3. undefined、任意的函数以及symbol值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成null(出现在数组中时)

    console.log(JSON.stringify({x: undefined, y: Object, z: Symbol('')}))  // '{}'
    console.log(JSON.stringify([undefined, Object, Symbol('')]))  // '[null,null,null]'
    
  4. JSON.stringify有第二个参数replacer,它可以是数组或者函数,用来指定对象序列化过程中哪些属性应该被处理,哪些应该被排除

    var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}
    var jsonString = JSON.stringify(foo, replacer)
    console.log(jsonString)  // {week: 45, month: 7}
    
    var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}
    var jsonString = JSON.stringify(foo, ['week', 'model'])
    console.log(jsonString)  // {week: 45, model: 'box'}
    
  5. 如果一个被序列化的对象拥有toJSON方法,那么该toJSON方法就会覆盖对象默认的序列化行为:不是那个对象被序列化,而是调用toJSON方法后的返回值会被序列化

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

推荐阅读更多精彩内容