美文网首页让前端飞
js 各种基础类型的转换(上)显式转换

js 各种基础类型的转换(上)显式转换

作者: 一只大橘 | 来源:发表于2019-09-26 12:47 被阅读0次

    前言

    JavaScript 中的变量没有类型,但值有类型。变量可以随时持有任何类型的值。

    来来来....跟我一起念,JavaScript的内置类型有。。。。。


    image.png

    JavaScript 的内置类型:

    • 空值(null)
    • 未定义(undefined)
    • 布尔值(boolean)
    • 数字(number)
    • 字符串(string)
    • 对象(object)
    • 符号(symbol,ES6 中新增)
    image

    要区分 undefinedundeclared状态:
    变量已声明,但未初始化,它的值就是 undefined;
    变量未声明,就是 undeclared,访问未声明变量会报错;

    特别注意:typeof null == "object",这已被设计和维护 JavaScript 的委员会 T39 认定是一个错误。但这个bug由来已久,也许永远也不会修复,因为这牵涉到太多的 Web 系统。

    image.png

    JS基础之类型转换

    js中的类型转化有两种,显式类型转换和隐式类型转换。在隐式类型转换之前,我们需要先了解显式类型转换,因为隐式类型转换是基于显式类型转换的。

    JS中的显式类型转化:

    1. 强制类型转换

    ES中规定了可以使用强制类型转换来处理转换值的类型。使用强制类型转换可以访问特定的值。ES中可用的强制类型转换方法有三种:

    Number(value)-----把给定值的值转换成数字类型
    String(value)-----把给定的值转换成字符串类型
    Boolean(value)-----把给定的值转换成布尔型
    Number(value): Number(value)只能将特定的值转化成数字,跟数字无关的值返回结果就是NaN。例如

    var result = Number("123")   //123
    var result1 = Number("123px")   //NaN
    var result2 = Number(null)  //0
    var result3 = Number(undefined) //NaN
    var result4 = Number("a")   //NaN
    var result5 = Number("1.2")  //1.2
    var result6 = Number("1.2.3")   //NaN
    var result7 = Number("true")    //1
    var result8 = Number("false")   //0
    var result9 = Number("")  //0
    

    对象类型进行数据类型转换时,会先调用自身的valueOf()和toString()方法,valueOf()和toString()方法是在Object.prototype上定义的,也就是说所有的对象上都会继承到valueOf()和toString()方法。

    例如部分内置对象调用valueOf()方法时的返回值类型如下所示:
    Array: 返回数组本身(对象类型)
    Boolean: 返回布尔值(原始类型)
    Data: 返回毫秒值(原始类型)
    Function: 函数函数本身(对象类型)
    Number:数字值(原始类型)
    Object: 对象本身(对象类型)

    String:字符串值(字符串类型)

    valueOf():返回这个对象逻辑上对应的原始类型的值,比如说,String()包装对象的valueOf,应该返回这个对象所包装的字符串。
    toString(): 返回这个对象的字符串表示,用一个字符串来描述这个对象的内容。

    对象类型的转换为数字时是先调用对象的valueOf()方法或toString()方法将对象类型的值转换为原始类型的值,然后再将转换之后的结果再用Number()函数进行转换。

    首先调用自身的valueOf()方法,如果返回基本类型的值,再调用Number()函数。
    如果valueOf()方法返回的不是基本类型的值,则再调用toString()方法,如果返回基本类型的值,再调用Number()函数进行转换。
    如果toString()和valueOf()返回的不是基本类型的值,则抛出异常。
    String(value): String(value)可以把任何传进来的值转化为字符串

    对象类型转换为字符串和对象类型转换为Number()的过程类似,只不过对象类型是先调用toString()方法,再调用valueOf()方法。

    首先调用toString()方法,如果返回基本类型的值,则用String()构造函数转换该值。
    如果toString()方法返回的结果不是基本类型,再调用valueOf()方法,如果返回基本类型的值,则用String()构造函数转换该值。
    如果toString()和valueOf()方法返回的结果均不是基本类型的值,则抛出异常。
    Boolean(value): 当传进来的值是“”(空串),null, 0, undefined, NaN时返回结果为false,其他值均为true。

    var result = Boolean("")   //false
    var result1 = Boolean(0)   //false
    var result2 = Boolean(null)  //false
    var result3 = Boolean(NaN)   //false
    var result4 = Boolean(undefined)   //false
    var result5 = Boolean("undefined")  //true
    
    1. ES还提供了一些全局方法可以进行类型转换
      parseInt()和parseFloat():把非数字的原始值转换为数字类型,前者是把值转换成整数,后者是把值转换成浮点数。
      parseInt()和parseFloat()方法在判断字符串是否是数字值前,都会仔细分析这个字符串。

    注意:parseInt()方法首先查看位置0处的字符,判断它是否是个有效数字;如果不是,该方法将返回NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样的测试。这一过程将继续到发现非有效数字为止,此时parseInt()将把该字符之前的字符串转换为数字。
    例如,parseInt(“123abc123”)的输出结果会是123,因为当它检查到a时,就会停止检测过程。

    var result = parseInt(123.3);       //123
    var result1 = parseInt(true/false);  //NaN
    var result2 = parseInt("10px");   //10
    var result3 = parseInt("123.3");   //123
    

    parseInt()方法还有一个作用,就是把指定的进制数转换为10进制数,例如:
    parseInt(“AF”,16);的返回结果是175,即把16进制数AF转换为10进制数。如果没有指定基底,则需要首先判断前边的字符串是否是以“0”或“0x”开头,如果以“0”开头,则以8(IE)或10为基底,如果以“0x”开头,则默认以16进制为基底,其他的均表示以10为基底。

    var result = parseInt("010",8);   //8
    var result1 = parseInt("010");    //10
    var result2 = parseInt("0x16");   //22
    var result3 = parseInt("0x16",16);  //22
    

    parseFloat的用法和parseInt的用法基本相同,不过,对于这个方法来说,第一个出现的小数点是有效字符。还有就是字符串必须是用十进制表示的字符串,不识别8进制和16进制。

    var result = parseFloat("010");   //10 会忽略0
    var result2 = parseFloat("0x16");   //0
    var result3 = parseFloat("11.22.33",);  //11.22
    var result2 = parseFloat("AF");   //NaN
    

    此外,parseFloat()方法也没有基模式。

    另外一个全局方法就是toString()方法。3种主要的原始数据类型Number类型,String类型,Boolean类型都有toString()方法。null和undefined没有toString()方法。

    Number类型的数据有两种模式的toString方法,即默认模式和基模式,默认模式的toString()方法只是会输出对应的字符串。而基模式则是把对应的十进制数转换为指定的进制数。例如:

    var num = 8,
        num1 = 0x10;
    var result = num.toString();    //"8"
    var result1 = num.toString(2);   //1000
    var result2 = num.toString(16);  //8
    var result3 = num1.toString();    //"16"
    var result4 = num1.toString(2);   //10000
    var result5 = num1.toString(16);  //10
    
    image.png

    总结:

    关于显式转换,就这些了,如何理解呢?实实在在能看到的转换方法,就是显示转换。欢迎各位大佬拍砖,多多指教。

    相关文章

      网友评论

        本文标题:js 各种基础类型的转换(上)显式转换

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