js数据类型的转换

六眼飞鱼酱① 提交于 2019-11-28 00:54:45

  类型转换:就是把一种数据类型转换成另一种数据类型,在js中类型转换有以下三种情况:转数字,转字符串,转布尔值。对象转成这3种数据类型是没有意义的,对象里面可以放任意的数据类型。

  在讲解类型转换之前,先了解一下typeof运算符,它用于检测数据的类型,返回这个类型对应的字符串

  语法:typeof 数据或者type(数据)

    <script>
        var d = 'davina';
        var n = 19;
        var t = true;
        var nul = null;
        var und = undefined;
        var obj = { a: 1 };
        var fn = function () { alert(1) };
        console.log(typeof d, typeof n, typeof t); //string number boolean
        console.log(typeof nul, typeof und, typeof obj); //object undefined object
        console.log(typeof fn); //function
        //从中可以看出,String->string;Number->number Boolean->boolean Undefined->undefined
        //Null->object,Object->object,函数的typeof转换为function
    </script>

 一、转数字

    任意类型都是可以转换成数字的,一般将字符串转数字用parseInt()或者是parseFloat()方法来进行转换,它们有一定的容错能力,能够将非兼容字符前的部分转换为数字。Number()这个方法没有容错能力。

   从中我们可以看出以下规律:

    字符串转数字:空字符转数字的结果为0;字符串里面的内容如果是一个单纯的数字则转成对应的数字,如果不是一个纯数字那结果就是NaN
    布尔值转数字,true为1,false为0
    undefined转为NaN,NaN转为0
    数字转数字还为数字,对象转为NaN
    <script>
        var d = 'davina';
        var d1 = '';
        var d2 = 'ds1';
        var d3 = '3';
        var t = true;
        var f = false;
        var nul = null;
        var und = undefined;
        var obj = { a: 1 };

        console.log(Number(d), Number(d1), Number(d2), Number(d3));  //NaN 0 NaN 3
        console.log(Number(t), Number(f), Number(nul)); //1 0 0
        console.log(Number(und), Number(obj), Number(fn)); //NaN NaN NaN
    </script>

    字符串转数字还可以用parseInt()和parseFloat()方法。用法如下:

    从中我们可以看出:字符串必须是数字或者是空格加数字开头,它会从数字开始一位一位向后找,直到找到的字符不是数字就会停止,会把找到的数字字符转成真正的数字,如果没有找到那就返回一个NaN.

    转数字的快捷方法:减去字符0或用0加这个字符,都是等于这个数本身的数值

    <script>
        var d1 = '100px';
        var d2 = 'px100';
        var d3 = ' 100px';
        var d4 = '123.567px234davina';
        var d5 = '100px100';
        var d6 = '4' - '0';
        var d7 = + '5';

        console.log(parseInt(d1), parseInt(d2), parseInt(d3)); //100 NaN 100
        console.log(parseFloat(d4), parseFloat(d5)); //123.567 100
        console.log(d6, d7); //4 5
    </script>

   简单计算器

<body>
    <script>
        window.onload = function () {
            var text1 = document.getElementById('text1');
            var text2 = document.getElementById('text2');
            var btn = document.getElementById('btn');

            btn.onclick = function () {
                var val1 = parseFloat(text1.value);
                var val2 = parseFloat(text2.value);

                result.innerHTML = val1 + val2;
            }
        }
    </script>
    <input type="text" id='text1' value=''>
    <span>+</span>
    <input type="text" id="text2" value="">
    <button id="btn">=</button>
    <strong id="result"></strong>
</body>

  isNaN()方法

    判断一个值是不是NaN,它会先把参数用Number()方法转一下,具有检测数字的作用,但是它的本意并不是用来检测数字的。

    <script>
        var n = NaN;
        var s1 = 'davina';//这个地方先用number()转一下,再用isNaN()
        var n1 = 12;
        console.log(isNaN(n), isNaN(s1), isNaN(n1)); //true true false
        //如果参数的结果为NaN为它的返回值为true,参数结果不为NaN它的返回值为false
    </script> 

  二、转布尔值

    从下面可以看出,Undefined 转为 false;Null转布尔值为false;Number转布尔值时,0,NaN转为false,其它的转为true;空字符串转布尔值的结果为false,非空字符串为true;所有对象转为true.

    !! 其它类型:!是取反的意思,因此加上两个!!,两次取反后即得到本身的布尔值。

    <script>
        var u = undefined;
        var nul = null;
        var f = 0;
        var n = 2;
        var t = 1;
        var s1 = '';
        var s2 = 'davina';
        var s3 = ' ';
        var obj={a:1};
        var i = !!' '; 


        console.log(Boolean(u), Boolean(nul), Boolean(f)); //false false false
        console.log(Boolean(n), Boolean(t)); //true true
        console.log(Boolean(s1), Boolean(s2), Boolean(s3),Boolean(obj)); //false true true true
        console.log(i);//true
    </script>

  三、转字符串

    String()函数可以将任意类型的值转化为字符串,转换规则如下:

      undefined转为'undefined';Null转字null,Number把数字加上引号;true转字符串的结果为'true',false为'false';参数如果是对象,返回一个类型字符串,如果是数组,返回该数组的字符串形式,相当于调用数组的Array.propototype.join()方法。

     快捷方式:其它类型+''或''+其它类型:其他类型与一个空字符串相加,此方法对null和undefined也适用

    <script>
        var u = undefined;
        var nul = null;
        var num = 12;
        var b1 = true;
        var b2 = false;
        var obj = { a: 1 };
        var array = [1, 2, 3];
        var i = 1 + '';
        var j = '' + true;
        console.log(String(u), String(nul), String(num)); //undefined null 12
        console.log(String(b1), String(b2));             //true false 
        console.log(String(array), String(obj));         //1,2,3 [object Object]    
        console.log(String(i),String(j));               //1 true
    </script>

  四、隐式类型

     类型转换分为两种:一是显式类型转换,二是隐式类型转换。

     显式类型转换,通过一种方法很明确的某种数据类型转换为另一种数据类型,像是Number(),parseInt(),parseFloat()明确遥将数据转数字类型;String()明确将数据转为字符串类型;Boolean()明确将数据转为布尔值类型。

     隐式类型转换:在进行一些操作的时候,根本的目的不是做类型转换,但是如要进行操作的话,那数据必需符合某种类型,js会在内部对数据进行一些转换

     如:+ - * /

    <script>
        console.log(1 + 2);  //3
        console.log(1 + 'a');  //1a
        console.log(true + 1); //2
        console.log(false + '1');  // false1
        console.log(false - true); //-1
        console.log('' - 1); //-1
    </script>

 

 

    

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!