# Day 7： JavaScript - 用類陣列方式處理字串

By [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake) · 2025-11-28

---

字串方法：`split`, `trim`
--------------------

*   `split`：根據指定的分隔符把字串切割成由子字串組成的陣列
    
*   `trim`：去掉字串起始與結尾處的空白字元（包括空格、tab、換行等）
    

展開運算子 `[...s]`
--------------

可用在把字串／陣列元素逐一拆開使用

*   用在字串效果接近 `split("")`（空字串分隔），但對中文和 emoji 處理更安全，因為編碼判斷邏輯稍有不同
    
    *   `split('')`：按 UTF-16 code unit 切，會把 emoji / 罕用漢字拆成兩個壞掉的字元
        
    *   `[...s]`：按 Unicode code point 切，能正確處理 emoji 和所有 Unicode 字元
        

    const s = 'A😂B';
    s.split('');   // ["A", "\uD83D", "\uDE02", "B"]  emoji 被拆壞
    [...s];        // ["A", "😂", "B"]  正確處理
    
    

*   用在陣列可以把陣列元素逐一當作參數輸入 function 使用
    

    const arr = [1, 2, 3];
    
    const arr2 = [...arr, 4];   // => [1, 2, 3, 4]
    Math.max(...arr);           // 等同 Math.max(1, 2, 3)
    
    const s = '哈囉';
    const chars = [...s];       // => ['哈', '囉']
    
    

陣列方法：every, some, filter, join, toString
----------------------------------------

針對陣列元素有很多個逐一處理元素值的方法，可省去大量 for loop，讓程式碼更好閱讀也更好維護

*   `every`：逐一檢查元素值是否符合判斷條件，回傳布林值，全部符合才回傳 `true`
    
*   `some`：逐一檢查元素值是否符合判斷條件，回傳布林值，只要有元素符合就回傳 `true`
    
*   `filter`：逐一檢查元素值和索引值是否符合判斷條件，回傳符合條件的元素值組成的陣列
    
*   `join`：把所有元素連接、合併成一個字串
    
*   `toString`：把元素值轉成以逗號分隔的字串
    

Vitest 方法：toBe, toEqual
-----------------------

目前理解： 比對陣列等物件的元素值時，要用 `toEqual` ，使用 `toBe` 屬於嚴格相等檢查（等同 `===`） 會常常報錯，因為不同物件對照的記憶體位置不同。`toEqual`

*   `toBe`：確認純值相等、物件參照位置相同
    
*   `toEqual`：可遞迴比對物件／陣列內容
    

**參考文件來源**：

*   [字串 - JavaScript - MDN Web Docs](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String)
    
*   [String.prototype.split() - MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/split)
    
*   [String.prototype.trim() - MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/trim)
    
*   [Array - JavaScript - MDN Web Docs](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array)
    
*   [Array.prototype.every() - MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
    
*   [Array.prototype.some() - MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
    
*   [Array.prototype.filter() - MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
    
*   [Array.prototype.join() - MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
    
*   [展开语法（...） - MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
    
*   [模板字符串（樣板字面值） - MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals)
    
*   [Strings and Unicode in JavaScript](https://delicious-insights.com/en/posts/js-strings-unicode/)
    
*   [JavaScript String Encoding Gotchas (emoji 等 Unicode 注意事項)](https://dev.to/mistval/beware-of-emoji-in-js-144o)
    
*   [Vitest 官方文件首頁](https://vitest.dev/)
    
*   [Test API Reference - Vitest](https://vitest.dev/api/)

---

*Originally published on [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/day-7)*