3.7 字串(String)

在 javascript/practice 資料夾下，建立 string.html 來練習。

字串：只要是被雙引號或單引號括起來的，都是字串格式。例："abc"、"1"、'中文'。

基本型式

除了宣告之外，也可以用 length 取得字串長度。

var my_str = "這是字串 english";

console.log(my_str);        // 這是字串 english
console.log(my_str.length); // 12

字元跳脫(Escape)

字串裡，還要用到雙引號或單引號，以下這是允許的。例：

var my_str = "這是字串 'english'";
console.log(my_str); // 這是字串 'english'

var my_str2 = '這是字串 "english"';
console.log(my_str2); // 這是字串 "english"

但這個呢？

var my_str = "這是字串 "english"";

在 console 中會看到語法錯誤：Uncaught SyntaxError: Unexpected identifier。

但如果真的希望那些符號能夠跳脫原來的功用形式，視為一般文字來看待，那我們就可以使用跳脫字元的符號( \ )，來將後面緊接著的字元視為一般文字。

例 1：

var my_str = "這是字串 \"english\"";
console.log(my_str); // 這是字串 "english"

例 2：將 \ 視為一般文字：

var my_str = "這是字串 \\ english";
console.log(my_str); // 這是字串 \ english

字串相關操作

indexOf()

回傳第一個遇到指定字串的位置，位置是從 0 開始，然後如果找不到，就回傳 -1：

var my_str = "這是字串 english, 這另個 english";
var pos1 = my_str.indexOf("english");
var pos2 = my_str.indexOf("這");
var pos3 = my_str.indexOf("測試");

console.log(pos1); // 5
console.log(pos2); // 0
console.log(pos3); // -1

lastIndexOf()

回傳最後一個遇到指定字串的位置，位置是從 0 開始，然後如果找不到，就回傳 -1：

var my_str = "這是字串 english, 這另個 english";
var pos1 = my_str.lastIndexOf("english");
var pos2 = my_str.lastIndexOf("這");
var pos3 = my_str.lastIndexOf("測試");

console.log(pos1); // 18
console.log(pos2); // 14
console.log(pos3); // -1

slice()

將一個字串，取得部份字串然後回傳，然後並不會影響原字串。另可帶的參數有以下兩個：

• 第 1 個參數：取的部份字串，位置從何處開始。

• 第 2 個參數：取得部份字串，取到何處結束。(但不包含最後一個)

var my_str = "蘋果, Banana, Kiwi";
var part_string = my_str.slice(4, 10);

console.log("原字串：" + my_str); // 原字串：蘋果, Banana, Kiwi
console.log("部份字串：" + part_string); // 部份字串：Banana

也可以只帶第 1 個參數就好，那就會直接取到最後：

var my_str = "蘋果, Banana, Kiwi";
var part_string = my_str.slice(4); // 只帶第1個參數

console.log("原字串：" + my_str); // 原字串：蘋果, Banana, Kiwi
console.log("部份字串：" + part_string); // 部份字串：Banana, Kiwi

可以帶負值，規則是從字串的最後面從 -1 開始算：

var my_str = "蘋果, Banana, Kiwi";
var part_string = my_str.slice(-12, -6);

console.log("原字串：" + my_str); // 原字串：蘋果, Banana, Kiwi
console.log("部份字串：" + part_string); // 部份字串：Banana

substring()

與 slice() 相同，差別在於 substring() 不能帶負值。例：

var my_str = "蘋果, Banana, Kiwi";
var part_string = my_str.substring(4, 10);

console.log("原字串：" + my_str); // 原字串：蘋果, Banana, Kiwi
console.log("部份字串：" + part_string); // 部份字串：Banana

同樣地，只帶第一個參數：

var my_str = "蘋果, Banana, Kiwi";
var part_string = my_str.substring(4); // 只帶第1個參數

console.log("原字串：" + my_str); // 原字串：蘋果, Banana, Kiwi
console.log("部份字串：" + part_string); // 部份字串：Banana, Kiwi

substr()

與 slice() 相同，差別在於 substr() 的第 2 個參數，指的是要取幾個字元，例：

var my_str = "蘋果, Banana, Kiwi";
var part_string = my_str.substr(4, 6);

console.log("原字串：" + my_str); // 原字串：蘋果, Banana, Kiwi
console.log("部份字串：" + part_string); // 部份字串：Banana

只帶第 1 個參數，同樣就是直接取到最後一個字元：

var my_str = "蘋果, Banana, Kiwi";
var part_string = my_str.substr(4); // 只帶第1個參數

console.log("原字串：" + my_str); // 原字串：蘋果, Banana, Kiwi
console.log("部份字串：" + part_string); // 部份字串：Banana, Kiwi

可帶入負值，從最後一個是 -1 開始數：

var my_str = "蘋果, Banana, Kiwi";
var part_string = my_str.substr(-4, 4);

console.log("原字串：" + my_str); // 原字串：蘋果, Banana, Kiwi
console.log("部份字串：" + part_string); // 部份字串：Kiwi

replace()

在某個字串中，找到「部份字串」，然後用「另一個字串」來「取代」。 不會影響原來的字串，而是會回傳新的字串。 只會取代第一個找到的，而且大小寫是視為不同的。例：

var my_str = "蘋果, Banana, Kiwi, Banana";
var new_string = my_str.replace("Banana", "watermelon");

console.log(my_str); // 蘋果, Banana, Kiwi, Banana
console.log(new_string); // 蘋果, watermelon, Kiwi, Banana

如果是以下(將第1個參數的 "Banana" 改成 "banana")，不會有任何取代發生，因為找不到 "banana"：

var my_str = "蘋果, Banana, Kiwi, Banana";
var new_string = my_str.replace("banana", "watermelon");

console.log(my_str); // 蘋果, Banana, Kiwi, Banana
console.log(new_string); // 蘋果, Banana, Kiwi, Banana

如何忽略大小寫：

改成用一種正式表達式的寫法，將 "banana" 改成 /banana/i，i 是 ignore (忽略)的意思。例：

var my_str = "蘋果, Banana, Kiwi, Banana";
var new_string = my_str.replace(/banana/i, "watermelon");

console.log(my_str); // 蘋果, Banana, Kiwi, Banana
console.log(new_string); // 蘋果, watermelon, Kiwi, Banana

如何指定全部都要取代：

一樣用正式表達式的寫法，將 "banana" 改成 /banana/g，g 是 global (全域)的意思。例(以下同時使用 i 和 g)：

var my_str = "蘋果, Banana, Kiwi, Banana";
var new_string = my_str.replace(/banana/ig, "watermelon");

console.log(my_str); // 蘋果, Banana, Kiwi, Banana
console.log(new_string); // 蘋果, watermelon, Kiwi, watermelon

toUpperCase()

小寫英文字變成大寫，不會影響到原字串，會回傳新字串。例：

var text1 = "Hello World!";
var text2 = text1.toUpperCase();

console.log(text1); // Hello World!
console.log(text2); // HELLO WORLD!

toLowerCase()

大寫英文字變成小寫，不會影響到原字串，會回傳新字串。例：

var text1 = "Hello World!";
var text2 = text1.toLowerCase();

console.log(text1); // Hello World!
console.log(text2); // hello world!

concat()

將多個字串做串接。同樣地，原字串並不會被影響，而是回傳新字串。

concat() 其實可以用 + 號會更方便。例：

var text1 = "Hello";
var text2 = "World";

var text3 = text1 + " " + text2; // 此方式較為常見
var text4 = text1.concat(" ", text2);

console.log(text3); // Hello World
console.log(text4); // Hello World

trim()

如果字串的左右兩側有空格的話，就移除。例：

var text1 = "     這是文字     ";
var text2 = text1.trim(); // 將左右的空格移除

console.log(text1); //      這是文字     
console.log(text2); // 這是文字

charAt()

回傳指定位置的文字，位置是從 0 開始。也不會影響原字串。例：

var str = "測試 HELLO WORLD";

console.log(str.charAt(1)); // 試
console.log(str.charAt(3)); // H
console.log(str); // 測試 HELLO WORLD

透過 split() 將字串轉陣列

後面我們會再認識到什麼是陣列。例：

var tags = "a,b,c,d,e";

var arr1 = tags.split("");
var arr2 = tags.split(",");

console.log(arr1); // ["a", ",", "b", ",", "c", ",", "d", ",", "e"]
console.log(arr2); // ["a", "b", "c", "d", "e"]