在 JavaScript 中將字串轉換為標題大小寫

JavaScript 提供字串方法 toLowerCase() 和 toUpperCase()，但沒有內建的 capitalize() 方法可將整個句子轉換成標題大小寫。本指南所說的標題大小寫，是先將輸入內容轉成小寫，再將以一般空格分隔的每個單字首字元轉成大寫。這種實用做法適合簡單的英文文字，但並非通用的標題大小寫規則。

範例會使用 split() 建立單字陣列、變更每個單字的首字元，再用 join() 重組字串。迴圈和 map() 範例會使用 charAt() 取得首字元，並以 slice() 取得其餘部分。三個獨立範例都已成功執行；每個範例後方都有可選取的主控台輸出文字。

在 JavaScript 中使用 for 迴圈將字串轉換成標題大小寫

迴圈版本會明確呈現每個步驟。首先，toLowerCase() 會將字母統一轉成小寫，而 split(' ') 會依一般空格分割字串並建立陣列。接著，迴圈會將陣列中的每個元素替換成首字元的大寫形式與單字其餘部分。最後，join(' ') 會將單字組合回一個字串。split() 是用來建立陣列的字串操作。

執行這個範例：

程式碼中的函式名稱、字串及主控台輸出均依照原例保留英文。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

function titleCase(str) {
  const words = str.toLowerCase().split(' ');
  for (let i = 0; i < words.length; i++) {
    words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
  }
  return words.join(' ');
}

console.log(titleCase('hello pumpkin pumpkin you my hello honey bunny!'));

Hello Pumpkin Pumpkin You My Hello Honey Bunny!

如果你想在迴圈中加入逐字處理的邏輯，例如略過特定單字，或依照單字位置套用規則，這種做法就很實用。

在 JavaScript 中使用 map() 方法將字串轉換成標題大小寫

map() 會對陣列中的每個項目執行回呼函式，並回傳一個包含回呼結果的新陣列。此處的處理方式與迴圈相同，會轉換每個單字的首字元，同時保留原本的分割陣列。接著，join(' ') 會將轉換後的單字組合起來。

執行這個範例：

程式碼中的函式名稱、字串及主控台輸出均依照原例保留英文。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

function titleCase(str) {
  return str.toLowerCase()
    .split(' ')
    .map(function (word) {
      return word.charAt(0).toUpperCase() + word.slice(1);
    })
    .join(' ');
}

console.log(titleCase('you gone MAD?'));

You Gone Mad?

如果逐一轉換每個單字的寫法讀起來更清楚，可以選用這個版本。由於 map() 會回傳陣列，最後要保留 join(' ')，才能得到字串而非陣列。

在 JavaScript 中使用 replace() 方法將字串轉換成標題大小寫

你也可以使用 replace()，將分割後每個單字的首字元轉成大寫。下方的正規表示式會比對單字開頭的一個字元；回呼函式會轉換該字元，而空字串不會有符合項目，因此會維持空白。周圍的分割與組合步驟和其他範例相同。

執行這個範例：

程式碼中的函式名稱、字串及主控台輸出均依照原例保留英文。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

function titleCase(str) {
  return str.toLowerCase()
    .split(' ')
    .map(function (word) {
      return word.replace(/^([\s\S])/, function (first) {
        return first.toUpperCase();
      });
    })
    .join(' ');
}

console.log(titleCase("i'm just appreciating hoho!"));

I'm Just Appreciating Hoho!

這個版本會在 replace() 的回呼函式中處理首字元。它仍會逐一處理每個單字，因此在這種實作中，replace() 不能取代 split() 和 join()。

選擇適合的做法並了解其限制

如果你希望日後能輕易在轉換步驟中加入條件，請使用 for 迴圈。map() 適合用來簡潔地逐字轉換，並回傳新陣列。replace() 則提供另一種變更首字元的方式；不過，相較之下，charAt() 和 slice() 可能更容易閱讀，因為這種寫法多用了正規表示式。根據目前可用的證據，沒有哪一種做法本質上更快；請選擇最能清楚表達所需規則的寫法。

這些範例只會依照一般空格字元分割字串，不會處理所有類型的空白字元。輸入中的定位字元或換行字元仍會留在單字內，而連續空格會產生空陣列元素；範例中的轉換會讓這些空元素維持空白，join(' ') 也會保留連續空格。如果輸入可能包含多種空白字元，請先使用適合的空白規則來正規化或分割字串，並決定是否要保留重複空格。

這些範例會將每個以空格分隔片段的首字元轉成大寫，並不會套用各種語言的標題大小寫慣例。標點符號會保留原位，因此單字內的撇號不會被視為新的單字邊界。某些文字系統和姓名的大小寫轉換可能需要依據語系或語言套用規則。請按照資料調整單字邊界和大小寫處理方式，不要假設這種簡單轉換適用於所有語言或顯示名稱。