美文网首页
简单了解 JS 中的类型转换

简单了解 JS 中的类型转换

作者: 一个学前端的码农 | 来源:发表于2020-05-26 00:01 被阅读0次

    JS 中的变量有多种类型值,包括 null 、undefined、number、string、boolean、symbol 等基本类型和 object 对象类型。这些类型值之间的转换十分复杂,往往伴随着隐式强制类型转换,理解它们各自之间的转换规则有助于我们在日常开发中避坑,写出更好的代码。

    undefined 和 null

    使用 == 比较两个值时如果值的类型不同会自动进行类型转换,相对应的 === 则会严格比较类型和值。也许你看过下面的代码

    undefined == null // true
    undefined === null // false
    

    在 JS 中,undefined 和 null 都会被认为是 falsey 假值,因此使用宽松相等运算符 == 的结果是 true,但如果是严格相等运算符 === 那就是 false 了。

    转换为 number

    从其他类型转换为 number 类型有三种方法,分别是Number(x)+xx - '0'。其中使用 Number 函数直接转换属于显式转换,另外两种是隐式转换。我们可以在 Chrome 的控制台验证各个类型转换的结果

    +null  // 0
    +undefined // NaN
    +'4'  // 4
    +'string'  // NaN
    +false  // 0
    +true  // 1
    +Symbol('symbol') // Uncaught TypeError: Cannot convert a Symbol value to a number
    +{ say: 'hello' }  // NaN
    +[]  // 0
    +[1]  // 1
    +[1, 2]  // NaN
    

    你可以多试试其他引用类型,总结一下就是:null 转换数字的结果是 0,undefined
    、字符串、对象被认为是非数字,结果为 NaN ;布尔值 true 转为 1,false 转为 0;对于数组,比较特殊,空数组是 0,只有一个元素并且能够被转为数字类型的值,就转换,否则都是 NaN 。

    转换为字符串

    从其它类型转换为字符串也有三种方式

    • String(s)
    • s + ''
    • 除了 null 和 undefined 外,有构造函数的可以调用 toString()

    同样地,我们在控制台输入表达式来验证下

    var s1 = Boolean(0);
    var s2 = Boolean(1);
    var s3 = new Date();
    var s4 = "12345";
    var s5 = 12345;
    var s6 = null;
    var s7 = undefined;
    var s8 = Symbol('hello')
    var s9 = [1, 2]
    var s10 = []
    var obj = {a: 6}
    
    String(s1)  // false
    String(s2)  // true
    String(s3)  // Sun Apr 19 2020 15:52:42 GMT+0800 (中国标准时间)
    String(s4)  // 12345
    String(s5)  // 12345,
    String(s6)  // null
    String(s7)  // undefined
    String(s8)  // Symbol(hello)
    String(s9)  // 1, 2
    String(s10)  // ''
    String(obj) // [object Object]
    

    可以看到,数字转换为字符串一般是变成加引号的字符串格式,而对于 Boolean 构造函数来说,则是根据构造的值进行转换;null 和 undefined 转换为字符串带了引号;而 object 对象类型则是显示 [object Object],对于个别对象类型如日期,则是转换为时间格式,而如果是空数组,则为空字符串,否则为数组元素的字符串形式。

    转换为布尔值

    如果要把基本类型都转布尔值的话,结果又会如何呢?先来看看通过哪些方式可以转换为 bool 值:

    • Boolean() 函数
    • if (表达式)之类的隐式转换

    同样在 Chrome 的控制台自己输入查看下效果:

    Boolean(null)  // false
    Boolean(undefined)  // false
    Boolean(false)  // false
    Boolean(true)  // true
    Boolean(0)  // false
    Boolean(11)  // true
    Boolean(-0)  // false
    Boolean(NaN)  // false
    Boolean('string')  // true
    Boolean('')  // fasle
    Boolean({}) // true
    Boolean([]) // true
    Boolean(Symbol('hello')) // true
    Boolean(new Object())  // true
    

    结果是,对于转布尔值,除了 nullundefined+0-0NaN''false 转换为 false,其它所有值都转换为 true,包括引用类型。

    对象的转换规则

    上述这些转换中涉及到对象,而对象在转换类型的时候有它自己的一套规则,一般是下面这几个步骤:

    • 如果重写了内部 [[ToPrimitive]] 函数,则优先调用,否则
    • 调用 valueOf(),如果转换结果是原始类型值,则返回
    • 调用 toString() ,如果转换为原始类型值,则返回
    • 如果以上都不行,则报错

    总结

    JavaScript 的类型转换知识点很多,各种类型之间的互相转换要熟悉,有一些坑要特别注意,比如布尔类型的隐式类型转换,经常应用在日常开发的 if 语句中,对于 null 和 undefined 这两个特殊值之间转换处理也需了解,掌握好类型转换可以应用在真实开发中。

    如有错误,请予指正,十分感谢,欢迎交流讨论。

    (完)

    相关文章

      网友评论

          本文标题:简单了解 JS 中的类型转换

          本文链接:https://www.haomeiwen.com/subject/jwqamhtx.html