Number 物件: 數字型態的物件,如整數 (5, 10) 或浮點數 (3.14) Boolean 物件: 表示邏輯真假值的物件,真就是 true,假就是 false String 字串物件: 任何字元 (Unicode) Array 陣列物件: 可用來容納任何其他物件 Math 物件: 提供許多常用的數學常數及數學計算函數 Date 物件: 專門處理時間和日期的物件 RegExp 物件: 即正規表示式 (regular expression) 物件 每一種物件都有各自的屬性 (attribute) 和方法 (method) 可以使用。
JavaScript Number 是 64-bit Floating Point。 數值可以用字面常量 (literal) 的方式來寫: var x = 180; var y = 30.25; 也可以用科學記號表示法 (scientific (exponent) notation): var x = 101e5; // 10100000 var y = 101e-5; // 0.00101 八進位表示法 (Octal) 你可以用 0 開頭來用八進位表示法表示一個數字: var x = 017; console.log(x); // 15 十六進位表示法 (Hexadecimal) 你可以用 0x 開頭來用十六進位表示法表示一個數字: var x = 0xaf; console.log(x); // 175 Infinity Infinity 或 -Infinity 是 JavaScript 一個 global 的屬性,表示 無限大 或 無限小。 例如: console.log(100000000000 > Infinity); // 會輸出 false console.log(-99999 > -Infinity); // 會輸出 true var x = 2 / 0; // x = Infinity var y = -2 / 0; // y = -Infinity console.log(typeof Infinity); // 輸出 number NaN (Not a Number) NaN 是 JavaScript 一個 global 的屬性,表示一個值是 "非數值"。 例如: var x = 100 - 'string'; // x = NaN var y = 5 + x; // 一個 NaN 做數值運算,返回的結果也是 NaN, y = NaN JavaScript 還有一個 global function isNaN 用來判斷一個值 是不是 NaN。例如: isNaN(NaN); // true isNaN(undefined); // true isNaN({}); // true isNaN(true); // false isNaN(null); // false isNaN(20); // falseNumber() 函數 - 型別轉換
Number() 可以用來將其他的資料型態轉型 (type conversion) 成 數值型態。 字串 轉 數字 Number('3.14') // 3.14 Number('100') // 100 Number(' ') // 0 Number('') // 0 Number('a123') // NaN 布林值 轉 數字 Number(false) // 0 Number(true) // 1
Number 物件內建的 屬性 (Properties) Number.MAX_VALUE // Number.MAX_VALUE 表示正數的最大值,約為 1.79E+308,而比 Number.MAX_VALUE 大的數就是 Infinity。 Number.MIN_VALUE // MIN_VALUE表示所有正數中的最小值(smallest positive numeric value),也可說是最接近0的正數,MIN_VALUE實際值近似於 5e-324。 Number.POSITIVE_INFINITY // Number.POSITIVE_INFINITY 跟 Infinity 是一樣的,表示無限大的正數。 Number.NEGATIVE_INFINITY // Number.NEGATIVE_INFINITY 跟 -Infinity 是一樣的,表示無限小的負數。 Number 物件內建的 方法 (Methods) toString() // toString() 方法用來將數字轉型成字串。 例如: var count = 10; count.toString() // '10' valueOf() // valueOf() 方法用來將 Number 物件 型態轉型成基本數值型態 (primitive value)。 parseInt() // parseInt() 函數用來將字串轉型成整數。parseInt() 和 Number.parseInt() 是同樣的函數 parseFloat() // parseFloat() 函數用來將字串轉型成浮點數。parseFloat() 和 Number.parseFloat() 是同樣的函數 toExponential() // toExponential() 方法是用來將數字轉型為科學記號表示法 (字串型態)。 toFixed() // toFixed() 方法用來將一個數字轉成固定小數位數的字串。 語法:numObj.toFixed([digits]) toLocaleString() // toLocaleString() 方法返回一個字串,表示某個數字在本地端電腦(瀏覽器)的地區設定環境下的表示法 toPrecision() // toPrecision() 可以將數字格式化成指定長度的字串,如果數字長度大於指定的長度,會用科學表示法顯示。
在 JavaScript 中,只有這些值會被當作是 false: null 數值 0 NaN 空字串 '' undefined
Boolean() 函數 - 型別轉換
Boolean() 可以用來將其他的資料型態 轉型 (type conversion) 成 布林值型態。 var x = 0; Boolean(x); // false x = 100; Boolean(x); // true x = ''; Boolean(x); // false x = 'hi'; Boolean(x); // true x = null; Boolean(x); // false
var str = 'string text'; var str = "string text"; var str = "中文的字串";特殊字元 (Special Characters)
因為字串必須包在 單引號 或 雙引號 裡面,但是要特別注意的 雙引號 裡面不能有 雙引號、單引號 裡面不能有 單引號。 例如下面這些都會發生錯誤: var str = 'Mike's pet.'; var str = "This is a "book"."; 你可以改成這樣就會正確,因為雙引號裡面可以有單引號,或單引號裡面可以有雙引號: var str = "Mike's pet."; var str = 'This is a "book".'; 或是使用跳脫字元 (escape character) 反斜線 (backslash) \,來跳脫引號: var str = 'Mike\'s pet.'; // Mike's pet. var str = "This is a \"book\"."; // This is a "book".
特殊符號 | 表示的符號 |
---|---|
\0 | NULL 字元 |
' | 單引號 |
" | 雙引號 |
\ | 反斜線 |
\n | 換行符號 |
\r | carriage return 回車鍵 |
\t | tab |
\v | vertical tab |
\b | backspace |
\f | form feed |
\uXXXX | unicode codepoint |
字串相加 (String Concatenation) 我們可以用 + 和 += 運算子來將多個字串接起來變成一個。 用法例如: var str = 'hel' + 'lo'; console.log(str); // 輸出 'hello' var name = 'Mike'; var str2 = str + ' ' + name; console.log(str2); // 輸出 'hello Mike' str2 += '!'; // str2 += '!' 意思同 str2 = str2 + '!' console.log(str2); // 輸出 'hello Mike!'
多行字串 / 換行 有時候會遇到有非常長的字串讓你難以閱讀,例如: var longString = 'This is a very long string which needs to wrap across multiple lines because otherwise my code is unreadable.'; 但你可以用字串相加的技巧,讓你的字串在程式碼內更好閱讀: var longString = 'This is a very long string which needs ' + 'to wrap across multiple lines because ' + 'otherwise my code is unreadable.'; 或是可以在字串最後面加上反斜線 \ 表示字串會從下一行接續下去: var longString = 'This is a very long string which needs \ to wrap across multiple lines because \ otherwise my code is unreadable.'; \ 後面除了換行符號,不能再有任何字元包含空白。上面三種字串寫法都會得到一樣的字串結果喔!
String() 函數 - 型別轉換 數字轉字串 String(123) // '123' String(100 + 23) // '123' var x = 123; String(x) // '123' 布林值轉字串 String(true) // 'true' String(false) // 'false' 字串相等 我們可以用 === 或 == 運算子來判斷兩個字串是否相等: var str = 'hello world'; if (str === 'hello world') { console.log('equal'); // 會輸出 'equal' } 字串比對會逐字元比較,看兩個字串是否完全一樣。 相對的,我們可以用 !== 或 != 運算子來判斷兩個字串是否不相等: var str = 'hello world'; if (str !== 'hello Mars') { console.log('not equal'); // 會輸出 'not equal' }
String 物件內建的 屬性 (Properties)
.length 字串的 .length 屬性,可以用來取得字串的長度 - 包含幾個字元。
var str = 'hello world';
str.length // 11
String 物件內建的 方法 (Methods) substr() 跟 substring(),slice()相似用來切割字串,可以從一段字串中擷取其中的一段,差異在於 substr()第二個參數是指定要擷取多長。 語法: str.substr(start [, length]) 參數 start 是一個數字表示要從哪個位置開始擷取,位置從 0 開始; 如果start是一個負數,則表示值同 "字串長度+start";如果 start 大於字串長度,結果會返回空字串 參數 length 是一個數字表示總共要取出幾個字元,預設取到字串結尾。 最後結果會返回一個 新字串。 用法: var str = 'abcdefghij'; console.log(str.substr(1, 2)); // 輸出 'bc' console.log(str.substr(-3, 2)); // 輸出 'hi' console.log(str.substr(-3)); // 輸出 'hij' console.log(str.substr(1)); // 輸出 'bcdefghij' console.log(str.substr(-20, 2)); // 輸出 'ab' console.log(str.substr(20, 2)); // 輸出空字串 '' substring() 跟substr(),slice()相似用來切割字串,可以從一段字串中擷取其中的一段,差異在於substring()的兩個參數都不能傳入負數。 toLowerCase() 用來將字串中的英文字母都轉成小寫。 toUpperCase() 用來將字串中的英文字母都轉成大寫。 replace() 用來將字串中的字取代為另一個字。 charAt() 可用來取得 字串 中特定位置的 字元。var str ='hello world'; console.log(str.charAt(1)); // 輸出 'e' charCodeAt() 可以用來取得 字串 特定位置的字元的 Unicode 編碼。 concat() 用來將好幾個 字串 相加,然後返回一個新字串。 indexOf() 用來判斷 字串變數 中是否包含某字串時出現的位置。 str.indexOf(searchValue[, fromIndex]) lastIndexOf() 相對於 indexOf() 用來找出一個 字串 在另一個字串中最後出現的位置。 match() 用來搭配 正規表示式 (Regex)來找出字串中匹配的內容。 search() 用來找出一個字串在另一個字串中的位置。search() 的用途跟 indexOf() 相似,只是search()可用 正規表示式 當參數。 slice() 可以用來擷取一個字串的其中一部分。類似用途的方法還有 substr() 和 substring()。 split() 可以用來根據你指定的分隔符號,將字串切割成一個字串陣列。
宣告陣列 (Create an Array) 可以用 array literal [] 來宣告一個新陣列。 語法: var arrayName = [item1, item2, ...]; 例如:var fruits = ['Apple', 'Banana']; 陣列的最後一個元素後面不要再加上逗號 ,, 例如 ['Apple', 'Banana',] 因為在不同的瀏覽器可能會發生錯誤。 存取陣列 (Access the Elements of an Array) 陣列中的每一個值我們稱做一個元素,每一個元素儲存在陣列中固定的位置,我們稱做索引 (index), 索引值從 0 開始,表示陣列中的第一個元素,第二個之後的元素索引值則依序加 1 (0, 1, 2, 3, ...)。 我們可以用 [] 運算子來存取陣列中的元素。 語法: ary[index] 例如:var fruits = ['Apple', 'Banana']; var first = fruits[0]; // Apple var last = fruits[fruits.length - 1]; // Banana 取得陣列長度 (length) 你可以由陣列的 length 屬性得到一個陣列的長度: var fruits = ['Apple', 'Banana']; console.log(fruits.length) // 輸出 2 新增元素 你可以用 push() 方法來新增元素到陣列最後面: var fruits = ['Apple', 'Banana']; fruits.push('Orange'); console.log(fruits); // 輸出 ["Apple", "Banana", "Orange"] 或用 ary[aryLength] 的方式: var fruits = ['Apple', 'Banana']; fruits[fruits.length] = 'Orange'; console.log(fruits); // 輸出 ["Apple", "Banana", "Orange"] 上面的 fruits.length 其實就是陣列目前最大索引值加 1 的意思,但一般都會用 .push() 比較方便。 或用 unshift() 方法來新增一個元素到陣列最前面: var fruits = ['Apple', 'Banana']; fruits.unshift('Orange'); console.log(fruits); // 輸出 ["Orange", "Apple", "Banana"] 刪除元素 用 pop() 方法來移除陣列中的"最後一個元素": var fruits = ['Apple', 'Banana']; var last = fruits.pop(); // pop() 除了移除元素,還會返回移除的元素值 // Banana console.log(fruits); // 輸出 ["Apple"] 用 shift() 方法來移除陣列中的"第一個元素": var fruits = ['Apple', 'Banana']; var first = fruits.shift(); // shift() 除了移除元素,還會返回移除的元素值 // Apple console.log(fruits); // 輸出 ["Banana"] delete 運算子可以用來刪除特定位置的元素,但它不會移除元素,只是將該位置的元素值變成 undefined: var fruits = ['Apple', 'Banana', 'Orange']; delete fruits[0]; fruits; // [undefined, "Banana", "Orange"] 迴圈呼叫陣列 (for loop Array Elements) for 語法可以用來遍歷陣列中所有的元素。 用法: var fruits = ['Apple', 'Banana', 'Orange']; // 依序會輸出: for (var i=0; i<fruits.length; ++i) { // Apple console.log(fruits[i]); // Banana } // Orange 陣列排序 (Array Sorting) .sort() 陣列的 sort() 方法可以用來做陣列內元素的排序 語法: ary.sort() ary.sort(compareFunction) sort() 預設會將元素轉型成 字串 再做比較,比較的方式是從左到右逐一比對元素中的每個字元的 Unicode code point 大小。 sort() 執行後會返回排序後的陣列。Array 物件內建的方法 (Methods) concat() every() filter() forEach() indexOf() join() lastIndexOf() map() pop() push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() unshift()● 字串型態元素的排序 - 陣列排序 .sort() var fruits = ['cherries', 'apples', 'bananas']; fruits.sort(); // 返回 ["apples", "bananas", "cherries"] ● 數字型態元素的排序 (Numeric Sort) - 陣列排序 .sort() var scores = [1, 10, 21, 2]; scores.sort(); // 返回 [1, 10, 2, 21] // 注意 10 會排在 2 前面,因為字串'10'的第一個字元'1'比'2'的 Unicode code point 小 var things = ['word', 'Word', '1 Word', '2 Words']; things.sort(); // 返回 ["1 Word", "2 Words", "Word", "word"] // 因為數字的 Unicode code point 比英文字小 ● 倒轉陣列排序 (Reversing an Array) - 陣列排序 .sort() 你可以搭配 reverse() 方法 來將陣列的順序倒轉: var fruits = ['cherries', 'apples', 'bananas']; fruits.sort(); fruits.reverse(); console.log(fruits); // 輸出 ["cherries", "bananas", "apples"] ● 自定義排序 (Custom Sort) - 陣列排序 .sort() sort() 可以傳入函數參數 compareFunction,可以用來自訂排序的邏輯, 陣列會根據 compareFunction 函數的回傳值來做排序依據。 compareFunction(a, b) 函數接受兩個參數,分別表示兩個元素值怎麼做比較,然後傳回一個數字,可能是正數、0 或負數: compareFunction(a, b) 回傳值如果小於 0 (負數),表示 a 排序在 b 前面 compareFunction(a, b) 回傳值如果等於 0,表示 a 和 b 排序一樣位置不動 compareFunction(a, b) 回傳值如果大於 0 (正數),表示 b 排序在 a 前面 ECMAscript 標準沒規範當 0 相等的時候,哪個元素排先哪個元素排後,每個瀏覽器的實做可能會不一樣。 用法: var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); console.log(numbers); // 輸出 [1, 2, 3, 4, 5] ● 排序物件元素 (Sorting Object Array) - 陣列排序 .sort() var members = [ {name: 'Mike', age: 30}, {name: 'Jimmy', age: 25}, {name: 'Judy', age: 20} ]; members.sort(function(a, b) { return a.age > b.age; // boolean false == 0; true == 1 }); console.log(members); // 順序依序會是 Mike -> Jimmy -> Judy ● 亂數排序 (Random Order) - 陣列排序 .sort() var numbers = [10, 50, 1, 80, 250, 500, 101, 300]; numbers.sort(function(a, b) { return 0.5 - Math.random(); }); numbers; // [250, 10, 80, 1, 500, 101, 50, 300] //每次執行排序後的結果都會不一樣