JS簡單資料型別

阿新 • • 發佈：2020-09-19

一、資料型別簡介

1、為什麼需要資料型別

在計算機中，不同的資料所需佔用的儲存空間是不同的，為了便於吧資料分成所需記憶體大小不同的資料，充分利用儲存空間，於是定義了不同的資料型別

簡單來說，資料型別就是資料的類別型號。比如姓名“張三”，年齡18，這些資料的型別是不一樣的

2、變數的資料型別

變數是用來儲存值得所在處，它們有名字和資料型別。變數的資料型別決定了如何將代表這些值得位儲存到計算機的記憶體中。JavaScript是一種弱型別或者說動態語言。這意味著不用提前宣告變數的型別，在程式執行過程中，型別會被自動確定。

var age = 10;        //這是一個數字型
var 
 areYouk = '是的' //這是一個字串

在程式碼執行時，變數的資料型別是有js引擎根據 = 右邊變數值得資料型別來判斷的，執行完畢之後，變數就確定了資料型別JavaScript擁有動態型別，同事也意味著相同的變數可用作不同的型別：

var x = 6;      //x為數字
var x = 'Bill'; //x為字串

3、資料型別的分類

js把資料型別分為兩類：

簡單資料型別（Number,String,Boolean,Underfined,Null)

複雜資料型別（object）

二、簡單資料型別

1、簡單資料型別（基本資料型別）

Number 數字型，包含整型值和浮點型值，如21、0.21 ，預設值：0

Boolean 布林值型別，如true、false,等價於1和0，預設是：false

String 字串型別，如“張三” 注意咱們JS裡面，字串都帶引號，預設值：""

Undefined var a;聲明瞭變數a但是沒有給值，此時a = undefined，預設值：undefined

Null var a = ull;聲明瞭變數a為空值，預設值：null

品牌vi設計公司http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

2、數字型 Number

JavaScript 數字型別既可以用來儲存整數值，也可以儲存小數（浮點數）。

var age = 21;     //整數
var Age = 21.3578 //小數

2.1、數字型進位制

最常見的進位制有二進位制、八進位制、十進位制、十六進位制

//1.八進位制數字序列範圍：0~7
var num1 = 01; //對應十進位制的7
var num2 = 019;//對應十進位制的19
var num3 = 08; //對應十進位制的8
//2.十六進位制數字序列範圍：0~9以及A~F
var num = 0xA;

現階段我們只需要記住，在JS中八進位制前面加0，十六進位制前面加0x 例子：

//1.八進位制 0~7 我們程式設計師裡面數字前面加0 表示八進位制
var num1 = 010;
console.log(num1); //010 八進位制 轉換為10進位制 就是8
var num2 = 012;
console.log(num2);
//2.十六進位制 0~9 a~f #ffffff 數字的前面加0x 表示十六進位制
var num3 = 0x9;
console.log(num3);
var num4 = 0xa;
console.log(num4);

2.2、數字型範圍

JavaScript 中數值的最大和最小值

alert(Number.MAX_VALUE); //1.7976931348623157e+308
alert(Number.MIN_VALUE); //5e-324

2.3、數字型三個特殊值

alert(Infinity);  //Infinity
alert(-Infinity); //-Infinity
alert(NaN);       //NaN

Infinity ,代表無窮大，大於任何數值

-Infinity ,代表無窮小，小於任何數值

NaN ,Not a number ,代表一個非數值例子：

//3.數字型的最大值
console.log(Number.MAX_VALUE);
//4.數字型的最小值
console.log(Number.MIN_VALUE);
//5.無窮大
console.log(Number.MAX_VALUE * 2);//Infinity 無窮大
//6.無窮小
console.log(-Number.MAX_VALUE * 2);//-Infinity 無窮小
//7.非數字 （字串減不了數值，所以是一個非數值NaN)
console.log('pink老師' - 100) // NaN

2.4、isNaN()

用來判斷一個變數是否為非數字的型別，返回true或者false

x是數字，返回false
isNaN(x)   x是一個非數字型別
 x不是數字，返回true

例子：

console.log (isNaN(12)); //false
console.log(isNaN('pik老師') //true

3、字串型 String

字串型可以使引號中的任意文字，其語法為雙引號""和單引號''

var strMsg = '我愛天安門'; //用單引號表示字串
var strMsg2 = "pki豬";    //用雙引號表示字串
var strMsg3 = 我愛大肘子;  //報錯，沒使用引號，會被認為是Js程式碼，但Js沒有這些語法

因為html標籤裡面的屬性使用的是雙引號，JS這裡我們更推薦使用單引號.

3.1、字串引號巢狀

JS可以用單引號巢狀雙引號，或者用雙引號巢狀單引號(外雙內單，外單內雙)

var strMsg = '我是"高帥富"程式設計師'； //可以用''包含""
var strMsg2 = "我是'高富帥'程式設計師"； //可以用""包含''
//常見錯誤
var badQuotes = 'what on earth?"; //報錯，不能單雙引號搭配

3.2、字串轉義符

類似html裡面的特殊字元，字串中也有特殊字元，我們稱之為轉義符。轉義符都是\開頭的，常用的轉義符及其說明如下：

\n，換行符，n是newline的意思

\ ，斜槓\

'，'單引號

"，"雙引號

\t，tab縮排

\b，空格，b是blank的意思

3.3、字串長度

字串是由若干字元組成的，這些字元的數量就是字串的長度。通過字串的length屬性可以獲取整個字串的長度。

var strMsg = "我是程式設計師";
alert(strMsg.length);//顯示5

3.4、字串拼接

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

拼接前會把與字串相加的任何型別轉成字串，在拼接一個新的字串

//字串的拼接 + 只要有字串和其他型別相拼接 最終的結果是字串
console.log('沙漠' + '駱駝'); //字串的 沙漠駱駝
console.log('pink老師'+18); //'pink老師18'
console.log('pink' + true); //pinktrue
console.log(12 + 12); //24
console.log('12' + 12); //'1212'

+ 號總結口訣:數值相加，字元相連

3.5、字串拼接加強

console.log('pink老師' + 18);
console.log('pink老師' + 18 +'歲');
var age = 19;
console.log('pink老師age歲'); 
// 我們變數不要寫到字串裡面，是通過和 字串相連的方式實現的
console.log('pink老師'+ age +'歲');
//變數和字串相連的口訣：引引加加
console.log('pink老師' + age + '歲');

我們經常會將字串和變數來拼接，因為變數可以很方便地修改裡面的值

變數是不能新增引號的，因為加引號的變數會變成字串

如果變數兩側都有字串拼接，口訣“引引加加”,刪掉數字，變數寫加中間

3.6、案例：顯示年齡

彈出一個輸入框，需要使用者輸入年齡，之後彈出一個警示框顯示“您今年XX歲啦”(xx表示剛才輸入的年齡)

//彈出一個輸入框（prompt),讓使用者輸入年齡（使用者輸入）
//把使用者輸入的值用變數儲存起來，把剛才輸入的年齡與所要輸出的字串拼接（程式內部處理）
//使用alert語句彈出警示框（輸出結果）
var age = prompt('請輸入您的年齡：');
var str = '您今年' + age + '歲';
alert(str);

4、布林型 Boolean

布林型別有兩個值：true 和 false,其中true表示真（對），而false表示假（錯）布林型和數字型相加的時候，true的值為1，false的值為0.

var flag = true;  //flag 布林型
var flag1 = false;//flag1 布林型
console.log(flag + 1); //2
console.log(flag1 + 1);//1

5、Undefined 和 Null

一個聲明後沒有被賦值的變數會有一個預設值undefined(如果進行相連或者相加時，注意結果)

//如果一個變數宣告未賦值 就是 undefined 未定義資料型別
var str;
console.log(str);
var variable = undefined;
console.log(variable + 'pink'); //undefinedpink
console.log(variable + 1); //NaN undefined 和數字相加 最後的結果是NaN

一個宣告變數給null值，裡面存的值為空

var space = null;
console.log(space + 'pink'); //nullpink
cnsole.log(space + 1); //1

6、字面量

字面量是在原始碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值

數字字面量：8，9，10

字串面量：'程式設計師'，"前端"

布林字面量:true,false

三、資料型別轉換

1、什麼是資料型別轉換

使用表單、prompt獲取過來的資料預設是字串型別的，此時就不能直接簡單的進行加法運算，而需要轉換變數的資料型別。通俗來說，就是把一種資料型別的變數轉換成另外一種資料型別. 我們通常會實現3種方式的轉換：

轉換為字串型別

轉換為數字型

轉換為布林型

2、轉換為字串

toString（），轉成字串

String（）強制轉換，轉成字串

加號拼接字串，和字串拼接的結果都是字串

// 1.把數字型轉換為字串型 變數.toStrng()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
// 2.我們利用 String（變數）
console.log(String(num));
// 3.利用 + 拼接字串的方法實現轉換效果 隱式轉換
console.log(num + '');

toString()和String()使用方式不一樣

三種轉換方式，我們更喜歡使用第三種加號拼接字串轉換方式，這一種方式也稱之為隱式轉換

3、轉換為數字型（重點）

parseInt(string)函式,將string型別轉成整數數值型，parseInt('78')

parseFloat(string)函式,將string型別轉成浮點數數值型，parseFloat('78.11') *、Numer()強制轉換函式,將string型別轉換為數值型，Number('12')

JS隱式轉換（- * /),利用算術運算隱式轉換為數值型，'12' - 0

// var age = prompt('請輸入您的年齡');
// 1. parseInt(變數) 可以把 字元型的轉換為數字型 得到是整數
// console.lg(parseInt(age));
console.log(parseInt('3.14')); // 3取整
console.log(parseInt('3.94')); // 3取整
console.log(parseInt('120px')); // 120 會去到這個px單位
console.log(parseInt('rem120px')); // NaN
// 2. parseFloat(變數) 可以把 字元型的轉換為數字型 得到是小數 浮點數
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 會去到這個px單位
console.log(parseFloat('rem120px')); // NaN
// 3. 利用 Number(變數)
var str = '123';
console.log(Number(str));
console.log(Numbr('12'));
// 4. 利用了算術運算 - * / 隱式轉換
console.log('12' - 0); // 12
console.lg('123' - '120');
console.log('123' * 1);

注意 parseInt 和 parseFloat 單詞的大小寫，這2個是重點

隱式轉換使我們在進行算術運算的時候，JS自動轉換了資料型別

3.1、案例 1：計算年齡

要求在頁面中彈出一個輸入框，我們輸入出生年份後，能計算出我們的年齡。

// 彈出一個輸入框（prompt),讓使用者輸入出生年份 (使用者輸入)
// 把使用者輸入的值用變數儲存起來，然後用今年的年份減去變數值，結果就是現在的年齡（程式內部處理）
// 彈出警示框（alert），把計算的結果輸出（輸出結果）
var year = prompt('請輸入您的出生年份');
var age = 2020 - year; // year 取過來的是字串型 但是這裡用的減法 有隱式轉換
alert('您的年齡是：' + age + '歲');

3.2、案例 2：簡單加法器

計算兩個數的值，使用者輸入第一個值後，繼續彈出第二個輸入框並輸入第二個值，最後通過彈出視窗顯示出兩次輸入值相加的結果。

// 先彈出第一個輸入框，提示使用者輸入第一個值 儲存起來
// 在彈出第二個框，提示使用者輸入第二個值 儲存起來
// 把這兩個值相加，並將結果賦給新的變數（注意資料型別轉換）
//彈出警示框（alert）,把計算的結果輸出（輸出結果）
````javasript
var num1 = prompt（'請輸入第一個值：');
var num2 = prompt ('請輸入第二個值：');
var result = parseFloat(num1) + parseFloat(num2);
alert('結果為：' + rsult);

4、轉換為布林型

Boolean()函式，說明：其他型別轉成布林值，案例：Boolean（'true'）;

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('小白')); // true
console.log(Boolean(12)); // true

代表空、否定的值會被轉換喂false，如''、0、NaN、null、undefined

其餘值都會被轉換為true