JavaScript之数据类型转化

一.显示数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型转化</title>
</head>
<body>
    <div>100</div>
</body>
</html>
<script type="text/javascript">
    var oDiv = document.getElementsByTagName( 'div')[0];
    alert(typeof oDiv.innerHTML );
</script>

二.数据类型转化方式

数据类型的转化
　　1.强制类型转化
　　Number():只能转换纯数字的字符串,不能转换非纯数字的字符串,会出现NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换之Number</title>
</head>
<body>

</body>
</html>
<script type="text/javascript">
    var i = '100';
    alert( Number(i) );
</script>

温馨小提示:如果字符串中含有非数字字符串,强制转换Number将出现NaN[not a number]

　　　　　　NaN是一个不是数字的数字类型;只要出现就证明我们的运算或者数据类型转换.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换之Number</title>
</head>
<body>

</body>
</html>
<script type="text/javascript">
    var ii = '100px';
    alert( Number(ii) );
</script>

支持小数转换:不过小数点后非0会切掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换之Number</title>
</head>
<body>

</body>
</html>
<script type="text/javascript">
    var iii = '100.01000';
    alert( Number(iii) );
</script>

　　parseInt():可以转换不是纯数字的字符串,后面非数字的字符串不转换,其余数字字符串转换.意味着不能转换小数即:100.5也只能转换为100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制转换类型之parseInt</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var i = '100px';
    //有效转换的字符串
    alert( parseInt(i));
    //转换类型
    alert( typeof parseInt(i));
</script>

温馨小提示:字符串起始是非数字的,转换时会出现NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制转换类型之parseInt</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var ii = 'a100';
    alert(parseInt(ii));
</script>

parseFloat():支持小数转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换之parseFloat</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var i = '100.9';
    alert( parseFloat(i));
</script>

温馨小提示:起始位置是非数字字符串,转换时会出现NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换之parseFloat</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var ii = 'a100.9';
    alert( parseFloat(ii));
</script>

　　2.隐式类型转换

　　　字符串和数字做加号,会转换成字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式转换</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var a = '100';
    var b = 17;
    var c = a + b;
    alert(c);
    alert(typeof c);
</script>

　　　字符串和数字做减法会转换成数字　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式转换</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var a = '100';
    var b = 17;
    var c = a - b;
    alert(c);
    alert(typeof c);
</script>

　　　　字符串和字符做减法会转换成数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式转换</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var a = '100';
    var b = '17';
    var c = a - b;
    alert(c);
    alert(typeof c);
</script>

/ ÷ * 号都成立

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式转换</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var a = '100';
    var b = '17';
    var c = a * b;
    alert(c);
    alert(typeof c);
</script>

　　字符串和字符串做++ --会转换成数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式转换</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var a = '100';
    var b = 17;
    var c = a + b;
    alert(a++);
    alert(typeof c);
</script>

　　字符串和数字做> <比较,会转换为数字,进而量数字比较大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式转换</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var q = '19';
    var w = 100;
    alert(q>w);
</script>

　　字符串和字符串进行大小比较,会按照字符串的方法:逐个比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式转换</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    var e = '19';
    var r = '180';
    alert(e>r);
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式类型转换!</title>
</head>
<body>
    
</body>
</html>
<script type="text/javascript">
    //0代表false
    var a = 0;
    //所以!a会进行隐式转换为true
    alert(!a);
</script>