当前位置: 首页 > Web前端 > HTML

JS基础入门篇(六)—数据类型转换

时间:2023-04-02 23:23:14 HTML

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.NaNNaN 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 );//falseconsole.log("------NaN自己不等于自己的使用----------"); var c = "a"-1; if( c != c ){ alert( "c是NaN" ); }</script>4.isNaNisNaN(数据) 步骤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中查看效果。