---
# System prepended metadata

title: JS直播班練習 - 字串處理
tags: [四則運算]

---

---
title: JS直播班練習 - 字串處理
tags: 四則運算,
description:
---
字串處理
===

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

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

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

// output 輸出
5
15
```
解答：
```javascript=
function checkStringLength(str) {
  return str.length;
};
console.log(checkStringLength('Hello'));
console.log(checkStringLength('my name is Tom！'));
```
### 題目二：字串大小寫互換
``` =JavaScript
// input 輸入
lowerCase("FOKFF@gmail.com")
upperCase("hello, world")

// output 輸出
"fokff@gmail.com"
"HELLO, WORLD"
```
解答：
```javascript=
function lowerCase(str) {
  return str.toLowerCase();
};

function upperCase(str) {
  return str.toUpperCase();
};
console.log(lowerCase('FOKFF@gmail.com'));
console.log(upperCase('hello, world'));
```
#### 延伸閱讀
- [String.prototype.toLowerCase()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
- [String.prototype.toUpperCase()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase)
<br>

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

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

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

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

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

// output 輸出
"HelloWorld"
"你好美麗的世界"
```
解答：
```javascript=
function removeAllSpaceString(str) {
    // 以空白字元來切割字串
  return str.split(' ').join('');
};
console.log(removeAllSpaceString('Hello World'));
console.log(removeAllSpaceString('你好     美麗的     世界'));
```
#### 延伸閱讀
- [String.prototype.split()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split)
<br>

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

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

// output 輸出
A,B,C
[1,2,3]
```
解答： 
```javascript=
function stringArraySwitcher(content) {
  return typeof content === 'object' ? content.toString() : content.split(',').map(value => +value);
};
console.log(stringArraySwitcher(['A', 'B', 'C']));    // A,B,C
console.log(stringArraySwitcher('1,2,3'));    // [1,2,3]
```
#### 延伸閱讀
- [Array.prototype.map()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map)


### 題目六：字串切割

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

// output 輸出
"前鎮區"
"新興區"
```
```javascript=
function getArea(str) {
  // 從第四個字元開始保留字串，到第六個字元（前一個）為止
  return str.slice(3, 5);
};
console.log(getArea('高雄市前鎮區一心二路33號'));    // 前鎮區
console.log(getArea('高雄市新興區新興路66號'));    // 新興區
```
#### 延伸閱讀
- [String.prototype.slice()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice)
<br>

### 題目七：字串黏合
``` =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
```
解答：

找變數中的字串裡面的某個字元。
```變數[index]```
```javascript=
const input = "Hello";
function getCharacter(input, order) {
  return order > 0 && order <= input.length ? input[order - 1] : `false`;
};
console.log(getCharacter(input, 1));
console.log(getCharacter(input, 3));
console.log(getCharacter(input, 6));
console.log(getCharacter(input, 10));
```
另解：
```javascript=
const input = "Hello";
function getCharacter(str, index) {
   return input[index - 1] ? input.charAt(index - 1) : false;
}
```
#### 延伸閱讀
- [String.prototype.charAt()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/charAt)
<br>

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

// output 輸出
olleh
```
解答：
```javascript=
function stringReverser(str) {
  return str.split('').reverse().join('');
};
console.log(stringReverser('hello'));   //olleh
```
#### 延伸閱讀
- [Array.prototype.reverse()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
- [Array.prototype.join()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
