> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/javascript/ji-chu/3.7-zi-chuan.md).

# 3.7 字串(String)

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

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

## 基本型式

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

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

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

## 字元跳脫(Escape)

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

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

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

但這個呢？

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

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

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

例 1：

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

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

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

## 字串相關操作

### indexOf()

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

```javascript
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`：

```javascript
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 個參數：取得部份字串，取到何處結束。(但不包含最後一個)

```javascript
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 個參數就好，那就會直接取到最後：

```javascript
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 開始算：

```javascript
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()` 不能帶負值。例：

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

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

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

```javascript
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 個參數，指的是**要取幾個字元**，例：

```javascript
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 個參數，同樣就是直接取到最後一個字元：

```javascript
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` 開始數：

```javascript
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()

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

```javascript
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"：

```javascript
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 (忽略)的意思。例：

```javascript
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`**)：

```javascript
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()

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

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

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

### toLowerCase()

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

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

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

### concat()

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

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

```javascript
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()

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

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

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

### charAt()

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

```javascript
var str = "測試 HELLO WORLD";

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

## 透過 split() 將字串轉陣列

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

```javascript
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"]
```