Web前端开发：JavaScript中的字符串的一些应用 - Web前端

字符串是可包括字母，数字，或符号的一个或多个字符的序列。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);

这将输出字符串值。

Output
This is a string assigned to a variable.

通过使用变量代表字符串，我们不必在每次要使用它时重新键入字符串，这使我们更容易在程序中使用和操作字符串。

字符串连接

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

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

"Sea" + "horse";
Output
Seahorse

连接将字符串端到端地连接起来，将它们组合起来并输出一个全新的字符串值。如果我们想有词之间的空间Sea和horse，我们需要包括在字符串中的一个空白字符：

"Sea " + "horse";
Output
Sea horse

我们使用串联连接包含字符串值的字符串和变量。

const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = "My favorite poem is " + poem + " by " + author ".";

Output
My 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}.`;

Output
My favorite poem is The Wide Ocean by Pablo Neruda.

我们可以看到，在模板文字中包含表达式是实现相同结果的另一种方法。在这种情况下，使用模板文字可能更容易编写并且更方便。

字符串文字和字符串值

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

"Beyond the Sea";

Output
Beyond the Sea

在提及这些中的每一个时都有区别。甲文本字符串是因为它是写在源代码，包括报价的字符串。一个字符串值，就是我们在输出中看到，并且不包括报价。

在上面的示例中，"Beyond the Sea"是一个字符串文字，并且Beyond the Sea是一个字符串值。

逃避字符串中的行情和撇号

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

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

const brokenString = 'I'm a broken string';
console.log(brokenString);

Output
unknown: 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.";

Output
This is a stringthat spans acrossthree 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 stringthat spans acrossthree lines.`;

Output
This is a stringthat spans acrossthree lines.

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

结论

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

标签：字符串JavaScriptWeb