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

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

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

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

// output 輸出
5
15

解答：

function checkStringLength(str) {
  return str.length;
};
console.log(checkStringLength('Hello'));
console.log(checkStringLength('my name is Tom！'));

### 題目二：字串大小寫互換

// input 輸入
lowerCase("[e-mail]")
upperCase("hello, world")

// output 輸出
"[e-mail]"
"HELLO, WORLD"

解答：

function lowerCase(str) {
  return str.toLowerCase();
};

function upperCase(str) {
  return str.toUpperCase();
};
console.log(lowerCase('[e-mail]'));
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>

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

// input 輸入
trimString("    hi, mom!  ")
trimString(" [e-mail]  ")

// output 輸出
"hi, mom!"
"[e-mail]"

<br>

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

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

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

解答：

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>

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

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

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

解答：

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)

### 題目六：字串切割

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

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

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>

### 題目七：字串黏合

// input 輸入
concatString("我今天想來點", "六角冰咖啡")

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

### 題目八：顯示字串
請嘗試修改以下代碼，使其可正確運行 (留意單、雙引號)。
關鍵字：單引號、雙引號、反引號、樣板字串。

// To be edit 需修改代碼
console.log("'字串'是 JavaScript 中一種基礎且重要的"型別"，必須好好學習。")

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

### 題目九：擷取字串內容
創造一個函式用於擷取輸入字串的指定索引字元，如找不到，回傳 false 。

// input 輸入
const input = "Hello"
getCharacter(input, 1)
getCharacter(input, 3)
getCharacter(input, 10)

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

解答：

找變數中的字串裡面的某個字元。

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));

另解：

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>

### 題目十：反轉字串
創造一個函式用於反轉字串內文字的順序。

// input 輸入
stringReverser("hello")

// output 輸出
olleh

解答：

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)