JavaScript資料型別的學習-有解無憂

資料型別

1、資料型別概述：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
     //JavaScript中的變數型別沒有型別的限制，相互之間可以轉換；
     //只有在程式運行后，通過等號后邊的值才可以看出資料型別；
        var num=100;
        num='老大';
        console.log(num);
    </script>
</head>
<body>

</body>
</html>

2、數字型別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //數字型別  即小數和整數
        var num01=20;
        var num02=23.78;
        console.log(num01);
        console.log(num02);
        //1、  0 開頭的是八進制
        var num03=012;
        console.log('012轉為十進制：'+num03);//輸出出來是十進制
        //2、 以0x開頭的是十六進制
        var num04=0xa;
        console.log('0xa轉為十進制：'+num04);//輸出出來是十六進制

        // 3、數字型別的最大值
        console.log(Number.MAX_VALUE);
        //4、數字型別的最小值
        console.log(Number.MIN_VALUE);
        // 5、無窮大
        console.log(Number.MAX_VALUE*2);//結果：Infinity
        // 6、無窮小
        console.log(-Number.MIN_VALUE);
        // 7、非數字
        console.log('我自己' - 200);//結果：NaN
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

3、isNaN方法

概述：isNaN 用于判斷數字，如果該值是數字則回傳false 否則回傳true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //isNaN 用于判斷數字，如果該值是數字  則回傳false  否則回傳true
        var num=12;
        console.log(isNaN(num));//
        var num01='老大';
        console.log(isNaN(num01));
    </script>
</head>
<body>

</body>
</html>

4、String型別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //轉義字符 \'  單引號  \n  newLine 新行即換行的意思
        var str='我自己\n\'老大\'';
        console.log(str);
    </script>
</head>
<body>

</body>
</html>

1、彈出網頁警示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('"君不見，黃河之水天上來，奔流到海不復回，\n' +
            '君不見，高堂明鏡悲白發，朝如青絲暮成雪，\n' +
            '人生得意須盡歡，莫使金樽空對月，\n' +
            '天生我材必有用，千金散盡還復來，\n' +
            '烹羊宰牛且為樂，會須一飲三百杯，\n' +
            '岑夫子，丹丘生，將進酒，杯莫停，"');
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

2、字串長度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var str='My name is 老大';
        console.log('字串長度：'+str.length);
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

3、字串拼接

概述：多個字串之間可以使用+進行拼，拼接方式為字串+任何型別=拼接之后的新字串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log('1'+'2');//字符之間的拼接
        console.log(1+2);//數字型別之間的拼接
        console.log('我時間'+20);
        var age=20;
        console.log('老大'+age);
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

4、案例01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       var age=prompt('請輸入你的年齡：');
       var str='我今年'+age+'歲！';
       alert(str);
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

5、布爾型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var flag=true;
        var flag01=false;
        console.log(flag+1);//布林值true表示真  參與運算時默認是1
        console.log(flag01+1);//布林值false表示假  參與運算時默認是0
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

6、Undefined和Null

概述：一個宣告沒有被賦值的變數會有一個默認值undefined（如果進行相連或者相加時，注意結果！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age;
        console.log(age);//undefined 表示未定義的
        var variable=undefined;
        console.log(variable+'老大');//undefined老大
        console.log(variable+1);//NaN 表示不是一個數字
        var Null=null;
        console.log('老大'+Null);//老大null
        console.log(1+Null);//1
    </script>
</head>
<body>

</body>
</html>

7、typeof

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //typeof 判斷型別
        var str='老大';
        console.log(typeof str);
        console.log(typeof true);
        console.log(typeof 12);
        var age=prompt('請輸入你的年齡');
        console.log(typeof age);
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

根據控制臺顏色判斷型別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.typeof 判斷型別
        console.log(typeof 12);

        //2.根據控制臺輸出的顏色，判斷型別
        console.log(12);
        console.log(null);
        console.log(undefined);
        console.log(true);
        console.log('12');

    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

8、資料型別轉換

方式	說明	案例
toString()	轉換字串	console.log(‘型別：’+typeof num.toString());
String()強制轉換	轉成字串	console.log(‘型別：’+typeof String(num));
加號拼接字串	和字串拼接都是字串	var str=‘我’+num; console.log(‘型別：’+typeof str);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var num=1;
        console.log('型別：'+typeof num.toString());
        console.log('型別：'+typeof String(num));
        var str='我'+num;
        console.log('型別：'+typeof str);
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

9、轉換為數字型

方式	說明	案例
parselnt(string)函式	將string型別轉為整數型別	console.log(parseInt(‘23’));
parseFloat(string)函式	將string型別轉成浮點數值型別	console.log(parseFloat(‘3.14’));//3.14
Number()強制轉換函式	將string型別轉換為數值型別	var str=‘123’; console.log(Number(str));
js 隱式轉換（- * /）	利用算術運算隱式轉為數值型	console.log(str - 120); console.log(str * 3);console.log(str / 123);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log(parseInt('23'));
        console.log(parseInt('rem23'));//NaN
        console.log(parseInt('3.4'));//3 取整
        console.log(parseInt('120px'));//120
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('rem3.14'));//NaN
        console.log(parseFloat('120px'));//120
    </script>
</head>
<body>
</body>
</html>

案例01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //計算年齡
        var year=prompt('請輸入你的年份：');
        var age=2020-year;
        alert('你的年齡是：'+age+'歲');
    </script>
</head>
<body>

</body>
</html>

案例02

兩數相加
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var num01=prompt('請輸入第一個值：');
        var num02=prompt('請輸入第二個值：');
        var sum=Number(num01)+Number(num02);
        alert('相加結果：'+sum);
    </script>
</head>
<body>

</body>
</html>

10、轉換為布爾型

方式	說明	案例
Boolean()函式	其他型別轉換成布林值	Boolean(‘true’);

1.代表空，否定的值會被轉換為false,如“0，NaN,null,undefined”;

2.其余值都會被轉換為true；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log(Boolean(''));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(undefined));
        console.log(Boolean(null));
        console.log('--------------------------');
        console.log(Boolean('小白'));
        console.log(Boolean(12));
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/40130.html

標籤：其他

上一篇：為什么我用Adreno Profiler抓取部分游戲閃退？

下一篇：26歲女，普通二本電子資訊，想問一下軟體測驗適合還是云計算比較適合，接觸過java不太喜歡