Strings
let str = 'Hi';
let greeting = "Hello";
跳脫字元 Escape Characters
跳離本身字元所代表的意義,在一個字串表示中,若要輸出”,要寫成:”””,否則第2個”會被當成字串字元,第3個字串字元”被當成多餘的字串字元。
‘ — Single quote
” — Double quote
— Backslash
b — Backspace 到退
f — Form feed,換頁,進紙
n — New line ,新行
r — Carriage return ,游標回到一開始的位置
t — Horizontal tabulator,水平定位
v — Vertical tabulator ,垂直定位
Windows line break: 'rn'
Unix line break: 'n'
Tab: 't'
Backslash ''
String 方法
charAt()
回傳字串中的特定位置處的字元 (將字串視為字元的陣列,索引值從0開始)
var str = 'hello world';
// 輸出 'e'
console.log(str.charAt(1));
// 輸出 'h'
console.log(str.charAt(0));
charCodeAt()
取得字串
特定位置的字元的 Unicode 編碼
var str = 'hello world';
// 輸出 104
console.log(str.charCodeAt(0));
// 輸出 101
console.log(str.charCodeAt(1));
concat()
幾個字串
相加,然後返回一個新字串
var hello = 'Hello, ';
// 輸出 'Hello, Mike have a nice day.'
console.log(hello.concat('Mike', ' have a nice day.'));
簡單一點,使用+就可以連接2個字串:
var hello = 'Hello, ';
// 輸出 'Hello, Mike have a nice day.'
console.log(hello + 'Mike' + ' have a nice day.');
fromCharCode()
回傳1或多個指定的unicode編碼的字符(串)
String.fromCharCode(72,69,76,76,79);
//HELLO
String.fromCharCode(65,66,67);
//ABC
indexOf()
判斷字串字串
變數中是否包含某字串,返回找到的位置,第一個位置從 0 開始算起;找不到則返回 -1
'Blue Whale'.indexOf('Blue'); // 0
'Blue Whale'.indexOf('Blute'); // -1
'Blue Whale'.indexOf('Whale', 0); // 5
'Blue Whale Blue'.indexOf('Blue', 5); // 11
lastIndexOf()
找出一個字串
在另一個字串中最後出現的位置。
var str = 'Brave new world';
str.lastIndexOf('w'); // 10
str.lastIndexOf('g'); // -1
match()
搭配正規表示式 (Regex
)來找出字串
中匹配的內容。
返回一個陣列
,第一個元素是完整匹配內容,接著是匹配的群組 (capturing group);如果沒有匹配則返回 null。
var str = 'For more information, see Chapter 3.4.5.1';
var re = /see (chapter d+(.d)*)/i;
var found = str.match(re);
// 輸出 ["see Chapter 3.4.5.1", "Chapter 3.4.5.1", ".1"]
console.log(found);
replace()
字串取代
search()
找出一個字串在另一個字串中的位置。search() 的用途跟 indexOf
() 相似,只是 search() 可以用正規表示式當參數。
var str = 'Apples are red, and apples are good.';
// 輸出 0
console.log(str.search(/apple/i));
slice()
用來擷取一個字串的其中一部分。
var str = 'The morning is upon us.';
// 輸出 'he morn'
console.log(str.slice(1, 8));
// 輸出 'morning is upon u'
console.log(str.slice(4, -2));
// 輸出 'is upon us.'
console.log(str.slice(12));
// 輸出空字串 ''
console.log(str.slice(30));
// 輸出 'us.'
console.log(str.slice(-3));
// 輸出 'us'
console.log(str.slice(-3, -1));
// 輸出 'The morning is upon us'
console.log(str.slice(0, -1));
split()
用來根據你指定的分隔符號,將字串切割成一個字串陣列。
var str = 'a,b,c,d,e';
var strAry = str.split(',');
// 輸出 ["a", "b", "c", "d", "e"]
console.log(strAry);
// 輸出 ["a", "b"]
console.log(str.split(',', 2));
分隔符號也可以是一個正規表示式:
var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ';
var re = /s*;s*/;
var nameList = names.split(re);
// 輸出 ["Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand "]
console.log(nameList);
substr()
跟 substring(), slice() 相似用來切割字串,可以從一段字串中擷取其中的一段,差異在於 substr() 第二個參數是指定要擷取多長。
語法:
str.substr(start [, length])
- 參數 start 是一個數字表示要從哪個位置開始擷取,位置從 0 開始;如果 start 是一個負數則視為0;如果 start 大於字串長度,結果會返回空字串。
- 參數 length 是一個數字表示總共要取出幾個字元,預設取到字串結尾。
- 結果會返回一個新字串。
var str = 'abcdefghij';
// 輸出 'bc'
console.log(str.substr(1, 2));
// 輸出 'hi'
console.log(str.substr(-3, 2));
// 輸出 'hij'
console.log(str.substr(-3));
// 輸出 'bcdefghij'
console.log(str.substr(1));
// 輸出 'ab'
console.log(str.substr(-20, 2));
// 輸出空字串 ''
console.log(str.substr(20, 2));
substring()
跟 substr(), slice() 相似用來切割字串,可以從一段字串中擷取其中的一段,差異在於 substring() 的兩個參數都不能傳入負數。
語法:
str.substring(indexStart[, indexEnd])
substring() 用來擷取兩個索引位置之間的字串,索引位置從 0 開始。
- 參數 indexStart 是一個數字表示要從哪個位置開始擷取
- 參數 indexEnd 是一個數字表示要擷取到哪個位置之前為止,預設取到字串結尾
- 結果會返回一個新字串
substring() 還有一個特別的地方在於,如果 indexStart 比 indexEnd 還大時,效果就像這兩個參數位置互換一樣。例如:str.substring(1, 0) === str.substring(0, 1)。
var str = 'fooish.com';
// 輸出 'foo'
console.log(str.substring(0, 3));
console.log(str.substring(3, 0));
// 輸出 'sh.'
console.log(str.substring(4, 7));
console.log(str.substring(7, 4));
// 輸出 fooish
console.log(str.substring(0, 6));
// 輸出 'fooish.com'
console.log(str.substring(0, 10));
console.log(str.substring(0, 20));
console.log(str.substring(100, 0));
toLowerCase()
用來將字串中的英文字母都轉成小寫。
// 輸出 'apple'
console.log('APPLE'.toLowerCase());
toUpperCase()
將字串中的英文字母都轉成大寫。
// 輸出 'APPLE'
console.log('apple'.toUpperCase());
模版字串/Template literals
模版字串係ES6所導入,目的是在字串中嵌入變數,此種用法類似Vue.js,在網頁中入內容變數。(Word也有類似的功能,一個文件中可以嵌入變數欄位,應用在像是郵寄標籤、表格列印等。)
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' andnnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
陣列/Arrays
語法:
陣列名稱[索引]
索引值由0開始,在Java/JavaScript/C#程式語言中,陣列本身就是一個物件,陣列有一個屬性值:length,表示陣列的個數(長度),最後一個元素的索引值為length-1。
陣列的功用是將同一型態的資料放置在一起,透過陣列的名稱與索引來存取陣列中的元素。例:
var fruit = [“Banana”, “Apple”, “Pear”];
其中fruit[0]=”Banana”,fruit[1]=”Apple”,fruit[2]=”Pear”。
索引的概念就像是英文書籍中的索引頁,透過關鍵字的索引值可以快速找到該關鍵字在書中出現的地方。
再舉一個班級裏所有的學生為例,如果一個班級有50位學生,我們若給予每一個學生一個變數,宣告並取名:
var student1, student2, student3,…,student50;
這樣的方式,若要存取所有的學生變數一次,就要寫50次的敘述:
student1=”Allen”; student2=”Alice”; …
這樣寫法會很讓人抓狂,個體數量少還能處理, 若個體數量超過100、1000、10000?為了解決這樣的問題,陣列就是我們最好的工具:
var student = [“Allen”, “Alice”, (後面省略)];
之後我們要走訪陣列,可以用for迴圈:
for(let i = 0; i < 49; i++) {
console.log(student[i]);
}
陣列的應用
週天的名稱轉換表格
var weekdayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
console.log(weekdayNames[ new Date().getDay() ] );
上面程式可以輸出今天是禮拜幾(英文)
每月的天數
var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var thisYear = new Date().getFullYear();
if (thisYear % 400 == 0 || (thisYear%100 !=0 && thisYear %4 == 0)) monthDays[1] = 29; //閏年判斷,是閏年的話,2月為29天
console.log( monthDays[ new Date().getMonth() ] );
上面的程式可以輸出這個月的天數。
陣列方法/Array Methods
concat()
結合多個陣列成為一個陣列
indexOf()
回傳一個元素在一個陣列中首次出現的位置(陣列可能包含相同的元素)
join()
將一個陣列的元素結合成一個字串,並傳回該字串的參考
lastIndexOf()
回傳一個元素在一個陣列中最後出現的位置(陣列可能包含相同的元素)
pop()
取出陣列中的最後一個元素(堆疊後進先出的概念)
push()
加入一個元素到陣列的後端
(堆疊後進先出的概念)
reverse()
反轉陣列的元素
shift()
取出陣列的第一個元素 (
串列先進先出的概念)
slice()
取出一個陣列中的部份元素成為一個新的陣列
sort()
以字母順序方式排序陣列中的元素
splice()
加入一個元素以指定的方式與位置
toString()
將元素轉成一個字串
unshift()
加入一個元素到一個陣列的前端
valueOf()
回傳指定物件的值
物件/Objects
var person = {
firstName:”John”,
lastName:”Doe”,
age:20,
nationality:”R.O.C.”
};
物件屬性與值
屬性/Property |
值/Value |
firstName |
Wells |
lastName |
Chen |
age |
20 |
nationality |
R.O.C. |
物件的new
傳統/標準的物件是新增一個物件,再指定物件的屬性與值。
Object是JavaScript所訂的一個最上層的物件類別(不管有沒有明確繼承Object類別),是所有類別最終的父類別,在OO的世界中表示”Everything is an object/萬物皆為物件”。
var person = new Object();
person.firstName = "Wells";
person.lastName = "Chen";
person.age = 20;
person.nationality= "R.O.C.";
物件參考
上例,person是指向一個Object的”參考”,就像是地圖上指向寶藏的真正位置,在我們的電腦裏,物件的位置就是物件在記憶體中0101位址值。
var x = person;
上面的敘述是新宣告一個參考變數x,指向person所指向的物件,也就是說目標物件有二個參考變數x與person所指向。
要注意的是,上面的敘述不是產生一個新的物件。也就是說,至始至終也就一個物件,物件可以被多個參考變數指向,就像人可以有多個名字、代號。