一起來看看JavaScript數(shù)據(jù)類型最詳解
更新時間:2022年01月26日 16:47:21 作者:WangZhang_521
這篇文章主要為大家詳細介紹了JavaScript數(shù)據(jù)類型,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
01-變量的數(shù)據(jù)類型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var num; // 這里的num是不確定屬于哪種數(shù)據(jù)類型的 var num = 10; // 從這可以看出num屬于數(shù)字型 // js的變量數(shù)據(jù)類型只有程序在運行過程中,根據(jù)等號右邊的值來確定的 var str = 'pink'; //str字符串型 // js是動態(tài)語言,變量的數(shù)據(jù)類型是可以變化的 var x = 10; //x是數(shù)字型 x = 'pink'; //x是字符串型 </script> </head> <body> </body> </html>
02-簡單數(shù)據(jù)類型之?dāng)?shù)字型Number
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>數(shù)字型Number</title> <script> var num = 10; //num數(shù)字型 var PI = 3.14; // PI數(shù)字型 // 1.八進制 0~7 我們程序里面數(shù)字前面加0 表示八進制 var num1 = 010; console.log(num1); //010 八進制 轉(zhuǎn)換為10進制就是 8 var num2 = 012; console.log(num2); // 2.十六進制 0~9 a~f #ffffff 數(shù)字的前面加0x表示十六進制 var num3 = 0x9; console.log(num3); var num4 = 0xa; console.log(num4); // 3.數(shù)字型的最大值 console.log(Number.MAX_VALUE); // 4.數(shù)字型的最小值 console.log(Number.MIN_VALUE); // 5.無窮大 infinity console.log(Number.MAX_VALUE * 2); // 6.無窮小 -infinity console.log(-Number.MIN_VALUE * 2); // 7.非數(shù)字 console.log('pink老師' - 100); </script> </head> <body> </body> </html>
效果展示
03-isNaN
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // isNaN()這個方法用來判斷非數(shù)字 并且返回一個值 如果是數(shù)字,返回的是false 如果不是數(shù)字 返回的是true console.log(isNaN(12)); //false console.log(isNaN('pink老師')); //true </script> </head> <body> </body> </html>
04-簡單數(shù)據(jù)類型之字符串型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 'pink' 'pink老師' 'true' 12是數(shù)字型的,加了引號后就是字符串類型的 '12' var str = '我是一個"高富帥"的程序員'; console.log(str); // 字符串轉(zhuǎn)義字符 都是用\開頭 并且包含在引號里面 var str1 = "我是一個'高富帥'的\n程序員"; console.log(str1); </script> </head> <body> </body> </html>
效果展示
05-轉(zhuǎn)義符案例-彈出網(wǎng)頁警示框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> alert('酷暑難耐,火辣的太陽底下,我挺拔的身姿,成為了最獨特的風(fēng)景。\n我審視四周,這里是我的舞臺,我就是天地間的王者。\n這一刻,我豪氣沖天,終于大喊一聲:"收破爛啦~"'); </script> </head> <body> </body> </html>
效果展示
06-字符串拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 1.檢測獲取字符串的長度 length var str = 'my name is andy'; //15個字符(12個字母+三個空格) console.log(str.length); //顯示15 // 2.字符串的拼接 只要字符串和其他類型相拼接,最終的結(jié)果就是字符串類型 console.log('沙漠' + '駱駝'); //顯示字符串的 沙漠駱駝 console.log('pink老師' + 18); //pink老師18 console.log('pink' + true); //pinktrue console.log(12 + 12); //24 數(shù)字型的相加 console.log('12' + '12'); //1212 字符串的相加 </script> </head> <body> </body> </html>
07-字符串拼接加強
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串拼接加強</title> <script> console.log('pink老師' + 18); //pink老師18 console.log('pink老師' + 18 + '歲'); var age = 18; //變量不要寫到字符串里面,是通過和字符串相連的方式實現(xiàn)的 console.log('pink老師' + age + '歲'); // 變量和字符串的口訣 :引引加加 console.log('pink老師' + age + '歲'); </script> </head> <body> </body> </html>
08-顯示年齡案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>顯示年齡案例</title> <script> // 要求:彈出一個輸入框,需要用戶輸入年齡,之后彈出一個警示框顯示"您今年xx歲啦" // 分析:這是利用JS編寫的一個非常簡單的交互效果程序。 // 交互編程的三個基本要素: // 1.彈出一個輸入框(prompt),讓用戶輸入年齡(用戶輸入) // 2.把用戶輸入的值用變量保存起來,把剛才輸入的年齡與所要輸出的字符串拼接(程序內(nèi)部處理) // 3.使用alert語句彈出警示框 (輸出結(jié)果) // prompt('請輸入您的年齡'); // 以下寫法可以通過變量保存下來 var age = prompt('請輸入您的年齡'); var str = '您今年' + age + '歲啦'; alert(str); </script> </head> <body> </body> </html>
效果展示
09-簡單數(shù)據(jù)類型之布爾型Boolean
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>簡單數(shù)據(jù)類型之布爾型Boolean</title> <script> var flag = true; //flag 布爾型 相當(dāng)于1 var flag1 = false; //flag1 布爾型 相當(dāng)于0 console.log(flag + 1); // 顯示2 true參與加法運算當(dāng)1來看 console.log(flag1 + 1); // 顯示1 false參與加法運算當(dāng)0來看 // 如果一個變量聲明未賦值 結(jié)果是undefined 未定義數(shù)據(jù)類型 var str; console.log(str); //顯示undefined var variable = undefined; console.log(variable + 'pink'); //顯示 undefinedpink console.log(variable + 1); // NaN undefined和數(shù)字相加,最后的結(jié)果是NaN // null 空值 var space = null; console.log(space + 'pink'); // 顯示nullpink console.log(space + 1); //顯示1 null和數(shù)字相加,結(jié)果是數(shù)字 </script> </head> <body> </body> </html>
10-獲取變量數(shù)據(jù)類型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var num = 10; console.log(typeof num); //number 數(shù)字型 var str = 'pink'; console.log(typeof str); //string 字符串型 var flag = true; console.log(typeof flag); //boolean 布爾型 var vari = undefined; console.log(typeof vari); //undefined 未定義類型 var timer = null; console.log(typeof timer); //object // prompt取過來的值是字符型的 var age = prompt('請輸入您的年齡'); console.log(age); console.log(typeof age); </script> </head> <body> </body> </html>
11-字面量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> console.log(18); //在控制臺顯示藍色,是數(shù)字型的 console.log('18'); //在控制臺顯示黑色,是字符串型的 console.log(true); //在控制臺顯示深藍色,是布爾型 console.log(undefined); console.log(null); </script> </head> <body> </body> </html>
12-轉(zhuǎn)換為字符串型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //1.把數(shù)字型轉(zhuǎn)換為字符串型 var num = 10; var str = num.toString(); console.log(str); console.log(typeof str); //2.利用String() console.log(String(num)); //3.利用 + 拼接字符串的方法實現(xiàn)轉(zhuǎn)換效果 最常用,也稱為隱式轉(zhuǎn)換 console.log(num + ''); </script> </head> <body> </body> </html>
13-轉(zhuǎn)換為數(shù)字型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var age = prompt('請輸入你的年齡'); //1.parseInt(變量) 可以把字符型的轉(zhuǎn)化為數(shù)字型 得到的是整數(shù) console.log(parseInt(age)); console.log(parseInt('3.14')); //最后的結(jié)果是3 取整 console.log(parseInt('120px')); //120 可以把單位去掉 console.log(parseInt('rem120px')); //NaN //2.parseFloat(變量) 可以把字符型的轉(zhuǎn)化為數(shù)字型 得到的是浮點數(shù) console.log(parseFloat('3.14')); console.log(parseFloat('120px')); //120 可以把單位去掉 console.log(parseFloat('rem120px')); //NaN // 3.利用Number(變量) var str = '123'; console.log(Number(str)); console.log(Number('12')); // 4.利用了算數(shù)運算 - * / 隱式轉(zhuǎn)換 console.log('12' - 0); //12 console.log('123' - '2'); //121 console.log('123' * 1); //123 </script> </head> <body> </body> </html>
14-計算年齡案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 案例分析 // 1.彈出一個輸入框,讓用戶輸入出生年份(用戶輸入) // 2.把用戶輸入的值用變量保存起來,然后用今年的年份減去變量值,結(jié)果就是現(xiàn)在的年齡;(程序內(nèi)部處理) // 3.彈出警示框,把計算的結(jié)果輸出(輸出結(jié)果) var year = prompt('請輸入你的出生年份'); var age = 2022 - year; //year取過來的是字符串型 但是這里用的減法,自動隱式轉(zhuǎn)換成數(shù)字型 alert('你今年' + age + '歲了'); </script> </head> <body> </body> </html>
15-簡單加法器案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 先彈出第一個輸入框,提示用戶輸入第一個值,保存起來 // 再彈出第二個框,提醒用戶輸入第二個值,保存起來 // 把這兩個值相加,并將結(jié)果賦給新的變量(注意數(shù)據(jù)類型轉(zhuǎn)換) // 彈出警示框,把計算的結(jié)果輸出 var num1 = prompt('請輸入第一個值:'); var num2 = prompt('請輸入第二個值:'); var result = parseFloat(num1) + parseFloat(num2); alert('您的結(jié)果是:' + result); </script> </head> <body> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 先彈出第一個輸入框,提示用戶輸入第一個值,保存起來 // 再彈出第二個框,提醒用戶輸入第二個值,保存起來 // 把這兩個值相加,并將結(jié)果賦給新的變量(注意數(shù)據(jù)類型轉(zhuǎn)換) // 彈出警示框,把計算的結(jié)果輸出 var num1 = prompt('請輸入第一個值:'); var num2 = prompt('請輸入第二個值:'); var result = parseFloat(num1) + parseFloat(num2); alert('您的結(jié)果是:' + result); </script> </head> <body> </body> </html>
16-轉(zhuǎn)換為布爾型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> console.log(Boolean('')); //false console.log(Boolean(0)); //false console.log(Boolean(NaN)); //false console.log(Boolean(null)); //false console.log(Boolean(undefined)); //false console.log(Boolean('123')); //true console.log(Boolean('你好嗎')); //true </script> </head> <body> </body> </html>
17-擴展閱讀之編譯語言和解釋語言的區(qū)別
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>擴展閱讀之編譯語言和解釋語言的區(qū)別</title> </head> <body> <h4>1.概述</h4> <p>計算機不能直接理解任何除機器以外的語言,所以必須要把程序員所寫的程序語言翻譯成機器語言才能執(zhí)行程序。 <br>程序語言翻譯成機器語言的工具,被稱為翻譯器</p> <p>翻譯器翻譯的方式有兩種:一個是編譯,另一個是解釋。兩種方式的區(qū)別在于翻譯的時間點不同</p> <p>編譯器是在代碼執(zhí)行之前進行編譯,生成中間代碼文件</p> <p>解釋器是在運行時進行及時解釋,并立即執(zhí)行(當(dāng)編譯器以解釋方式運行的時候,也成為解釋器)</p> <h4>2.執(zhí)行過程</h4> <p>類似于請客吃飯:</p> <ul> <li>編譯語言:首先把所有菜做好,才能上桌吃飯</li> <li>解釋語言:好比吃火鍋,邊吃邊涮,同時進行</li> </ul> </body> </html>
效果展示
18-拓展閱讀之標識符、關(guān)鍵字、保留字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拓展閱讀之標識符、關(guān)鍵字、保留字</title> </head> <body> <h4>1.標識符(zhi)</h4> <p>標識符(zhi):就是開發(fā)人員為變量、屬性、函數(shù)、參數(shù)取的名字</p> <p>標識符不能是關(guān)鍵字和保留字</p> <h4>2.關(guān)鍵字</h4> <p>是指JS本身已經(jīng)使用了的字,不能再用他們充當(dāng)變量名、方法名</p> <p>包括:break,case,continue,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with</p> <h4>3.保留字</h4> <p>實際上就是預(yù)留的"關(guān)鍵字",意思是現(xiàn)在雖然還不是關(guān)鍵字,但是未來可能會成為關(guān)鍵字,同樣不能使用它們當(dāng)變量名或方法名</p> <p>包括:boolean,byte,char,class,const,debugger,double,enum,export,extends等</p> </body> </html>
19-課后作業(yè)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 1.用戶輸入 var name = prompt('您的姓名是:'); var age = prompt('您的年齡是:'); var sex = prompt('您的性別是:'); // 2.內(nèi)部程序處理 var str = ('您的姓名是:' + name + '\n您的年齡是:' + age + '\n您的性別是:' + sex); // 3.結(jié)果輸出 alert(str); // console.log(typeof str); 檢測是哪種數(shù)據(jù)類型 </script> </head> <body> </body> </html>
效果展示
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
javascript中setTimeout和setInterval的unref()和ref()用法示例
本文通過一個小例子想大家講解了setTimeout和setInterval的unref()和ref()用法和使用環(huán)境,代碼很簡潔,有需要的小伙伴自己參考下吧。2014-11-11JavaScript使用高階生成器進行過濾以生成素數(shù)
生成器大家都知道是怎么一回事,但是高階生成器又是什么東西呢,下面小編就來為大家簡單介紹一下如何使用高階生成器進行過濾以生成素數(shù)吧2024-02-02JavaScript EventEmitter 背后的秘密 完整版
在這里,我們的目標創(chuàng)建屬于我們自己的 Event Emitter 去理解背后的秘密。所以,讓我們看一下下面的代碼是怎么工作的,需要的朋友可以參考下2018-03-03