一起來看看JavaScript數(shù)據(jù)類型最詳解
更新時(shí)間：2022年01月26日 16:47:21 作者：WangZhang_521
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)類型，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
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ù)類型只有程序在運(yùn)行過程中，根據(jù)等號(hào)右邊的值來確定的
var str = 'pink'; //str字符串型
// js是動(dòng)態(tài)語言，變量的數(shù)據(jù)類型是可以變化的
var x = 10; //x是數(shù)字型
x = 'pink'; //x是字符串型
</script>
</head>
<body>
</body>
</html>
02-簡(jiǎn)單數(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.八進(jìn)制 0~7 我們程序里面數(shù)字前面加0 表示八進(jìn)制
var num1 = 010;
console.log(num1); //010 八進(jìn)制 轉(zhuǎn)換為10進(jìn)制就是 8
var num2 = 012;
console.log(num2);
// 2.十六進(jìn)制 0~9 a~f #ffffff 數(shù)字的前面加0x表示十六進(jìn)制
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()這個(gè)方法用來判斷非數(shù)字 并且返回一個(gè)值 如果是數(shù)字，返回的是false 如果不是數(shù)字 返回的是true
console.log(isNaN(12)); //false
console.log(isNaN('pink老師')); //true
</script>
</head>
<body>
</body>
</html>
04-簡(jiǎn)單數(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ù)字型的，加了引號(hào)后就是字符串類型的 '12'
var str = '我是一個(gè)"高富帥"的程序員';
console.log(str);
// 字符串轉(zhuǎn)義字符 都是用\開頭 并且包含在引號(hào)里面
var str1 = "我是一個(gè)'高富帥'的\n程序員";
console.log(str1);
</script>
</head>
<body>
</body>
</html>
效果展示
05-轉(zhuǎn)義符案例-彈出網(wǎng)頁(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>
alert('酷暑難耐，火辣的太陽底下，我挺拔的身姿，成為了最獨(dú)特的風(fēng)景。\n我審視四周，這里是我的舞臺(tái)，我就是天地間的王者。\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.檢測(cè)獲取字符串的長(zhǎng)度 length
var str = 'my name is andy'; //15個(gè)字符（12個(gè)字母+三個(gè)空格）
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-字符串拼接加強(qiá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>字符串拼接加強(qiáng)</title>
<script>
console.log('pink老師' + 18); //pink老師18
console.log('pink老師' + 18 + '歲');
var age = 18;
//變量不要寫到字符串里面，是通過和字符串相連的方式實(shí)現(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>
// 要求：彈出一個(gè)輸入框，需要用戶輸入年齡，之后彈出一個(gè)警示框顯示"您今年xx歲啦"
// 分析：這是利用JS編寫的一個(gè)非常簡(jiǎn)單的交互效果程序。
// 交互編程的三個(gè)基本要素：
// 1.彈出一個(gè)輸入框(prompt)，讓用戶輸入年齡（用戶輸入）
// 2.把用戶輸入的值用變量保存起來，把剛才輸入的年齡與所要輸出的字符串拼接（程序內(nèi)部處理）
// 3.使用alert語句彈出警示框 （輸出結(jié)果）
// prompt('請(qǐng)輸入您的年齡');
// 以下寫法可以通過變量保存下來
var age = prompt('請(qǐng)輸入您的年齡');
var str = '您今年' + age + '歲啦';
alert(str);
</script>
</head>
<body>
</body>
</html>
效果展示
09-簡(jiǎn)單數(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>簡(jiǎn)單數(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參與加法運(yùn)算當(dāng)1來看
console.log(flag1 + 1); // 顯示1 false參與加法運(yùn)算當(dāng)0來看
// 如果一個(gè)變量聲明未賦值 結(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('請(qǐng)輸入您的年齡');
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); //在控制臺(tái)顯示藍(lán)色，是數(shù)字型的
console.log('18'); //在控制臺(tái)顯示黑色，是字符串型的
console.log(true); //在控制臺(tái)顯示深藍(lán)色，是布爾型
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.利用 + 拼接字符串的方法實(shí)現(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('請(qǐng)輸入你的年齡');
//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ù)字型 得到的是浮點(diǎn)數(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ù)運(yùn)算 - * / 隱式轉(zhuǎn)換
console.log('12' - 0); //12
console.log('123' - '2'); //121
console.log('123' * 1); //123
</script>
</head>
<body>
</body>
</html>
14-計(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>
// 案例分析
// 1.彈出一個(gè)輸入框，讓用戶輸入出生年份(用戶輸入)
// 2.把用戶輸入的值用變量保存起來，然后用今年的年份減去變量值，結(jié)果就是現(xiàn)在的年齡；（程序內(nèi)部處理）
// 3.彈出警示框，把計(jì)算的結(jié)果輸出（輸出結(jié)果）
var year = prompt('請(qǐng)輸入你的出生年份');
var age = 2022 - year; //year取過來的是字符串型 但是這里用的減法，自動(dòng)隱式轉(zhuǎn)換成數(shù)字型
alert('你今年' + age + '歲了');
</script>
</head>
<body>
</body>
</html>
15-簡(jiǎ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>
// 先彈出第一個(gè)輸入框，提示用戶輸入第一個(gè)值，保存起來
// 再?gòu)棾龅诙€(gè)框，提醒用戶輸入第二個(gè)值，保存起來
// 把這兩個(gè)值相加，并將結(jié)果賦給新的變量（注意數(shù)據(jù)類型轉(zhuǎn)換）
// 彈出警示框，把計(jì)算的結(jié)果輸出
var num1 = prompt('請(qǐng)輸入第一個(gè)值:');
var num2 = prompt('請(qǐng)輸入第二個(gè)值:');
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>
// 先彈出第一個(gè)輸入框，提示用戶輸入第一個(gè)值，保存起來
// 再?gòu)棾龅诙€(gè)框，提醒用戶輸入第二個(gè)值，保存起來
// 把這兩個(gè)值相加，并將結(jié)果賦給新的變量（注意數(shù)據(jù)類型轉(zhuǎn)換）
// 彈出警示框，把計(jì)算的結(jié)果輸出
var num1 = prompt('請(qǐng)輸入第一個(gè)值:');
var num2 = prompt('請(qǐng)輸入第二個(gè)值:');
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-擴(kuò)展閱讀之編譯語言和解釋語言的區(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>擴(kuò)展閱讀之編譯語言和解釋語言的區(qū)別</title>
</head>
<body>
<h4>1.概述</h4>
<p>計(jì)算機(jī)不能直接理解任何除機(jī)器以外的語言，所以必須要把程序員所寫的程序語言翻譯成機(jī)器語言才能執(zhí)行程序。
<br>程序語言翻譯成機(jī)器語言的工具，被稱為翻譯器</p>
<p>翻譯器翻譯的方式有兩種:一個(gè)是編譯，另一個(gè)是解釋。兩種方式的區(qū)別在于翻譯的時(shí)間點(diǎn)不同</p>
<p>編譯器是在代碼執(zhí)行之前進(jìn)行編譯，生成中間代碼文件</p>
<p>解釋器是在運(yùn)行時(shí)進(jìn)行及時(shí)解釋，并立即執(zhí)行（當(dāng)編譯器以解釋方式運(yùn)行的時(shí)候，也成為解釋器）</p>
<h4>2.執(zhí)行過程</h4>
<p>類似于請(qǐng)客吃飯:</p>
<ul>
<li>編譯語言:首先把所有菜做好，才能上桌吃飯</li>
<li>解釋語言:好比吃火鍋，邊吃邊涮，同時(shí)進(jìn)行</li>
</ul>
</body>
</html>
效果展示
18-拓展閱讀之標(biāo)識(shí)符、關(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>拓展閱讀之標(biāo)識(shí)符、關(guān)鍵字、保留字</title>
</head>
<body>
<h4>1.標(biāo)識(shí)符（zhi）</h4>
<p>標(biāo)識(shí)符（zhi）:就是開發(fā)人員為變量、屬性、函數(shù)、參數(shù)取的名字</p>
<p>標(biāo)識(shí)符不能是關(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>實(shí)際上就是預(yù)留的"關(guān)鍵字"，意思是現(xiàn)在雖然還不是關(guān)鍵字，但是未來可能會(huì)成為關(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); 檢測(cè)是哪種數(shù)據(jù)類型
</script>
</head>
<body>
</body>
</html>
效果展示
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
javascript中setTimeout和setInterval的unref()和ref()用法示例
本文通過一個(gè)小例子想大家講解了setTimeout和setInterval的unref()和ref()用法和使用環(huán)境，代碼很簡(jiǎn)潔，有需要的小伙伴自己參考下吧。2014-11-11
location是javascript里面管理地址欄的內(nèi)置對(duì)象.2010-11-11
這篇文章主要源碼解讀了Bootstrap模態(tài)彈出框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
微信小程序返回到頂部功能的簡(jiǎn)單實(shí)現(xiàn)
在做微信小程序開發(fā)時(shí),遇到一個(gè)問題,要如何實(shí)現(xiàn)返回頂部的功能,下面這篇文章主要給大家介紹了微信小程序返回到頂部功能的簡(jiǎn)單實(shí)現(xiàn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
JS使用正則表達(dá)式判斷輸入框失去焦點(diǎn)事件
這篇文章主要介紹了JS使用正則表達(dá)式判斷輸入框失去焦點(diǎn)事件問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
JavaScript使用高階生成器進(jìn)行過濾以生成素?cái)?shù)
生成器大家都知道是怎么一回事,但是高階生成器又是什么東西呢,下面小編就來為大家簡(jiǎn)單介紹一下如何使用高階生成器進(jìn)行過濾以生成素?cái)?shù)吧2024-02-02
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)下拉菜單效果的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript EventEmitter 背后的秘密 完整版
在這里，我們的目標(biāo)創(chuàng)建屬于我們自己的 Event Emitter 去理解背后的秘密。所以，讓我們看一下下面的代碼是怎么工作的,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了a標(biāo)簽中href=""的幾種用法 ,需要的朋友可以參考下2017-08-08
ECMAScript 6離我們?cè)絹碓浇耍鳛樗钪匾姆窖?，Javascript也即將迎來語法上的重大變革，InfoQ特開設(shè)“深入淺出ES6”專欄，來看一下ES6將給我們帶來哪些新內(nèi)容2016-03-03