有用的字符串方法

现在我们已经了解了字符串的基本知识，让我们更进一步，开始思考如何使用内置方法对字符串执行有用的操作，例如查找文本字符串的长度、连接和拆分字符串、将字符串中的一个字符替换为另一个字符等等。

先决条件	对 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 中，因为网站都是关于与人交流的。本文为您提供了目前需要了解的关于操作字符串的基本知识。这将帮助您在未来进入更复杂的主题。接下来，我们将介绍在短期内需要关注的最后一种主要数据类型——数组。