---
# System prepended metadata

title: 字串處理
tags: [JS 直播班 - 2023 秋季班]

---

---
tags: JS 直播班 - 2023 秋季班
---

>若有任何疑問請至 Discord「作業討論」頻道討論

# 字串處理

## 本章節我們要學什麼？
學習練習基礎常見的字串處理方法。

### 提示
如沒有概念可以引用哪些方法來達成這次題目的目的，可以試試看……
1. 閱讀、搜尋文檔：[JavaScript 字符串方法](https://www.w3school.com.cn/js/js_string_methods.asp)、[Mozilla MDN String](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String)。
2. 在本文件最下方參考同學們的解答。

### 題目一：字串取長度

``` =JavaScrip
// input 輸入
checkStringLength("Hello")
checkStringLength("my name is Tom！")

// output 輸出
5
15
```
### 題目二：字串大小寫互換
``` =JavaScript
// input 輸入
lowerCase("FOKFF@gmail.com")
upperCase("hello, world")

// output 輸出
"fokff@gmail.com"
"HELLO, WORLD"
```

### 題目三：字串去左右空白

``` =JavaScript
// input 輸入
trimString("    hi, mom!  ")
trimString(" aa@gmail.com  ")

// output 輸出
"hi, mom!"
"aa@gmail.com"
```

### 題目四：字串去任何空白

``` =JavaScript
// input 輸入
removeAllSpaceString("Hello World")
removeAllSpaceString("你好     美麗的     世界")

// output 輸出
"HelloWorld"
"你好美麗的世界"
```


### 題目五：字串陣列互換

``` =JavaScript
// input 輸入
stringArraySwitcher(['A', 'B', 'C'])
stringArraySwitcher('1,2,3')

// output 輸出
A,B,C
[1,2,3]
```



### 題目六：字串切割

``` =JavaScript
// input 輸入
getArea("高雄市前鎮區一心二路33號");
getArea("高雄市新興區新興路66號");

// output 輸出
"前鎮區"
"新興區"
```

### 題目七：字串黏合
``` =JavaScript
// input 輸入
concatString("我今天想來點", "六角冰咖啡")

// output 輸出
"我今天想來點六角冰咖啡"
```

### 題目八：顯示字串
請嘗試修改以下代碼，使其可正確運行 (留意單、雙引號)。
關鍵字：單引號、雙引號、反引號、樣板字串。
``` =JavaScript
// To be edit 需修改代碼
console.log("'字串'是 JavaScript 中一種基礎且重要的"型別"，必須好好學習。")

// output 輸出
'字串'是 JavaScript 中一種基礎且重要的"型別"，必須好好學習。

```

### 題目九：擷取字串內容
創造一個函式用於擷取輸入字串的指定索引字元，如找不到，回傳 false 。
``` =JavaScript
// input 輸入
const input = "Hello"
getCharacter(input, 1)
getCharacter(input, 3)
getCharacter(input, 10)

// output 輸出
"H"
"l"
false
```



### 題目十：反轉字串
創造一個函式用於反轉字串內文字的順序。
``` =JavaScript
// input 輸入
stringReverser("hello")

// output 輸出
olleh
```







## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
https://codepen.io/jmimiding4104/pen/XWoVmqq
這邊解答可能不都是最佳的解法，
適合初學者或者該題突然卡住者，
內容程式碼有針對內容進一步註解可供參考。
-->


## 作業提交等級

* LV1：解出 10 題，並提交 Codepen
* LV2：設計一個 hackmd，嘗試自己設計 10 題
* LV3：嘗試去做其他學生寫的題目，並 tag 學員回報給他，感謝他的命題，讓自己觀念更好

回報區
---

<!-- 參考答案： 
https://codepen.io/jmimiding4104/pen/XWoVmqq?editors=1012
答案僅供參考，
答案會使用各種方式書寫(非最佳化)並加上部分解說，
適合初學者還不太會解題或者是該題卡住的同學。
-->

| Discord | LV1 答案 |LV2 自行設計題目 | LV3 做其他學員設計的題目 |
|:-------:|:-------:|:-------------:|:---------------------:|
| ShangChu | [Codepen](https://codepen.io/shangchu0412/pen/JjwqBYd?editors=0011) |||
| 阿榮 |[Codepen](https://codepen.io/codeitaday/pen/RwEmJzo?editors=0011)|||
| 詹姆士 |[Codepen](https://codepen.io/z111048/pen/YzdbjQV)|||
| xiaokui_71292 |[Codepen](https://codepen.io/pen?template=LYMoBJW)|||
| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/RwEmBVZ?editors=0011) |||
| Ching | [CodePen](https://codepen.io/tzuchingg/pen/LYMoBXy?editors=0012) |[HackMD](https://hackmd.io/3rjm4iDGQ5SX81UnVxRGyA?view)||
| Fabio20 | [CodePen]([網址](https://codepen.io/fabio7621/pen/rNogrxE)) |||
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/poqmZZX?editors=0012) |||
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/dywEjdW) |||
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/yLGWxbO?editors=0010) |||
| yuan! | [CodePen](https://codepen.io/townyuan/pen/KKbLBQY) |||
| 楓仔 | [CodePen](https://codepen.io/maplestartend/pen/mdaYGLo?editors=0012) |||
| PayRoom |[CodePen](https://codepen.io/water38198/pen/QWzobVY)|||
|Moreene|[CodePen](https://codepen.io/Moreene/pen/dywEqEa)|
|runweiting|[CodePen](https://codepen.io/weiting14/pen/dywEKxG)|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/dywEjYX?editors=1111)|
|Winnie|[CodePen](https://codepen.io/codepen-io-winnie/pen/JjwqBxW?editors=0011)|
|保羅|[CodePen](https://codepen.io/paul-1997/pen/ZEVNwxj?editors=0011)|
|Ataraxia|[CodePen](https://codepen.io/ataraxia8888/pen/wvRbNyJ)|
| ann6212 | [CodePen]([網址](https://codepen.io/yqmegupa-the-styleful/pen/PoXvVdW?editors=1012)) |||
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/VwqOEKJ?editors=1111)|||
| SHUO| [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/XWowowV?editors=1111) |||
| jiayu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/LYMoKPV?editors=0011) |||
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/oNJRrBL) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/xxmNoWV?editors=1010) |||
| Jun_ | [CodePen](https://codepen.io/Jun-L/pen/JjwqVQB) |||
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/NWeVZee) |||
| 銀光菇 |[CodePen](https://codepen.io/genesynthesis/pen/XWowvWK)|
| MY |[CodePen](https://codepen.io/ahmomoz/pen/VwqOOOe)
| smalljie | [CodePen](https://codepen.io/smalljie/pen/bGOyPQQ) |||
| shiro | [CodePen](https://codepen.io/chenghsienwang/pen/eYbwYpX) |||
| gebyman | [CodePen](https://codepen.io/gebyman/pen/JjwQjNY?editors=0011) |||
| MDFK | [CodePen](https://codepen.io/maywang/pen/XWowYPO?editors=0012) |[HackMD](https://hackmd.io/@gpwzoBhzQVK9uS394vzV_Q/B1Qguuj-p)|[感謝Ching出題](https://codepen.io/maywang/pen/dywBJyz)|
| ming0712 | [CodePen](https://codepen.io/StevenHuang/pen/MWZdzgZ?editors=0011) |||
| hsu0921 | [CodePen](https://codepen.io/HSUANIN0327/pen/ExGzGqL) |||
| 小廷 | [CodePen](https://codepen.io/uyxkiake-the-selector/pen/xxmoqwq?editors=1011) |||
| Peng | [CodePen](https://codepen.io/H-Peng/pen/oNJrBMB?editors=0010) ||感謝Ching出題 [CodePen](https://codepen.io/H-Peng/pen/eYbqOZE?editors=0010)|
| Dora | [CodePen](https://codepen.io/dorayu/pen/KKbLjOO?editors=1011) |||
| RX00 | [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/vYvqyvN?editors=0011) |||
| shcopy | [CodePen]([網址](https://codepen.io/shcopy/pen/GRPbrNm)) |||
| 蛋塔 | [CodePen](https://codepen.io/Hong-Game1/pen/XWoLadK) |||
| MKL | [CodePen](https://codepen.io/Code-My/pen/BaveMdQ) |||
| phyllis_0802 | [CodePen](https://codepen.io/Phyllis-Cheng/pen/wvRLgop) |||
| 奔跑吧(GTR150) | [CodePen](https://codepen.io/Wer-Qwe/pen/NWeVJRz?editors=1111) |||
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/MWZdPOG) |||
| Peggy | [CodePen](https://codepen.io/peggylai/pen/yLGdoYL?editors=1011) |||
| Aritan | [CodePen](https://codepen.io/Aritan/pen/poqMjBY) |||
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/jOXoRBE) |||
| jslong | [CodePen](https://codepen.io/Emillo/pen/eYbwrxv?editors=0011) |||
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/XWowPpM?editors=0011) |||
| yaoling.liang |[CodePen](https://codepen.io/Yao-Ling-L-/pen/eYbqNBG?editors=1111)|||
| zona |[CodePen](https://codepen.io/w242920/pen/gOZVQmL?editors=1111)|||
| noah |[CodePen](https://codepen.io/lch1222/pen/zYyVaLm?editors=0010)|||
| minnielin | [CodePen]([網址](https://codepen.io/ShengXin-Lin/pen/yLGmXZZ)) |||
| Ivan | [CodePen](https://codepen.io/swalok/pen/xxMKKey?editors=0012) |||
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/qBLzmyG) |||
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/Rwvbpbp) |||
| Oria | [CodePen](https://codepen.io/kajing/pen/MWLgEXm?editors=0011) |||
| ss585801 | [CodePen](https://codepen.io/ss585801/pen/zYeOYze?editors=0012) |||
| Suzi | [CodePen](https://codepen.io/midomommy/pen/abXoEgJ?editors=0012) |||
| Uli | [CodePen](https://codepen.io/uli1313/pen/NWoKQqY?editors=0011) |||
| Eden | [Codepen](https://codepen.io/iseden/pen/poGzMrG)|||
| shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/NWeZXqJ)|||
| JasonFu | [Codepen](https://codepen.io/jie-Fu/pen/NWeQBqj)|||
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/PoVYXXB)|
| 白夜 | [CodePen](https://codepen.io/Wei903/pen/abPeQEg?editors=1112)
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/OJdJPOv)
| Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/abPezyp) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/dyabYzy?editors=0011) |
| 郭芙蘭#6374 | [CodePen](https://codepen.io/flora_Kuo/pen/ZEwEKJO?editors=1011) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/GRzRmxz) |
| skylaaaa | [CodePen](https://codepen.io/chihyu2790/pen/qBgBPWr) |
| Ivy      | [CodePen](https://codepen.io/Irene-Ke/pen/poGoPRv?editors=0010) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/WNPNYgj) |||
| Kouta | [CodePen](https://codepen.io/kouta-f2e/pen/BaMyYbE) |
| Lainie | [CodePen](https://codepen.io/Lainie88/pen/WNLBKam?editors=0012) |
| damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/dyaovEM?editors=0012) |
| ricktsaiii | [CodePen](https://codepen.io/ricktsaiii/pen/JjxYdqE) |
| Andy | [CodePen](https://codepen.io/andy31342/pen/MWLKZOo?editors=0010) |
| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/NWoKwXv) |||
| xuan | [CodePen](https://codepen.io/xuan0915/pen/KKJzOwP?editors=0012) |||
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/BaMLPEY) |||
| 維哲 | [CodePen](https://codepen.io/kwz1202/pen/PoVjYbO) |||
| yuling | [CodePen](https://codepen.io/igzdflpu/pen/vYbZdPe) |||
| lychee_kk | [CodePen](https://codepen.io/kakakala/pen/ZEwXRJR?editors=1112) |||
| kawa | [CodePen](https://codepen.io/z83xji6/pen/WNPOLer) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/mdvGOqW?editors=0011) |||
 <!-- 快速複製
| 名稱 | [CodePen](網址) |||
-->