如何在JavaScript中使用字符串

介绍

string 是一个或多个字符的序列，可能由字母、数字或符号组成。 JavaScript 中的字符串是原始的数据类型和不可变的，这意味着它们是不变的。

由于字符串是我们显示和处理文本的方式，而文本是我们通过计算机进行交流和理解的主要方式，因此字符串是需要熟悉的最基本的编程概念之一。

在本文中，我们将学习如何创建和查看字符串的输出，如何连接字符串，如何将字符串存储在变量中，以及在 JavaScript 中字符串中使用引号、撇号和换行符的规则。

创建和查看字符串的输出

在 JavaScript 中，有三种写字符串的方法——它们可以写在单引号 (' ')、双引号 (" ") 或反引号 (` `) 中。使用的引号类型必须在两边都匹配，但是所有三种样式都可以在同一个脚本中使用。

使用双引号和单引号的字符串实际上是相同的。由于对单引号或双引号字符串没有约定或官方偏好，所有重要的是在项目程序文件中保持一致。

'This string uses single quotes.';

"This string uses double quotes.";

创建字符串的第三种也是最新的方法称为 模板文字 。模板文字使用反引号（也称为重音符号），其工作方式与常规字符串相同，但有一些额外的好处，我们将在本文中介绍。

`This string uses backticks.`;

查看字符串输出的最简单方法是将其打印到控制台，使用 console.log()：

console.log("This is a string in the console.");

OutputThis is a string in the console.

另一种输出值的简单方法是使用 alert() 向浏览器发送警报弹出窗口：

alert("This is a string in an alert.");

运行上面的行将在浏览器的用户界面中产生以下输出：

alert() 是一种不太常见的测试和查看输出的方法，因为关闭警报很快就会变得乏味。

将字符串存储在变量中

JavaScript 中的变量是存储值的命名容器，使用关键字 var、const 或 let。我们可以将字符串的值分配给命名变量。

const newString = "This is a string assigned to a variable.";

现在 newString 变量包含我们的字符串，我们可以引用它并将其打印到控制台。

console.log(newString);

这将输出字符串值。

OutputThis is a string assigned to a variable.

通过使用变量来代替字符串，我们不必在每次想要使用字符串时都重新键入字符串，从而使我们在程序中使用和操作字符串变得更加简单。

字符串连接

Concatenation 表示将两个或多个字符串连接在一起以创建一个新字符串。为了连接，我们使用连接运算符，由 + 符号表示。当与算术运算一起使用时，+ 符号也是加法运算符。

让我们在 "Sea" 和 "horse" 之间创建一个简单的连接实例。

"Sea" + "horse";

OutputSeahorse

串联将字符串首尾相连，将它们组合起来并输出一个全新的字符串值。如果我们想在单词 Sea 和 horse 之间有一个空格，我们需要在其中一个字符串中包含一个空格字符：

"Sea " + "horse";

OutputSea horse

我们将字符串和包含字符串值的变量连接起来。

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = "My favorite poem is " + poem + " by " + author + ".";

OutputMy favorite poem is The Wide Ocean by Pablo Neruda.

当我们通过连接组合两个或多个字符串时，我们正在创建一个可以在整个程序中使用的新字符串。

带有模板文字的字符串中的变量

模板文字功能的一个特殊功能是能够在字符串中包含表达式和变量。不必使用连接，我们可以使用 ${} 语法来插入变量。

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = `My favorite poem is ${poem} by ${author}.`;

OutputMy favorite poem is The Wide Ocean by Pablo Neruda.

正如我们所见，在模板文字中包含表达式是实现相同结果的另一种方式。在这种情况下，使用模板文字可能更容易编写和更方便。

字符串文字和字符串值

您可能会注意到我们在源代码中编写的字符串被包含在引号或反引号中，但实际打印输出不包含任何引号。

"Beyond the Sea";

OutputBeyond the Sea

提及这些中的每一个时都有区别。 string literal 是写在源代码中的字符串，包括引号。 字符串值 是我们在输出中看到的，不包括引号。

在上面的例子中，"Beyond the Sea" 是一个字符串字面量，Beyond the Sea 是一个字符串值。

转义字符串中的引号和撇号

由于引号用于表示字符串，因此在字符串中使用撇号和引号时必须特别注意。例如，尝试在单引号字符串的中间使用撇号将结束该字符串，并且 JavaScript 将尝试将预期字符串的其余部分解析为代码。

我们可以通过尝试在下面的 I'm 收缩中使用撇号来看到这一点：

const brokenString = 'I'm a broken string';

console.log(brokenString);

Outputunknown: Unexpected token (1:24)

这同样适用于尝试在双引号字符串中使用引号。

为了避免在这些情况下引发错误，我们可以使用一些选项：

相反的字符串语法
转义字符
模板文字

我们将在下面探讨这些选项。

使用备用字符串语法

解决可能损坏的字符串的孤立情况的一种简单方法是使用与您当前使用的字符串语法相反的字符串语法。

例如，使用 " 构建的字符串中的撇号。

"We're safely using an apostrophe in double quotes."

使用 ' 构建的字符串中的引号。

'Then he said, "Hello, World!"';

通过组合单引号和双引号的方式，我们可以控制字符串中引号和撇号的显示。但是，当我们在项目编程文件中使用一致的语法时，这可能很难在整个代码库中维护。

使用转义字符 (`\`)

我们可以使用反斜杠 (\) 转义字符来防止 JavaScript 将引号解释为字符串的结尾。

\' 的语法永远是单引号，而 \" 的语法永远是双引号，不用担心会破坏字符串。

使用这种方法，我们可以在用 " 构建的字符串中使用撇号。

'We\'re safely using an apostrophe in single quotes.'

我们还可以在使用 " 构建的字符串中使用引号。

"Then he said, \"Hello, World!\"";

这种方法看起来有点混乱，但您可能需要在同一字符串中同时使用撇号和引号，这将使得转义成为必要。

使用模板文字

模板文字是用反引号定义的，因此引号和撇号都可以安全地使用，而无需任何额外的转义或考虑。

`We're safely using apostrophes and "quotes" in a template literal.`;

除了防止字符转义和允许嵌入表达式之外，模板文字还提供多行支持，我们将在下一节中讨论。

使用交替的字符串语法、使用转义字符和使用模板文字，有几种方法可以安全地创建字符串。

长字符串和换行符

有时您可能希望在字符串中插入换行符或回车符。 \n 或 \r 转义字符可用于在代码输出中插入换行符。

const threeLines = "This is a string\nthat spans across\nthree lines.";

OutputThis is a string
that spans across
three lines.

从技术上讲，这可以使我们的输出多行。但是，在一行上写一个很长的字符串很快就会变得非常难以阅读和使用。我们可以使用连接运算符在多行上显示字符串。

const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";

我们可以使用 \ 转义字符来转义换行符，而不是连接多个字符串。

const threeLines = "This is a string\n\
that spans across\n\
three lines.";

注意：此方法不是首选，因为它可能会导致某些浏览器和缩小器出现问题。

为了使代码更具可读性，我们可以改用模板文字字符串。这些消除了对包含换行符的长字符串进行连接或转义的需要。字符串和换行符将被保留。

const threeLines = `This is a string
that spans across
three lines.`;

OutputThis is a string
that spans across
three lines.

了解创建跨越多行的换行符和字符串的所有方法很重要，因为不同的代码库可能使用不同的标准。

结论

在本文中，我们介绍了在 JavaScript 中使用字符串的基础知识，从使用单引号和双引号创建和显示字符串文字、创建模板文字、连接、转义以及将字符串值分配给变量。