有用的字串方法

現在我們已經瞭解了字串的基本知識，讓我們更進一步，開始思考如何使用內建方法對字串執行有用的操作，例如查詢文字字串的長度、連線和拆分字串、將字串中的一個字元替換為另一個字元等等。

先決條件	對 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"

主動學習示例

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

每個示例都帶有一個 "重置" 按鈕，如果您犯了錯誤而無法再次使其正常工作，可以使用它重置程式碼，以及一個 "顯示解決方案" 按鈕，如果您真的卡住了，可以按下它來檢視可能的答案。

過濾問候語

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

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

<h2>Live output</h2>

<div class="output" style="min-height: 125px;">
  <ul></ul>
</div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="playable-code" style="height: 290px; width: 95%">
const list = document.querySelector('.output ul');
list.textContent = "";
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);
  }
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

const jsSolution = `const list = document.querySelector('.output ul');
list.textContent = "";
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.includes('Christmas')) {
    const listItem = document.createElement('li');
    listItem.textContent = greeting;
    list.appendChild(listItem);
  }
}`;

let solutionEntry = jsSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;
  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );

  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

修復大小寫

在這個練習中，我們有英國城市名稱，但大小寫都亂了。我們希望您更改它們，使它們全部小寫，除了第一個字母是大寫。一個好的方法是

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

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

<h2>Live output</h2>

<div class="output" style="min-height: 125px;">
  <ul></ul>
</div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="playable-code" style="height: 250px; width: 95%">
const list = document.querySelector('.output ul');
list.textContent = "";
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);
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

const jsSolution = `const list = document.querySelector('.output ul');
list.textContent = "";
const cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];

for (const city of cities) {
  // write your code just below here
  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);
}`;

let solutionEntry = jsSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;
  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );

  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

從舊部分建立新字串

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

MAN675847583748sjt567654;Manchester Piccadilly

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

MAN: Manchester Piccadilly

我們建議您這樣做

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

<h2>Live output</h2>

<div class="output" style="min-height: 125px;">
  <ul></ul>
</div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="playable-code" style="height: 285px; width: 95%">
const list = document.querySelector('.output ul');
list.textContent = "";
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);
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

const jsSolution = `const list = document.querySelector('.output ul');
list.textContent = '';
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 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);
}`;

let solutionEntry = jsSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;
  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );

  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

測試你的技能！

您已經到達了本文的結尾，但您還記得最重要的資訊嗎？您可以在繼續之前，找到一些進一步的測試來驗證您是否保留了這些資訊——請參閱測試您的技能：字串。

結論

您無法逃避這樣一個事實，即在程式設計中能夠處理單詞和句子非常重要——特別是在 JavaScript 中，因為網站都是關於與人交流的。本文為您提供了目前需要了解的關於操作字串的基本知識。這將幫助您在未來進入更復雜的主題。接下來，我們將介紹在短期內需要關注的最後一種主要資料型別——陣列。