第三章基本资料型态

第三章

基本資料型態張智星jang@/jang台大資工系多媒體檢索實驗室本章大綱大綱本章說明JavaScript常用的資料型態，以及與這些資料型態相關的函式及範例。主題3-1：資料型態簡介3-2：數字3-3：字串3-4：布林3-5：日期物件3-6：數學物件3-7：影像物件2/433-1：資料型態簡介本小節介紹JavaScript各種基本資料型態。3/43JavaScript資料型態JavaScript的資料型態（DataType）可分成三類基本資料型態字串（string）數字（number）布林（boolean）函數（function）組合資料型態內建物件：日期、陣列、Math、Number等自訂物件特殊資料型態Null&undefined4/43範例3-1主題:用typeof()函數得到各種變數的資料型態。連結：typeof01.htm說明使用「==」、「>」、「<」等判斷運算元，會回傳true或false的布林型態。在JavaScript中的變數跟C語言不一樣，不需要在宣告時指定資料型態，而且同一個變數可以變換成不同的資料型態。5/43範例3-2主題：顯示各種會產生undefined的範例。連結：undefined01.htm說明「undefined」是一種特殊的資料型態，專門用來判斷下列兩種情況不存在的變數：未宣告，且未指定值的變數。未初始化的變數：已宣告，但未指定值的變數。變數如果未經過宣告，就無任何值存在，所以無法取用，但此類變數可以經由typeof()傳回“undefined”字串。如果只經過宣告，但尚未初始化，它的預設值則是undefined（非字串！）。此類變數亦可經由typeof()傳回“undefined”。6/43範例3-3主題：檢查null的各種性質和用法。連結：

null01.htm程式碼重點

說明範例中註解的Null或NULL都是錯誤的（在C語言中用的是NULL）。null,0,false，在條件判斷時都是不成立的條件。7/43x=null;

(x)?document.writeln("True!"):document.writeln("False!");3-2：數字本小節介紹數值的運算及相關函式的使用。8/43數值內存與表示為保留最高的精確度，JavaScript內部把所有的數值均表示成雙倍精準（DoublePrecision）浮點數。整數和浮點數，其內部儲存和運算方式都是以雙倍精準的浮點數來進行。在PC上，一般浮點數都是佔用4bytes，但雙倍精準浮點數會佔用8bytes，以提升數值運算的精確度。(我們一般常用的科學計算軟體MATLAB，它的預設數值型態也是雙倍精準浮點數。)9/43數值基底JavaScript的整數大部分是以十進位來表示，但若有需要，也可以使用不同的基底（Base）來表示，例如八進位和十六進位：八進位的數字以0開頭，只包含數字0到7。（但是如果有一個數字的開頭是0，但卻也包含數字8或9，或包含小數點，那麼它就會被認定成是一個十進位數字。）十六進位的數字以"0x"，只包含了數字0到9，和字母A到F（不論大小寫）。字母A到F分別代表10到15。也就是說，0xA等於10，而0xF等於15。八進位和十六進位的數字可以是負數，但是不能有小數部分，而且也不能以科學記號法（指數）來表示。10/43數值表示範例(1)數字說明十進位表示法.0001,0.0001,1e-4,1.0e-44個浮點數，值皆相等。0.00013.45e2一個浮點數。34542一個整數。420378一個整數。雖然看起來像八進位數字（以0開頭），8不是正確的數字，所以這個數字是十進位數字。3780377一個八進位整數。注意它雖然只比上面的數字小1，它真正的值卻截然不同。2550.0001一個浮點數字。即使以0開頭，它卻不是八進位數字，因為它有一個小數點。0.000111/43數值表示範例(2)說明浮點數可用小數點或用科學記號法來表示。若用科學記號法，大寫或小寫的“e”都可以表示「10的次方」。JavaScript使用IEEE754浮點標準的數值表示法來表示數字，您可以寫出大到1.7976931348623157x10308

和小到5.00x10-324的數字。數字說明十進位表示法00.0001這是一個錯誤。開頭的兩個0顯示它是個八進位數，可是八進位數字是不能有小數點的。(編譯器錯誤)0Xff十六進位的整數。2550x37CF十六進位的整數。142870x3e7十六進位的整數。注意"e"並不是指數。9990x3.45e2這是一個錯誤。十六進位數字不能有小數部分。(編譯器錯誤)12/43範例3-4主題：產生JavaScript的特殊數值連結：number01.htm說明NaN（NotaNumber，非數字）：用不正確的資料來執行數學運算時，或是執行無意義的數學運算，就會產生這個數值。正的無限大（Infinity）：當正數大到無法顯示在JavaScript中時，就會使用這個數值。負的無限大（-Infinity）：當負數大到無法顯示在JavaScript中時，就會使用這個數值。為什麼「Math.pow(0,0)=1」？理論上應該是NaN…13/43Number物件Number是一個內訂的物件，我們可以使用它的相關屬性來代表與數字相關的常數常數表示法說明Number.MIN_VALUE傳回能在JavaScript中表示最接近零的數字。大約等於5.00E-324。Number.MAX_VALUE傳回能在JavaScript中表示的最大值。大約等於1.79E+308。Number.NEGATIVE_INFINITY傳回一個能在JavaScript中表示、且比最大負數(-Number.MAX_VALUE)還要小的值。Number.POSITIVE_INFINITY傳回能在JavaScript中表示且大於最大數(Number.MAX_VALUE)的值。Number.NaN一個特殊值，可指出算術運算式的傳回值不是一個數字。14/43數字相關函式(1)函式格式說明parseInt(numString,[radix])傳回一個從字串numString轉換而來的整數，其中radix是介於2和36之間的值，用來指出包含在numString中的數字基底（Base）。如果未提供，則字首為0x的字串會視為十六進位的數字，而字首為0的字串則會視為八進位的數字。其他所有的字串則會視為十進位的數字。parseFloat(numString)傳回一個從字串numString轉換而來的浮點數。isNaN(number)如果number值為NaN，則isNaN函式會傳回true，否則會傳回false。通常使用此函式來測試parseInt和parseFloat方法的傳回值。15/43數字相關函式(2)函式格式說明x.toString([radix])將數值x轉成特定基底radix的字串。x.toFixed(n)將數值x轉成小數點以下n位有效數字的小數點表示法。x.toExponential(n)將數值x轉成小數點以下n位有效數字的科學記號表示法。x.toPrecision(n)將數值x轉成共具有n位有效數字。16/43範例3-5主題：利用toString()函式，顯示不同基底的表示方式連結：number03.htm程式碼重點

說明如果toString沒有放任何參數，預設用十進位轉換。17/43document.writeln("<td>"+x.toString());document.writeln("<td>"+x.toString(2));document.writeln("<td>"+x.toString(8));document.writeln("<td>"+x.toString(16));範例3-6主題：與數字物件（Number）相關的常數與函式的測試連結：number02.htm說明這個範例使用Number物件，以及數字相關函式表中的各種方法來處理數值資料。18/433-3：字串本小節介紹各種字串物件及函式運用。19/43字串表示方式字串資料型態可以用來表示一列文字內容。我們只要把文字括在相符的單括號或雙括號裡，就可以形成一個字串。"Thisisastring"'Thisisastringquotedbysinglequotes'"Thisisastringwith'single'quotes"'Thisisastringwith"double"quotes'"Thisanotherstringwith\"double\"quotes"說明可用單引號或雙引號來界定字串的開始和結束。為了避掉雙引號的原來用途（標示字串的開始和結束），我們要在雙引號前加上反斜線(\)。20/43字串物件函式與屬性(1)性質或方法說明length傳回字串的長度toUpperCase()換成大寫字母toLowerCase()換成小寫字母concat()字串並排（等效於使用加號）charAt(n)抽出第n個字元（n=0代表第一個字元）charCodeAt(n)抽出第n個字元（n=0代表第一個字元），並轉換成Unicodesubstr(m,n)傳回一個字串，從位置m開始，且長度為nsubstring(m,n)傳回一個字串，從位置m開始，結束於位置n-1indexOf(str)尋找子字串str在原字串的第一次出現位置lastIndexOf(str)尋找子字串str在原字串的最後一次出現位置21/43字串物件函式與屬性(2)性質或方法說明等效的HTML標籤big()增大字串的字型<big>...</big>small()減小字串的字型<small>...</small>blink()閃爍字串（不適用於IE、Chrome）<blink>...</blink>bold()變粗體<b>...</b>italics()變斜體<i>...</i>fixed()變等寬字體<tt>...</tt>strike()槓掉字串<strike>...</strike>sub()變下標_...sup()變上標^...fontcolor()設定字串的顏色<fontcolor=...>...</font>fontsize()設定字串的字型大小<fontsize=...>...</font>22/43範例3-7主題：示範各種字串物件的方法與屬性連結：string01.htm說明注意substr(m,n)和substring(m,n)的差異。如果text="我願是千萬條江河"，則text.substr(3,5)會傳回“千萬條江河”（第3個字元開始，取5個字元）text.substring(3,5)會傳回“千萬”（第3個字元開始，第4個字元結束）有關於字串的比對，只提到了indexOf()和lastIndexOf()兩個方法，事實上JavaScript對於字串的比對和代換有許多強大的功能，例如search、match、replace等函數，這些功能統稱「通用表示法」，後面的章節會仔細介紹。23/43範例3-8主題：使用eval()函式，將字串轉成程式碼連結：eval01.htm程式碼重點

說明我們把JavaScript要執行的命令收集在字串變數command，然後再用eval指令來“執行”這個字串，就可以創造出三個變數x1、x2和x3。24/43for(i=1;i<=3;i++){

command="x"+i+"="+i*i*i;

eval(command);

}各種物件的toString()物件toString()的結果Array（陣列）將Array的元素轉換為字串，形成以逗號串連起來的結果，此結果與Array.toString()和Array.join()得到的結果相同Boolean（布林）如果布林值為True，會傳回"true"；否則會傳回"false"Date（日期）傳回顯示日期的文字形式Error（錯誤）傳回包含錯誤訊息的字串Function（函數）傳回函數的定義Number（數字）傳回數字的文字表示法String（字串）傳回String物件的值自訂物件傳回"[objectObject]"25/43範例3-9主題：利用toString()將各種物件轉成字串連結：toString01.htm說明若要將字串轉成數值，可用parseInt()或是parseFloat()這兩個函數parseInt()可將字串轉整數。(若轉換不成功，則傳回NaN。)parseFloat()可將字串轉浮點數。(若轉換不成功，則傳回NaN。)26/433-4：布林本小節介紹布林物件的使用方式。27/43範例3-10主題：有關Boolean資料型態的測試連結：boolean01.htm程式碼重點

說明JavaScript中的布林（Boolean）資料型態的值只有兩種：true和false。在上述範例中，(x==y)和(y==z)都會測試兩個數目是否相等，因此會回傳布林常數true和false，但是(x=z)是一個指派敘述，因此回傳的值就是被指派的值。28/43document.write(“x==y==>”+(x==y)+“<br>”);document.write(“y==z==>”+(y==z)+“<br>”);document.write(“x=z==>”+(x=z)+“<br>”);3-5：日期物件本小節介紹日期物件的使用方法。29/43Date物件相關函式方法說明toString()以標準字串來表示日期物件toLocaleString()以地方字串（依作業系統而有所不同）來表示日期物件getYear()取得年份getMonth()取得月份（需注意：0代表一月，因此例如若是八月，結果就是7）getDate()取得日數getHours()取得時數getMinutes()取得分鐘數getSeconds()取得秒數getDay()取得星期數（例如若是星期四，結果就是4）30/43範例3-11主題：示範各種日期物件的屬性及函式連結：date01.htm說明newDate()即會產生包含現在日期的一個日期物件。new

Date()產生的物件，並不會因為過了一段時間後，使用getSeconds()這些取得時間訊息的函式就會跟著改變，這些時間訊息都在newDate()的時候決定了。31/43範例3-12主題：使用eval()簡化範例3-11的程式碼連結：date02.htm程式碼重點

說明組成字串來讓eval進行執行。32/43for(i=0;i<method.length;i++)

document.writeln("<br>today."+method[i]+"()="+eval("today."+method[i]+"();"));範例3-13(1)主題：利用getTime()寫一個碼表程式。連結：dateGetTime01.htm說明getTime()可以傳回來某個時間物件與1970年1月1日零時的時間差距，單位是毫秒。當按鈕文字是”開始計時”時，按下按鈕後，我們記錄目前時間(date1)，設定時間顯示為”計時中...”，並將按鈕文字改為”停止計時”。當按鈕文字是”停止計時”時，按下按鈕後，我們記錄目前時間”date2”，並算出時間差距(timeDiff)並顯示在時間欄位內，同時將按鈕文字改為”歸零”。33/43範例3-13(2)說明若要設計在計時過程中，文字欄位不斷顯示目前計時結果，但這種密集的即時顯示會比較消耗CPU的計算時間。欲達到此功能，必須使用setTimeOut()函數，將會在後面詳述。我們也可以產生一個日期物件後，再對此物件進行修改（例如改變秒數或月份）或格式轉換，相關的方法很多，在此不再贅述。34/43範例3-12(流程圖)按鈕顯示：開始計時文字欄位：00:00:00按鈕顯示：停止計時文字欄位：計時中…按鈕顯示：歸零文字欄位：xx.xx.xx啟始狀態35/433-6：數學物件本小節介紹數學物件（Math）的各種屬性及函式使用方法。使用時必須引用Math物件，例如Math.PIMath.exp(-2)36/43數學物件方法(1)方法說明abs(x)取一個數x的絕對值ceil(x)傳回大於或等於x的最小整數floor(x)傳回小於或等於x的最大整數log(x)計算以e(2.71828)為底的自然對數值exp(x)傳回以e(2.71828)為底的冪次方值pow(a,n)計算任意a的n次方max(a,b)傳回兩個數a,b中較大的數min(a,b)傳回兩個數a,b中較小的數sqrt(x)求出一個數x的平方根round(x)四捨五入至整數37/43數學物件方法(2)說明如果你的工作或研究牽涉到許多數學運算，那就應該使用MATLAB來完成，比較省時省力！方法說明random()隨機產生一個介於0~1的數值sin(x)正弦函數cos(x)餘弦函數tan(x)正切函數asin(x)反正弦函數acos(x)反餘弦函數atan(x)反正切函數38/43範例3-14主題：示範各種數學物件函式及屬性的使用連結：math01.htm程式碼重點

說明只要放在with(Math)大括弧中的數學函數，都可以不再引用Math。39/43with(Math){//使用Math物件的另一種方法

document.writeln(pow(cos(PI/3),2)+p