---
# System prepended metadata

title: JavaScript 語法筆記：顛倒字串 split()、reverse()、join()

---

# JavaScript 語法筆記：顛倒字串 split()、reverse()、join()

一開始學習 JavaScript 的語法時，總會不知道要在什麼情況下使用。在課程中雖然都懂得如何運用，但如果沒有真正融會貫通，下次碰到題目時也不知道原來有這些方法可以用。這次藉由「顛倒字串」這個題目，也就是當我輸入 "Apple" 時，電腦要回應我 "elppA" ，來加強之前學到的陣列及字串處理語法。這邊介紹可以達成這道題目的兩種方法：

## 1. 使用 split()、reverse()、join()
首先，先來認識這些語法的使用方式。每一個語法名稱的第一個單字代表他是處理什麼的意思。String 就是處理字串的語法；而 Array 就是處理陣列的語法。使用上要注意不要將用在陣列的語法放到字串上囉！

### String.prototype.split()
split() 可以**將字串轉為陣列**，在 () 中以一個指定的分割方式來決定分割的位置。例如，在括號的引號 '' 中沒有輸入任何字符（包括空格），就會以「每一個字串每一個字串」的**陣列**回傳。

```javascript=
const splitted = "Apple is very delicious".split('')
console.log(splitted) 
// [
  'A', 'p', 'p', 'l', 'e',
  ' ', 'i', 's', ' ', 'v',
  'e', 'r', 'y', ' ', 'd',
  'e', 'l', 'i', 'c', 'i',
  'o', 'u', 's'
]
```

那如果在引號中加入空格呢？

```javascript=
const splitted = "Apple is very delicious".split(' ')
console.log(splitted) // [ 'Apple', 'is', 'very', 'delicious' ]
```

神奇的事發生了！JavaScript 引擎會幫我們用空格來當分割點，回傳給我們一個一個的單字**陣列**。

### Array.prototype.reverse()
顧名思義就是將**陣列反轉，最後一個元素變成第一個**。讓我們用剛剛的例子來看看：

```javascript=
const splitted = "Apple is very delicious".split(' ').reverse()
console.log(splitted) // [ 'delicious', 'very', 'is', 'Apple' ]
```

如果只有一個單字的時候，記得在 split('') 的引號中不要放入空格喔，這樣才能將每一個字母倒轉。

```javascript=
const splitted = "Apple".split('').reverse()
console.log(splitted) // [ 'e', 'l', 'p', 'p', 'A' ]
```
是不是越來越接近我們要的感覺了？

### Array.prototype.join()

與 split() 相反，join() 能將**陣列轉成字串**。而括號內的規則也是相同的。來看看例子吧：

```javascript=
const splitted = "Apple".split('').reverse().join('')
console.log(splitted) // elppA
```

我們成功完成題目了，把它寫成一個可以一直使用的函式吧。

```javascript=
function reverseString(str) {
    return str.split('').reverse().join('')
}
```
句子也可以使用喔，自己試試看吧！

## 2. 使用 for 迴圈

第二種方式就簡單多了，用 for 迴圈讓它倒著跑回去就可以。

```javascript=
function reverseString(str) {
  let reversed = ''
  for (let i = str.length -1; i >= 0; i--){
    reversed += str[i]
  }
  return reversed
}
```

## 結語

一道看起來不怎麼起眼的題目也可以學到很多，尤其是陣列與字串互相轉換的語法在實作上會滿常使用到的。至於把字串顛倒要用在什麼情況呢？總會有那個時候的吧😂