处理文本 - JavaScript 中的字符串

文字对人类来说非常重要——它们是我们交流的重要组成部分。由于 Web 主要是基于文本的媒介，旨在让人们进行交流和共享信息，因此我们可以控制 Web 上显示的文字很有用。HTML 为文本提供结构和意义，CSS 允许我们精确地设置样式，而 JavaScript 提供了许多用于操作字符串的功能。这些包括创建自定义欢迎消息和提示、在需要时显示正确的文本标签、将术语按所需顺序排序等等。

到目前为止，我们向您展示的几乎所有程序都涉及一些字符串操作。

乍一看，字符串与数字的处理方式类似，但深入研究后，您会发现一些显著的差异。让我们先在 浏览器开发者控制台 中输入一些基本行，以便熟悉它们。

首先，输入以下行

const string = "The revolution will not be televised.";
console.log(string);

就像我们对数字所做的那样，我们声明了一个变量，用字符串值初始化它，然后返回该值。这里唯一的区别是，在编写字符串时，需要用引号将值括起来。

如果您没有这样做，或者错过了其中一个引号，您将收到错误。尝试输入以下行

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

这些行无法正常工作，因为任何没有引号包围的文本都会被解释为变量名、属性名、保留字或类似的东西。如果浏览器无法识别未加引号的文本，则会引发错误（例如，“语句前缺少分号”）。如果浏览器能够检测到字符串的开始位置，但无法检测到它的结束位置（由于缺少第二个引号），它会报告“未终止的字符串文字”错误。如果您的程序引发了此类错误，请返回并检查所有字符串，确保您没有遗漏引号。

如果您之前定义了变量 string，则以下代码将起作用——现在尝试一下

const badString = string;
console.log(badString);

badString 现在被设置为与 string 具有相同的值。

在 JavaScript 中，您可以选择单引号 (')、双引号 (") 或反引号 (`) 来包围您的字符串。以下所有代码都将起作用

const single = 'Single quotes';
const double = "Double quotes";
const backtick = `Backtick`;

console.log(single);
console.log(double);
console.log(backtick);

您必须对字符串的开头和结尾使用相同的字符，否则您将收到错误

const badQuotes = 'This is not allowed!";

使用单引号声明的字符串和使用双引号声明的字符串是相同的，您使用哪一个取决于个人喜好——尽管最好选择一种风格并在代码中始终如一地使用它。

使用反引号声明的字符串是一种特殊的字符串，称为 模板字面量。在大多数情况下，模板字面量与普通字符串类似，但它们有一些特殊的属性

• 您可以在其中 嵌入 JavaScript
• 您可以将模板字面量声明为 多行

在模板字面量内部，您可以将 JavaScript 变量或表达式包含在 ${ } 中，结果将包含在字符串中

const name = "Chris";
const greeting = `Hello, ${name}`;
console.log(greeting); // "Hello, Chris"

您可以使用相同的技术来连接两个变量

const one = "Hello, ";
const two = "how are you?";
const joined = `${one}${two}`;
console.log(joined); // "Hello, how are you?"

像这样连接字符串称为连接。

让我们看一看连接在实际中的使用情况

<button>Press me</button>
<div id="greeting"></div>

const button = document.querySelector("button");

function greet() {
  const name = prompt("What is your name?");
  const greeting = document.querySelector("#greeting");
  greeting.textContent = `Hello ${name}, nice to see you!`;
}

button.addEventListener("click", greet);

在这里，我们使用的是 window.prompt() 函数，该函数会提示用户通过弹出对话框回答问题，然后将他们输入的文本存储在一个给定的变量中——在本例中是 name。然后，我们显示一个字符串，将名称插入通用问候消息中。

您只能在模板字面量中使用 ${}，而不能在普通字符串中使用。您可以使用 + 运算符连接普通字符串

const greeting = "Hello";
const name = "Chris";
console.log(greeting + ", " + name); // "Hello, Chris"

但是，模板字面量通常可以让您获得更易读的代码

const greeting = "Hello";
const name = "Chris";
console.log(`${greeting}, ${name}`); // "Hello, Chris"

您可以在模板字面量中包含 JavaScript 表达式，以及变量，结果将包含在结果中

const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. I gave it a score of ${
  (score / highestScore) * 100
}%.`;
console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."

模板字面量会保留源代码中的换行符，因此您可以像这样编写跨越多行的字符串

const newline = `One day you finally knew
what you had to do, and began,`;
console.log(newline);

/*
One day you finally knew
what you had to do, and began,
*/

要使用普通字符串获得等效的输出，您需要在字符串中包含换行符 (\n)

const newline = "One day you finally knew\nwhat you had to do, and began,";
console.log(newline);

/*
One day you finally knew
what you had to do, and began,
*/

请参阅我们的 模板字面量 参考页面，以获取更多示例和高级功能的详细信息。

由于我们使用引号来表示字符串的开头和结尾，那么我们如何在字符串中包含实际的引号呢？我们知道这行不通

const badQuotes = "She said "I think so!"";

一种常见的选择是使用其他字符来声明字符串

const goodQuotes1 = 'She said "I think so!"';
const goodQuotes2 = `She said "I'm not going in there!"`;

另一种选择是转义有问题的引号。转义字符意味着我们对它们做一些操作，以确保它们被识别为文本，而不是代码的一部分。在 JavaScript 中，我们通过在字符前面加上反斜杠来做到这一点。尝试以下代码

const bigmouth = 'I\'ve got no right to take my place…';
console.log(bigmouth);

您可以使用相同的技术来插入其他特殊字符。请参阅 转义序列，以获取更多详细信息。

当我们尝试连接字符串和数字时会发生什么？让我们在控制台中试一试

const name = "Front ";
const number = 242;
console.log(name + number); // "Front 242"

您可能期望这会返回一个错误，但它可以正常工作。数字应该如何显示为字符串是相当明确的，因此浏览器会自动将数字转换为字符串，并将两个字符串连接起来。

如果您有一个要转换为字符串的数字变量，或者一个要转换为数字的字符串变量，您可以使用以下两种结构

• Number() 函数会尽力将传递给它的任何内容转换为数字。尝试以下代码
  js

  const myString = "123";
  const myNum = Number(myString);
  console.log(typeof myNum);
  // number
  

• 相反，String() 函数会将其参数转换为字符串。尝试以下代码
  js

  const myNum2 = 123;
  const myString2 = String(myNum2);
  console.log(typeof myString2);
  // string
  

这些结构在某些情况下非常有用。例如，如果用户在表单的文本字段中输入一个数字，则它是一个字符串。但是，如果您想将此数字加到其他内容，则需要将其变为数字，因此您可以将其传递给 Number() 来处理它。我们在 数字猜谜游戏 的 checkGuess 函数中做了完全相同的操作。

因此，这就是 JavaScript 中字符串的基础知识。在下一篇文章中，我们将在此基础上进行构建，研究 JavaScript 中可用于字符串的一些内置方法，以及如何使用它们将字符串操作为我们想要的格式。

• 上一步
• 概述：JavaScript 入门
• 下一步