一、介紹

上節課了解了JavaScript 的語句，知道了JavaScript 語句就是向瀏覽器發出的命令，告訴瀏覽器該做什么的。那么這節課呢，我們來了解的是JavaScript 數據類型和類型之間的轉換。那JavaScript 數據類型都有什么呢？字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）

在JavaScript 中數據類型的轉換只有強制類型轉換和隱式類型轉換兩種方式。

二、知識點介紹

1、數據類型

2、typeof 操作符

3、constructor 屬性

4、類型轉換

三、上課對應視頻的說明文檔

1、數據類型

字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）

JavaScript 擁有動態類型

JavaScript 擁有動態類型。這意味著相同的變量可用作不同的類型：

實例

var x? ? ? ? ? ? ? ? // x 為 undefined

var x = 6;? ? ? ? ? // x 為數字

var x = "Bill";? ? ? // x 為字符串

1.1JavaScript 字符串

字符串是存儲字符（比如 "Bill Gates"）的變量。

字符串可以是引號中的任意文本。您可以使用單引號或雙引號：

實例

var carname="Bill Gates";

var carname='Bill Gates';

您可以在字符串中使用引號，只要不匹配包圍字符串的引號即可：

實例

var answer="Nice to meet you!";

var answer="He is called 'Bill'";

var answer='He is called "Bill"';

1.2JavaScript 數字

JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶：

實例

var x1=34.00;? ? ? //使用小數點來寫

var x2=34;? ? ? ? //不使用小數點來寫

極大或極小的數字可以通過科學（指數）計數法來書寫：

實例

var y=123e5;? ? ? // 12300000

var z=123e-5;? ? // 0.00123

1.3JavaScript 布爾

布爾（邏輯）只能有兩個值：true 或 false。

var x=true

var y=false

布爾常用在條件測試中。您將在本教程稍后的章節中學到更多關于條件測試的知識。

1.4JavaScript 數組

下面的代碼創建名為 cars 的數組：

var cars=new Array();

cars[0]="Audi";

cars[1]="BMW";

cars[2]="Volvo";

或者 (condensed array):

var cars=new Array("Audi","BMW","Volvo");

或者 (literal array):

實例

var cars=["Audi","BMW","Volvo"];

數組下標是基于零的，所以第一個項目是 [0]，第二個是 [1]，以此類推。

1.5JavaScript 對象

對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。

空格和折行無關緊要。聲明可橫跨多行：

var person={

firstname : "Bill",

lastname? : "Gates",

id? ? ? ? :? 5566

};

對象屬性有兩種尋址方式：

實例

name=person.lastname;

name=person["lastname"];

Undefined 和 Null

Undefined 這個值表示變量不含有值。

可以通過將變量的值設置為 null 來清空變量。

實例

cars=null;

person=null;

聲明變量類型

當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：

var carname=new String;

var x=? ? ? new Number;

var y=? ? ? new Boolean;

var cars=? new Array;

var person= new Object;

JavaScript 變量均為對象。當您聲明一個變量時，就創建了一個新的對象。

2、typeof 操作符

你可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。

實例

typeof "John"? ? ? ? ? ? ? // 返回 string

typeof 3.14? ? ? ? ? ? ? ? // 返回 number

typeof NaN? ? ? ? ? ? ? ? // 返回 number

typeof false? ? ? ? ? ? ? ? // 返回 boolean

typeof [1,2,3,4]? ? ? ? ? ? ? // 返回 object

typeof {name:'John', age:34} // 返回 object

typeof new Date()? ? ? ? ? ? // 返回 object

typeof function () {}? ? ? ? // 返回 function

typeof myCar? ? ? ? // 返回 undefined (如果 myCar 沒有聲明)

typeof null? ? ? ? ? ? ? ? // 返回 object

請注意：

?NaN 的數據類型是 number 非數字的特殊值

?數組(Array)的數據類型是 object

?日期(Date)的數據類型為 object

?null 的數據類型是 object

?未定義變量的數據類型為 undefined

如果對象是 JavaScript Array 或 JavaScript Date ，我們就無法通過 typeof 來判斷他們的類型，因為都是 返回 Object。

3、constructor 屬性

constructor 屬性返回所有 JavaScript 變量的構造函數。

實例

"John".constructor? ? ? ? ? ? ? ? // 返回函數 String()? { [native code] }

(3.14).constructor? ? ? ? ? ? ? ? // 返回函數 Number()? { [native code] }

false.constructor? ? ? ? ? ? ? ? ? // 返回函數 Boolean() { [native code] }

[1,2,3,4].constructor? ? ? ? ? ? ? // 返回函數 Array()? { [native code] }

{name:'John', age:34}.constructor? // 返回函數 Object()? { [native code] }

new Date().constructor? ? ? ? ? ? // 返回函數 Date()? ? { [native code] }

function () {}.constructor? ? ? ? // 返回函數 Function(){ [native code] }

你可以使用 constructor 屬性來查看對象是否為數組 (包含字符串 "Array"):

實例

function isArray(myArray) {

return myArray.constructor.toString().indexOf("Array") > -1;

}

你可以使用 constructor 屬性來查看對象是否為日期 (包含字符串 "Date"):

實例

function isDate(myDate) {

return myDate.constructor.toString().indexOf("Date") > -1;

}

4、JavaScript 類型轉換

JavaScript 變量可以轉換為新變量或其他數據類型：

通過使用 JavaScript 函數

通過 JavaScript 自身自動轉換

在js中數據類型轉換一般分為兩種，即強制類型轉換和隱式類型轉換(利用js弱變量類型轉換)。

4.1、將數字轉換為字符串

全局方法 String() 可以將數字轉換為字符串。

該方法可用于任何類型的數字，字母，變量，表達式：

實例

String(x)? ? ? ? // 將變量 x 轉換為字符串并返回

String(123)? ? ? // 將數字 123 轉換為字符串并返回

String(100 + 23)? // 將數字表達式轉換為字符串并返回

Number 方法 toString() 也是有同樣的效果。

實例

x.toString()

(123).toString()

(100 + 23).toString()

在 Number 方法 章節中，你可以找到更多數字轉換為字符串的方法：

方法 描述

toExponential() 把對象的值轉換為指數計數法。

toFixed() 把數字轉換為字符串，結果的小數點后有指定位數的數字。

toPrecision() 把數字格式化為指定的長度。

4.2、將布爾值轉換為字符串

全局方法 String() 可以將布爾值轉換為字符串。

String(false)? ? ? ? // 返回 "false"

String(true)? ? ? ? // 返回 "true"

Boolean 方法 toString() 也有相同的效果。

false.toString()? ? // 返回 "false"

true.toString()? ? ? // 返回 "true"

4.3將日期轉換為字符串

Date() 返回字符串。

Date()? ? ? // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

全局方法 String()? 可以將日期對象轉換為字符串。

String(new Date())? // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 toString() 也有相同的效果。

實例

obj = new Date()

obj.toString()? // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

在 Date 方法 章節中，你可以查看更多關于日期轉換為字符串的函數：

方法 描述

getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。

getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。

getFullYear() 從 Date 對象以四位數字返回年份。

getHours() 返回 Date 對象的小時 (0 ~ 23)。

getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。

getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。

getMonth() 從 Date 對象返回月份 (0 ~ 11)。

getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒數。

4.4、將字符串轉換為數字

全局方法 Number() 可以將字符串轉換為數字。

字符串包含數字(如 "3.14") 轉換為數字 (如 3.14).

空字符串轉換為 0。

其他的字符串會轉換為 NaN (不是個數字)。

Number("3.14")? ? // 返回 3.14

Number(" ")? ? ? // 返回 0

Number("")? ? ? ? // 返回 0

Number("99 88")? // 返回 NaN

在 Number 方法 章節中，你可以查看到更多關于字符串轉為數字的方法：

方法 描述

parseFloat() 解析一個字符串，并返回一個浮點數。

parseInt() 解析一個字符串，并返回一個整數。

4.5一元運算符 +

Operator + 可用于將變量轉換為數字：

實例

var y = "5";? ? ? // y 是一個字符串

var x = + y;? ? ? // x 是一個數字

如果變量不能轉換，它仍然會是一個數字，但值為 NaN (不是一個數字):

實例

var y = "John";? // y 是一個字符串

var x = + y;? ? ? // x 是一個數字 (NaN)

4.6、將布爾值轉換為數字

全局方法 Number() 可將布爾值轉換為數字。

Number(false)? ? // 返回 0

Number(true)? ? ? // 返回 1

4.7、將日期轉換為數字

全局方法 Number() 可將日期轉換為數字。

d = new Date();

Number(d)? ? ? ? ? // 返回 1404568027739

日期方法 getTime() 也有相同的效果。

d = new Date();

d.getTime()? ? ? ? // 返回 1404568027739

4.8、自動轉換類型

當 JavaScript 嘗試操作一個 "錯誤" 的數據類型時，會自動轉換為 "正確" 的數據類型。

以下輸出結果不是你所期望的：

5 + null? ? // 返回 5? ? ? ? null 轉換為 0

"5" + null? // 返回"5null"? null 轉換為 "null"

"5" + 1? ? // 返回 "51"? ? ? 1 轉換為 "1"?

"5" - 1? ? // 返回 4? ? ? ? "5" 轉換為 5

4.9、自動轉換為字符串

當你嘗試輸出一個對象或一個變量時 JavaScript 會自動調用變量的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;

myVar = {name:"Fjohn"}? // toString 轉換為 "[object Object]"

myVar = [1,2,3,4]? ? ? // toString 轉換為 "1,2,3,4"

myVar = new Date()? ? ? // toString 轉換為 "Fri Jul 18 2014 09:08:55 GMT+0200"

數字和布爾值也經常相互轉換：

myVar = 123? ? ? ? ? ? // toString 轉換為 "123"

myVar = true? ? ? ? ? ? // toString 轉換為 "true"

myVar = false? ? ? ? ? // toString 轉換為 "false"

下表展示了使用不同的數值轉換為數字(Number), 字符串(String), 布爾值(Boolean)：

原始值????????????轉換為數字????????????轉換為字符串????????????轉換為布爾值

false? ? ? ? ? ? ? ? 0 ???????????????????????????? "false" ???????????????????? false

true ????????????????1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"true"? ? ? ? ? ? ? ? ? ? ? ?true

0 ???????????????????? 0? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"0" ???????????????????????? false

1? ? ? ? ? ? ? ? ? ? ? 1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "1" ???????????????????????? true

"0"???????????????????? 0? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"0" ???????????????????????? true

"000"???????????????? 0???????????????????????????? "000"? ? ? ? ? ? ? ? ? ? ? ? true

"1" ???????????????????? 1 ???????????????????????????? "1"? ? ? ? ? ? ? ? ? ? ? ? ? true

NaN ???????????????? NaN ???????????????????????? "NaN" ???????????????????? false

Infinity???????????? Infinity ????????????????????"Infinity" ????????????????????true

-Infinity ????????????-Infinity ????????????????"-Infinity"? ? ? ? ? ? ? ? ? ? ?true

"" ???????????????????? 0???????????????????????????? ""???????????????????????????? false

"20" ????????????????20 ???????????????????????????? "20"? ? ? ? ? ? ? ? ? ? ? ? true

"Runoob"???????? NaN ???????????????????????? "Runoob"? ? ? ? ? ? ? ? true

[ ] ???????????????????? 0 ???????????????????????????? ""???????????????????????????? true

[20]???????????????? 20 ???????????????????????????? "20"???????????????????????? true

[10,20] ????????????NaN ???????????????????????? "10,20"???????????????????? true

["Runoob"]???????? NaN???????????????????????? "Runoob" ????????????????true

["Runoob","Google"]? NaN???????????????? "Runoob,Google" ????true

function(){} ????????NaN???????????????????????? "function(){}" ????????????true

{ } ????????????????????NaN???????????????????????????? "[object Object]"? ? ?true

null ????????????????0???????????????????????????????? "null"? ? ? ? ? ? ? ? ? ? ? ? ? false

undefined ????????NaN ???????????????????????? "undefined"? ? ? ? ? ? ? ?false

4.10、隱式類型轉換:

隱式類型轉換和java中大不相同，在js中數據類型不嚴格，沒有浮點和整型，這里的隱式類型轉換指的是字符串和數值類型之間的轉換，在進行字符串和數字之間進行減乘除取模運算或者進行比較運算時，他會自動把字符串轉換為數字。轉換數字的默認方法是調用Number(),進行加法運算則是將數字看成字符串進行拼接. var x = "123";

var y = 121;

alert(x+y);//"123121;

alert(x-y);//2

alert(x*y);//14883

alert(x/y);//1.016528256198346

alert(x%y);//2

alert(x>y);//true

alert(x==y);//false

alert("123a">y);//false詭異