---
# System prepended metadata

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

---


# 字串處理

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

## 本章節我們要學什麼？
學習基礎常見的字串處理方法。
部分題目下方附有 keywords，表示該題目運用到課堂外的語法或技巧，同學可依照 keywords 搜尋了解概念。

### 提示
如果不知道要引用哪些方法來完成題目，可以試試看……
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"
```
✨keywords： toLowerCase()、toUpperCase()

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

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

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

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

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

// output 輸出
"HelloWorld"
"你好美麗的世界"
```
✨keywords：split()、join()

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

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

// output 輸出
"A,B,C"
[1,2,3]
```
✨keywords：Array.isArray()


### 題目六：字串切割

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

// output 輸出
"前鎮區"
"新興區"
```
✨keywords：slice()

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

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

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

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

```
✨keywords：樣板字面值

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

// output 輸出
"H"
"l"
false
```
✨keywords：string.length


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

// output 輸出
olleh
```
✨keywords：reverse()

## 回報流程

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

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

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


## 作業提交等級

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


## 回報區


|     Discord      |                                   LV1 答案                                   |                    LV2 自行設計題目                     |                           LV3 做其他學員設計的題目                           |
|:----------------:|:----------------------------------------------------------------------------:|:-------------------------------------------------------:|:----------------------------------------------------------------------------:|
| voke | [Codepen](https://codepen.io/FiSi-the-lessful/pen/vYoKWqx) | [金字塔建築師](https://hackmd.io/@tscZKz0FSGa3PpVc74W0cA/BJqv7GeyJg) | [a1phaki(小k)的題目](https://codepen.io/FiSi-the-lessful/pen/MWNjmEb) |
| 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/oNKLQwv?editors=0011) |  |  |
|a1phaki(小k)|[Codepen](https://codepen.io/a1phaki/pen/oNKLJXz?editors=1011) |[字串處理題目](https://hackmd.io/@EP4-XOR_SmCIo0G4bIbglA/HJpf4ZIJ1g) |[voke的金字塔魔術師](https://codepen.io/a1phaki/pen/ExqyrZw?editors=1011) |
|Tatsu|[Codepen](https://codepen.io/chindesu0207/pen/mdNEQWP) | |[voke的題目](https://codepen.io/chindesu0207/pen/XWvKGWY)|
|Jainee|[Codepen](https://codepen.io/Jainee0110/pen/eYqzxZg) | | |
|xcx100|[Codepen](https://codepen.io/c13026/pen/MWNeZXY?editors=0012) | [字串處理題目](https://hackmd.io/C0awDMRSRUqmpUdU_e5zaA?view) | |
|陳睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/xxvOoob?editors=0011)|||
|GTR150|[CodePen](https://codepen.io/Wer-Qwe/pen/eYqzwKb?editors=1012)|||
|ycl325.etheddie|[CodePen](https://codepen.io/wdvikfuz-the-selector/pen/zYgBgeK)|||
|yuling|[CodePen](https://codepen.io/yu-ling-peng/pen/Exqgadg?editors=0011)|||
|Ellie|[CodePen](https://codepen.io/Ellie-Chiang/pen/KKOMYzJ)|||
|ab567ab5|[CodePen](https://codepen.io/WanTzu-Chiang/pen/mdNEgLx?editors=0011)|||
|leoli35|[CodePen](https://codepen.io/ziku10121/pen/oNKzBWr)|||
|ABOOS|[CodePen](https://codepen.io/guhungyin/pen/ExqyJWV?editors=0012)|||
|GTR150|[CodePen](https://codepen.io/Wer-Qwe/pen/XWvjVqb)|||
|Sonia|[CodePen](https://codepen.io/YUJOU/pen/dyxpeqR?editors=0011)|||
|tim|[CodePen](https://codepen.io/jskrtivy-the-animator/pen/LYwZaPa)||[邵的字串處理題目](https://codepen.io/jskrtivy-the-animator/pen/zYgoQGv?editors=0011)|
|_kevinhuang|[CodePen](https://codepen.io/qw-huang/pen/dyxpzaV?editors=0012)|||
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/jOgMorN?editors=0010)| | |
| 倫倫 |[CodePen](https://codepen.io/f5badapple/pen/wvVzZPj?editors=0011)|||
|kaka_945|[CodePen](https://codepen.io/kay945/pen/RwXGXbG)|||
|Ariel|[CodePen](https://codepen.io/ariel0510/pen/yLmamJQ?editors=0012)|||
|是在哈囉|[CodePen](https://codepen.io/miyxdhem-the-solid/pen/rNXMJdw?editors=1111)|||
|邵|[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/dyxOzWM?editors=0011)|[命苦的老師](https://hackmd.io/Heo52RbOR-yY4uga573-Ew)||
|Dolce_墨|[Codepen](https://codepen.io/DolceTseng1026/pen/MWNjpJR)|||
|yuyeh_1212|[Codepen](https://codepen.io/yuyeh1212/pen/vYoyWVE)|||
|陳小廷|[Codepen](https://codepen.io/ting1124/pen/mdNOqPZ)|||
|蘑菇星星|[CodePen](https://codepen.io/brrrieon-the-vuer/pen/XWvNvZw?editors=0012)|||
|姜承|[CodePen](https://codepen.io/Troy0718/pen/NWQdgvx?editors=0010)|||
|xiaobeng1075|[CodePen](https://codepen.io/goodea/pen/oNKBpQb?editors=0011)|||
|chris|[CodePen](https://codepen.io/chris-chen-the-selector/pen/XWvpyge?editors=0012)|||
|brucelee0629|[CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/JjgEJme)|||
|Andy_12|[CodePen](https://codepen.io/lifann/pen/bGXqrgg?editors=0011)|||
| 毛巾 |[CodePen](https://codepen.io/bqdcjboa-the-solid/pen/xxvgaJK)|||
| Mike |[CodePen](https://codepen.io/mike2049/pen/GRVWxYa?editors=0011)|||
| haojing |[CodePen](https://codepen.io/hjxu/pen/BaXRYKd)|||
| xiang5141 |[CodePen](https://codepen.io/XIANG-XIANG/pen/xxvdgKR?editors=0011)|||
|Hailet|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/GRVvNRg?editors=0011)|||
| charlottelee849 |[CodePen](https://codepen.io/char849/pen/vYoeaOL)|||
| alec1203 |[CodePen](https://codepen.io/soloayaya/pen/zYgdpmp?editors=1112)|||
|ollie|[CodePen](https://codepen.io/daiyy97/pen/oNKoxJO?editors=0010)||[voke 金字塔建築師](https://codepen.io/daiyy97/pen/MWNOPaj?editors=0010)|
|Kaya|[CodePen](https://codepen.io/kayaribi/pen/eYqeGVe)|||
|Celine|[CodePen](https://codepen.io/szuning/pen/ZEgxmGB?editors=1011)|||
|Nocab Wang ( 培根 )|[CodePen](https://codepen.io/PeihanWang/pen/wvVQEeY?editors=0012)|
|mercury2508.|[CodePen](https://codepen.io/Mercury2508/pen/KKOJbyG)
|KOMATSU PEI|[CodePen](https://codepen.io/Komatsu2021/pen/yyBOmVb?editors=0012)|||
|Chun|[CodePen](https://codepen.io/Chun_debbie/pen/MYgjEvX?editors=0011)|||
|Nooooora|[CodePen](https://codepen.io/Nora-Ch/pen/RNrVwRd?editors=1010)|||
|suemma|[CodePen](https://codepen.io/suemma/pen/NPxagWL)|||