有用的字串方法

既然我們已經瞭解了字串的基礎知識，現在讓我們更進一步，開始思考可以使用內建方法對字串進行哪些有用的操作，例如查詢文字字串的長度、連線和拆分字串、替換字串中的一個字元，以及更多。

預備知識	瞭解 HTML 和 CSS 基礎。瞭解字串基礎。
學習成果	使用 JavaScript 內建的常用屬性和方法進行字串操作。

作為物件的字串

在 JavaScript 中，大多數值都可以像物件一樣使用。例如，當你建立一個字串時，透過

const string = "This is my string";

儘管變數本身不是一個物件，但它仍然有大量的屬性和方法可用，因為它在訪問屬性時可以作為物件使用。你可以在 String 物件頁面中檢視頁面側面的列表，就能看到這一點！

現在，在你開始頭疼之前，別擔心！在你學習之旅的早期，你真的不需要了解其中的大多數。但有一些你可能會經常使用的，我們將在本文中介紹。

讓我們在瀏覽器開發者控制檯中輸入一些示例。

查詢字串的長度

這很容易——你使用 length 屬性。嘗試輸入以下行

const browserType = "mozilla";
browserType.length;

這應該返回數字 7，因為 "mozilla" 有 7 個字元長。這在很多方面都很有用；例如，你可能想查詢一系列名稱的長度，以便按長度順序顯示它們，或者讓使用者知道他們在表單欄位中輸入的使用者名稱過長，如果它超過了某個長度。

檢索特定字串字元

另外，你可以使用方括號表示法返回字串中的任何字元——這意味著你在變數名末尾包含方括號（[]）。在方括號內，你包含要返回的字元的數字，例如，要檢索第一個字母，你會這樣做

browserType[0];

記住：計算機從 0 開始計數，而不是 1！

要檢索任何字串的最後一個字元，我們可以使用以下行，將此技術與我們上面介紹的 length 屬性結合起來

browserType[browserType.length - 1];

字串 "mozilla" 的長度是 7，但由於計數從 0 開始，最後一個字元的位置是 6；使用 length-1 可以得到最後一個字元。

測試字串是否包含子字串

有時你會想查詢一個較小的字串是否存在於一個較大的字串中（我們通常說一個子字串是否存在於一個字串中）。這可以使用 includes() 方法來完成，它接受一個引數 —— 你要搜尋的子字串。

如果字串包含該子字串，它返回 true，否則返回 false。

const browserType = "mozilla";

if (browserType.includes("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

通常你會想知道一個字串是否以特定的子字串開頭或結尾。這是一個足夠常見的需求，因此有兩個特殊的方法可以做到這一點：startsWith() 和 endsWith()

const browserType = "mozilla";

if (browserType.startsWith("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

const browserType = "mozilla";

if (browserType.endsWith("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

查詢子字串在字串中的位置

你可以使用 indexOf() 方法查詢子字串在較大字串中的位置。此方法接受兩個引數 – 你要搜尋的子字串，以及一個可選引數，用於指定搜尋的起始點。

如果字串包含該子字串，indexOf() 返回該子字串第一次出現的索引。如果字串不包含該子字串，indexOf() 返回 -1。

const tagline = "MDN - Resources for developers, by developers";
console.log(tagline.indexOf("developers")); // 20

從 0 開始，如果你從字串的開頭計算字元數（包括空格），子字串 "developers" 的第一次出現是在索引 20 處。

console.log(tagline.indexOf("x")); // -1

另一方面，這會返回 -1，因為字元 x 不存在於字串中。

既然你已經知道如何查詢子字串的第一次出現，那麼如何查詢後續出現呢？你可以透過將大於上一次出現的索引值作為第二個引數傳遞給該方法來實現。

const firstOccurrence = tagline.indexOf("developers");
const secondOccurrence = tagline.indexOf("developers", firstOccurrence + 1);

console.log(firstOccurrence); // 20
console.log(secondOccurrence); // 35

在這裡，我們告訴該方法從索引 21 (firstOccurrence + 1) 開始搜尋子字串 "developers"，它返回索引 35。

從字串中提取子字串

你可以使用 slice() 方法從字串中提取子字串。你需要傳遞

開始提取的索引
停止提取的索引。這是排他性的，意味著該索引處的字元不包含在提取的子字串中。

例如

const browserType = "mozilla";
console.log(browserType.slice(1, 4)); // "ozi"

索引 1 處的字元是 "o"，索引 4 處的字元是 "l"。因此我們提取從 "o" 開始到 "l" 之前結束的所有字元，得到 "ozi"。

如果你知道要提取字串中某個字元之後的所有剩餘字元，則不必包含第二個引數。相反，你只需包含要從字串中提取剩餘字元的起始字元位置。嘗試以下操作

browserType.slice(2); // "zilla"

這會返回 "zilla" —— 這是因為字元位置 2 是字母 "z"，並且因為你沒有包含第二個引數，所以返回的子字串是字串中所有剩餘的字元。

注意： slice() 還有其他選項；研究 slice() 頁面以瞭解更多資訊。

更改大小寫

字串方法 toLowerCase() 和 toUpperCase() 分別將字串中的所有字元轉換為小寫或大寫。這可能很有用，例如，如果你想在將所有使用者輸入的資料儲存到資料庫之前進行規範化。

我們來嘗試輸入以下幾行，看看會發生什麼

const radData = "My NaMe Is MuD";
console.log(radData.toLowerCase());
console.log(radData.toUpperCase());

更新字串的部分內容

你可以使用 replace() 方法將字串中的一個子字串替換為另一個子字串。

在這個例子中，我們提供了兩個引數——我們想要替換的字串，以及我們想要替換它的字串

const browserType = "mozilla";
const updated = browserType.replace("moz", "van");

console.log(updated); // "vanilla"
console.log(browserType); // "mozilla"

請注意，replace() 與許多字串方法一樣，不會改變被呼叫的字串本身，而是返回一個新字串。如果你想更新原始的 browserType 變數，你必須這樣做

let browserType = "mozilla";
browserType = browserType.replace("moz", "van");

console.log(browserType); // "vanilla"

另請注意，我們現在必須使用 let 而不是 const 宣告 browserType，因為我們正在重新賦值。

請注意，這種形式的 replace() 只更改子字串的第一次出現。如果你想更改所有出現，你可以使用 replaceAll()

let quote = "To be or not to be";
quote = quote.replaceAll("be", "code");

console.log(quote); // "To code or not to code"

學習挑戰

在本節中，我們將讓你嘗試編寫一些字串操作程式碼。在下面的每個練習中，我們都有一個字串陣列，以及一個迴圈，用於處理陣列中的每個值並將其顯示在專案符號列表中。你現在不需要理解陣列或迴圈——這些將在未來的文章中解釋。你只需在每種情況下編寫程式碼，使其以我們想要的格式輸出字串。

使用即時示例頂部的 “播放” 按鈕在 MDN Playground 中開啟每個示例，然後按照說明解決問題。如果你遇到困難，可以在每個即時示例下方檢視解決方案。

如果在 MDN Playground 中出錯且無法重新執行程式碼，可以使用“重置”按鈕重置程式碼。

過濾問候語訊息

在第一個練習中，我們將從簡單開始——我們有一個賀卡訊息陣列，但我們只想篩選出聖誕節訊息。我們希望你在 if () 結構中填寫一個條件測試，以測試每個字串，並僅當它是聖誕節訊息時才將其列印到列表中。

思考一下你如何測試每條訊息是否是聖誕節訊息。所有這些訊息中都存在哪個字串，以及你可以使用什麼方法來測試它是否存在？

<ul></ul>

const list = document.querySelector("ul");
const greetings = [
  "Happy Birthday!",
  "Merry Christmas my love",
  "A happy Christmas to all the family",
  "You're all I want for Christmas",
  "Get well soon",
];

for (const greeting of greetings) {
  // Your conditional test needs to go inside the parentheses
  // in the line below, replacing what's currently there
  if (greeting) {
    const listItem = document.createElement("li");
    listItem.textContent = greeting;
    list.appendChild(listItem);
  }
}

點選此處顯示解決方案

你完成的 JavaScript 應該如下所示

const list = document.querySelector("ul");
const greetings = [
  "Happy Birthday!",
  "Merry Christmas my love",
  "A happy Christmas to all the family",
  "You're all I want for Christmas",
  "Get well soon",
];

for (const greeting of greetings) {
  if (greeting.includes("Christmas")) {
    const listItem = document.createElement("li");
    listItem.textContent = greeting;
    list.appendChild(listItem);
  }
}

修復大小寫

此練習展示了英國城市名稱，但大小寫混亂。我們希望你將其更改為全部小寫，除了首字母大寫。一個好的方法是

將 city 變數中包含的整個字串轉換為小寫並將其儲存在新變數中。
獲取此新變數中字串的第一個字母並將其儲存在另一個變數中。
使用這個最新變數作為子字串，將小寫字串的第一個字母替換為已更改為大寫的小寫字串的第一個字母。將此替換過程的結果儲存在另一個新變數中。
將 result 變數的值更改為等於最終結果，而不是 city。

注意： 一個提示 — 字串方法的引數不必是字串字面量；它們也可以是變數，甚至是呼叫了方法的變數。

<ul></ul>

const list = document.querySelector("ul");
const cities = ["lonDon", "ManCHESTer", "BiRmiNGHAM", "liVERpoOL"];

for (const city of cities) {
  // write your code just below here

  const result = city;
  const listItem = document.createElement("li");
  listItem.textContent = result;
  list.appendChild(listItem);
}

點選此處顯示解決方案

你完成的 JavaScript 應該如下所示

const list = document.querySelector("ul");
const cities = ["lonDon", "ManCHESTer", "BiRmiNGHAM", "liVERpoOL"];

for (const city of cities) {
  const lower = city.toLowerCase();
  const firstLetter = lower.slice(0, 1);
  const capitalized = lower.replace(firstLetter, firstLetter.toUpperCase());
  const result = capitalized;
  const listItem = document.createElement("li");
  listItem.textContent = result;
  list.appendChild(listItem);
}

從舊部件製作新字串

在最後一個練習中，陣列包含有關英格蘭北部火車站資訊的字串。這些字串是資料項，包含三字母的車站程式碼，後跟一些機器可讀資料，後跟一個分號，最後是人類可讀的車站名稱。例如

MAN675847583748sjt567654;Manchester Piccadilly

我們希望提取車站程式碼和名稱，並將它們組合成具有以下結構的字串

MAN: Manchester Piccadilly

我們建議這樣做：

提取三字母的車站程式碼並將其儲存在一個新變數中。
找到分號的字元索引號。
使用分號的字元索引號作為參考點，提取人類可讀的車站名稱，並將其儲存在一個新變數中。
連線這兩個新變數和一個字串字面量以建立最終字串。
將 result 變數的值更改為最終字串，而不是 station。

<ul></ul>

const list = document.querySelector("ul");
const stations = [
  "MAN675847583748sjt567654;Manchester Piccadilly",
  "GNF576746573fhdg4737dh4;Greenfield",
  "LIV5hg65hd737456236dch46dg4;Liverpool Lime Street",
  "SYB4f65hf75f736463;Stalybridge",
  "HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield",
];

for (const station of stations) {
  // write your code just below here

  const result = station;
  const listItem = document.createElement("li");
  listItem.textContent = result;
  list.appendChild(listItem);
}

點選此處顯示解決方案

你完成的 JavaScript 應該如下所示

const list = document.querySelector("ul");
const stations = [
  "MAN675847583748sjt567654;Manchester Piccadilly",
  "GNF576746573fhdg4737dh4;Greenfield",
  "LIV5hg65hd737456236dch46dg4;Liverpool Lime Street",
  "SYB4f65hf75f736463;Stalybridge",
  "HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield",
];

for (const station of stations) {
  const code = station.slice(0, 3);
  const semiColon = station.indexOf(";");
  const name = station.slice(semiColon + 1);
  const result = `${code}: ${name}`;
  const listItem = document.createElement("li");
  listItem.textContent = result;
  list.appendChild(listItem);
}

總結

你無法迴避這樣一個事實：在程式設計中處理單詞和句子非常重要——尤其是在 JavaScript 中，因為網站都是關於與人溝通的。本文為你提供了目前需要了解的字串操作基礎知識。隨著你將來進入更復雜的主題，這應該對你很有幫助。

在下一篇文章中，我們將為你提供一些測試，你可以用來檢查你對我們提供的字串和字串方法資訊的理解和掌握程度。

幫助改進 MDN

瞭解如何貢獻

此頁面上次修改於 2025 年 8 月 18 日，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容問題