JavaScript 字串處理實用方法

1. .length

  • 功能：計算字串的 字元數（包含空白、標點符號）。
  • 語法：字串變數.length
1
2
3
let a = "Hello World!";
console.log(a.length); // 12

📌 注意：空白也算在長度內。

JS 字串長度（length）筆記

1️⃣ 基本概念

  • length 屬性回傳 字串中 UTF-16 code unit 的數量。
  • 英文、數字、符號通常每個字元佔 1。
  • 中文漢字通常每個字元佔 1。
  • Emoji 或特殊符號可能佔 2 個 code unit。

2️⃣ 範例與圖示

範例 1：英文 + 符號

1
2
3
let a = '5fjooooelkg;v';
console.log(a.length); // 13

圖示：

1
2
3
字元: 5 f j o o o o e l k g ; v
長度: 1 1 1 1 1 1 1 1 1 1 1 1 1 → 總長度 13

範例 2：中文 + 標點

1
2
3
let b = '你好嗎?阿凱';
console.log(b.length); // 6

圖示：

1
2
3
字元: 你 好 嗎 ? 阿 凱
長度: 1 1 1 1 1 1 → 總長度 6

範例 3：包含前後空白

1
2
3
let c = '  KKbox  ';
console.log(c.length); // 9

圖示：

1
2
3
4
字元: ␣ ␣ K K b o x ␣ ␣
長度: 1 1 1 1 1 1 1 1 1 → 總長度 9
(␣ 表示空白)

範例 4：emoji + 中文（精確計算）

1
2
3
let d = '😀你好';
console.log([...d].length); // 3

圖示：

1
2
3
4
字元: 😀 你 好
UTF-16 code unit: 2 1 1
使用 [...str].length → 正確算作 3

3️⃣ 小結

  • length = UTF-16 code unit 數量，不完全等於「可見字元數」。
  • 空白、符號、中文通常沒問題，但 emoji 可能要額外處理。
  • 想要精確「字元數」用 [...str].length。

2. .trim()

  • 功能：移除字串 開頭與結尾的空白（中間的空白不會去掉）。
  • 語法：字串變數.trim()
1
2
3
4
5
6
7
let yourname = " Alice ";
console.log(yourname.length); // 7 (包含前後空白)

let trimmed = yourname.trim();
console.log(trimmed);         // "Alice"
console.log(trimmed.length);  // 5

3. 在 Console 中測試

  • 在 Chrome 開發者工具 Console 直接輸入並執行，可立即看到結果。
  • 範例：
1
2
3
4
let text = " 測試字串 ";
text.length; // 顯示 6
text.trim(); // 顯示 "測試字串"

✅ 小結

  • length → 查字元數（包含空白）。
  • trim() → 去掉開頭與結尾的空白。
  • 這些方法可以直接在 Console 執行，方便測試。

1️⃣ 字串長度 .length

1
2
3
let str = "Hello";
console.log(str.length); // 5

  • .length 會計算字串中所有字元（包括空白、符號）。
  • 空白也會算在長度裡。

🏋️ 小練習

  • 建立一個字串 " JavaScript "，列印它的長度。
  • 用 .trim() 去掉空白後，再列印長度。

2️⃣ 字串前後空白 .trim()

範例

1
2
3
4
5
6
7
let yourname = " Alice ";
console.log(yourname.length); // 7 (包含前後空白)

let trimmed = yourname.trim();
console.log(trimmed);         // "Alice"
console.log(trimmed.length);  // 5

說明

  • .trim()：去掉字串 前後空白（空格、tab、換行）。
  • 不會改變字串中間的空白。
  • 適合清理使用者輸入，避免帳號或密碼比對錯誤。

🏋️ 小練習

  • 建立一個變數 password = " 12345 "，用 .trim() 清理前後空白，並列印結果。

3️⃣ 左右空白分別處理

1
2
3
4
let str = "  Hello  ";
console.log(str.trimStart()); // "Hello  " → 去掉左邊空白
console.log(str.trimEnd());   // "  Hello" → 去掉右邊空白

🏋️ 小練習

  • 用 trimStart() 和 trimEnd() 對 " test " 試驗，觀察結果。

4️⃣ 實務應用

  • 帳號 / 密碼輸入驗證
  • 表單欄位輸入清理
  • 儲存資料前去除多餘空白，確保資料一致性
  • 避免使用者誤輸入前後空白造成錯誤

5️⃣ 小技巧

  • 搭配 .toLowerCase() 或 .toUpperCase() 做統一格式化：
1
2
3
4
let username = " Alice ";
let cleanUsername = username.trim().toLowerCase();
console.log(cleanUsername); // "alice"

  • 避免大小寫或空白造成比對失敗。

🏋️ 小練習

  • 建立字串 " JSrocks "，用 .trim().toUpperCase() 清理並轉大寫。
  • 預期輸出為 "JSROCKS"。

1️⃣ 字串長度 .length

1
2
3
let str = "Hello";
console.log(str.length); // 5

  • .length 計算所有字元（包含空白、符號）。

🏋️ 練習區

題目 正確答案
建立 " JavaScript "，列印長度 14
去掉前後空白再列印長度 10

2️⃣ 字串前後空白 .trim()

1
2
3
4
5
6
let yourname = " Alice ";
console.log(yourname.length); // 7
let trimmed = yourname.trim();
console.log(trimmed);         // "Alice"
console.log(trimmed.length);  // 5

🏋️ 練習區

題目 正確答案
password = " 12345 "，用 .trim() 清理 “12345”
.trim() 後長度 5

3️⃣ 左右空白分別處理

1
2
3
4
let str = "  Hello  ";
console.log(str.trimStart()); // "Hello  "
console.log(str.trimEnd());   // "  Hello"

🏋️ 練習區

題目 正確答案
" test " 用 .trimStart() “test “
" test " 用 .trimEnd() “ test”

4️⃣ 小技巧

1
2
3
4
let username = " Alice ";
let cleanUsername = username.trim().toLowerCase();
console.log(cleanUsername); // "alice"

🏋️ 練習區

題目 正確答案
" JSrocks " 用 .trim().toUpperCase() “JSROCKS”