JS基础入门篇（六）—数据类型转换

头像
梁志芳
    阅读 6 分钟
    1

    1.数据类型转化

    数据类型转换

        1.把一种数据类型转换成另一种数据类型
    2.js支持把任何一种数据类型转换成下面三种数据类型
        Number 数字
        String 字符串
        Boolean 布尔值

    2.Number(数据)

    1.把数据转变成数字，返回这个数字
2.但是不会转变括号中数据的类型
3.如果数据的内容是纯粹的数字，才可以转成数字，否则会转换出NaN。
    <body>
<script>
    console.log("------------一个简单的例子--------------------");
    var str = "123";
    var res = Number( str );//不会修改str ,只会把转换的结果返回出来,存储在res中
    console.log( typeof str ); //"string" 
    console.log( res );
    console.log( typeof res ); //"number"

    console.log("----------------字符串转化数字----------------");
    var str2 = "12px";   //NaN
    var str2 = "px12";   //NaN
    var str2 = "1.2";    //1.2
    var str2 = "1.2.3";  //NaN
    var str2 = "1.2.0";  //NaN
    var str2 = "";       //0
    var str2 = "  ";     //0
    console.log( Number( str2 ) );

    console.log("--------------boolean转化为数字------------------");
//    var bool = true;
    var bool = false;
    console.log( Number( bool ) );//  true为1 ,false为0。

    console.log("---------------null转化为数字-----------------");
    var n = null;
    console.log( Number( n ) );//0

    console.log("----------------undefined转化为数字----------------");
    var u;
    console.log( Number( u ) );//NaN

    console.log("---------------对象转化为数字-----------------");
    var obj = {a:1,b:2};
    console.log( Number( {} ) );//NaN
    console.log( Number(obj) );//NaN

    console.log("---------------数组转化为数字-----------------");
    console.log( Number( [] ) );//数组长度为0时，转化后值为0。
    console.log( Number( [5] ) );//数组长度为1时，转化后值为数组第一个值。
    console.log( Number( [5,2] ) );//数组长度为2时，转化后值为NaN。
</script>
</body>

    3.NaN

    NaN

        1.not a number 不是数字
    2.数据类型是Number
    3.注意：NaN和任何东西都不相等，包括他自己，判断一个数是不是NaN，可以将它自己和自己比较看是否相等。

    举例说明

    <script>
        var a = NaN;
        console.log( typeof a ); //"number"
console.log("---------------------------------");
        var b = "abc"-1; // NaN
        console.log( b );
console.log("------NaN自己不等于自己------------");
        console.log( 1 == 1 );//true
        console.log( "a" == "a" );//true
        console.log( NaN == NaN );//false

console.log("------NaN自己不等于自己的使用----------");         
        var c = "a"-1;
        if( c != c ){
            alert( "c是NaN" );
        }
</script>

    4.isNaN

    isNaN(数据)

        步骤1：会把数据先使用Number进行转换，转换完之后在判断是不是NaN。
    步骤2：如果数据是NaN那么返回true。
    步骤3：如果数据不是NaN返回false。

    举例说明

    <script>
    console.log( isNaN( 1 ) );
//        先 用Number 转换 1 得到 1 ,
//            因为 1 不是 NaN 所以 直接返回false
    console.log( isNaN( "123" ) );
//        先 用Number 转换 "123" 得到 123 ,
//            因为 123 不是 NaN 所以 直接返回false

    console.log( isNaN( "abc" ) );
//        先 用Number 转换 "abc" 得到 NaN ,
//            因为 NaN 是 NaN 所以 直接返回true

    var str = "abc";
    var res = isNaN( str );
    console.log( str );
    console.log( res );
        
</script>

    5.String(数据)

    String(数据)

            1.把数据转变成字符串,返回这个字符串。
        2.但是不会把括号中的数据的类型改变。

    举例说明

    <script>
        var a = 123;//"123"
        var a = true;//"true"
        var a = false;//"false"
        var a = "abc";//"abc"
        var a = null;//"null"
        var a = undefined;//"undefined"
        var a = {};//"[object Object]"
        var a = {name:"k"};//"[object Object]"
        var a = [];//""
        var a = [1,2,3];//"1,2,3"
        var a = function(){alert(1)};//"function(){alert(1)};"
        
        console.log( a,"数据类型:",typeof a,"String转换结果:",String( a ) );    
    </script>

    6.Boolean(数据)

    Boolean(数据):

        把数据转变成布尔值，返回这个布尔值

    注意:

        不会改变括号内数据的类型
    undefined，null，空字符串（长度为0），0，NaN会转变成false，
    其余转变结果是true

    举例说明:

    <script>
    var a = 123;//true
    var a = 0;//false
    var a = "x"-1;//false
    var a = true;//true
    var a = false;//false
    var a = "abc";//true
    var a = "false";//true
    var a = "";//false
    var a = " ";//true
    var a = null;//false
    var a = undefined;//false
    var a = {};//true
    var a = {name:"k"};//true
    var a = [];//true
    var a = [1,2,3];//true
    var a = function(){alert(1)};//true
    
    console.log( Boolean( a ) );
</script>

    7.parseInt(数据)和parseFloat(数据)

    parseInt(数据)
        把数据转变成整数,舍去小数位，取整数
parseFloat(数据)
        把数据转变成小数（浮点数）

    注意:
    这两个方法会从左往右开始，除去空格，找到第一位非0数字，开始进行转换，直到转换到不是数字的那位为止，或者，转换出合适的值为止。

    <script>
    console.log( parseInt( 1 ) );//1
    console.log( parseInt( 1.0 ) );//1
    console.log( parseInt( 1.3 ) );//1
    console.log( parseInt( 1.9 ) );//1
    console.log( "-----------------------------" );
    console.log( parseInt( "1" ) );//1
    console.log( parseInt( "1.9" ) );//1
    console.log( parseInt( "20px" ) );//20
    console.log( parseInt( "    25px" ) );//25
    console.log( parseInt( "    00026px" ) );//26
    console.log( parseInt( "    0.0026px" ) );//0
    
    console.log( parseFloat( "    0.0026px" ) );//0.0026
    console.log( parseFloat( "    00.026px" ) );//0.026
    console.log( parseFloat( "    01.026px" ) );//1.026
    
    console.log( parseFloat( "    01.02.3px" ) );//1.02
    
    console.log( parseFloat( "    01.05px3px" ) );//1.05
    console.log( parseFloat( "px" ) );//NaN
    
</script>

    8.显示类型转换 和 隐式类型转换

    显示类型转换：

        使用一些方法使数据类型发生改变
    比如：Number(),parseInt(),parseFloat(),String(),Boolean()...

    隐式类型转换：

        不调用方法使数据的类型发生改变

    举例说明：

    <script>
    console.log( "abc"-1 );//NaN
    console.log( NaN-1 );//NaN
    console.log( NaN+1 );//NaN
    console.log( NaN+"1" );//NaN1
//------------------------------------------
    console.log( "3"-1 );//转成数字2
    console.log( "345" - 0 );//转成数字345
    console.log( "345" * 1 );//转成数字345
    console.log( "345" / 1 );//转成数字345
    console.log( "345px" - 0 );//NaN
//------------------------------------------
    
    console.log( 123 + "" );//转成字符串 "123"
//------------------------------------------
    
    console.log( !!234 );//转成boolean类型 true
    console.log( !!0 );//转成boolean类型 false
    console.log( !!{} );//转成boolean类型 true
    console.log( !!null );//转成boolean类型 false
</script>

    练习

    完成以下练习，证明自己真的掌握了喔。
    图片描述

    练习答案，可以在console中查看效果。

    javascriptcsshtml
    梁志芳
    159 声望58 粉丝

    正在学习CSS+HTML+JS

    « 上一篇
    JS基础入门篇（六）— 数据类型
    下一篇 »
    JS基础入门篇（七）—运算符

    引用和评论

    推荐阅读
    头像
    git 基本命令

    梁志芳赞 3阅读 1.7k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新