介绍
一个 ** string 是由一个或多个字符组成的序列,可以由字母、数字或符号组成。 JavaScript 中的字符串是原始的 数据类型和不变的,这意味着它们不变。
由于字符串是我们展示和处理文本的方式,而文本是我们通过计算机进行沟通和理解的主要方式,所以字符串是最基本的编程概念之一。
在本文中,我们将学习如何创建和查看字符串的输出,如何连接字符串,如何将字符串存储在变量中,以及在JavaScript中使用字符串中的引文,断言和新闻线的规则。
创建和查看 string 的输出
在JavaScript中,有三种方式来编写一个字符串 - 它们可以写在单个引文(' ')、双引文(" ")、或背面引文( `` ```)中。
使用双引用字符串和单引用字符串的字符串实际上是相同的,因为对于单引用字符串或双引用字符串没有惯例或官方偏好,重要的是在项目程序文件中保持一致性。
1'This string uses single quotes.';
1"This string uses double quotes.";
创建字符串的第三种和最新的方法被称为 ** 模板字符串**. 模板字符串使用背印(也被称为严重口音)并以与常规字符串相同的方式工作,我们将在本文中讨论一些额外的奖金。
1`This string uses backticks.`;
查看字符串的输出最简单的方法是将其打印到控制台上,使用 console.log():
1console.log("This is a string in the console.");
1[secondary_label Output]
2This is a string in the console.
输出一个值的另一个简单方法是向浏览器发送一个警告 popup 以alert():
1alert("This is a string in an alert.");
运行上面的行将在浏览器的用户界面中产生以下输出:
alert() 是测试和查看输出的一种不太常见的方法,因为关闭警报可以很快变得无聊。
将字符串存储在一个变量中
在JavaScript中,变量被称为存储值的容器,使用关键字var,const或let。
1const newString = "This is a string assigned to a variable.";
现在‘newString’变量包含我们的字符串,我们可以参考它并将其打印到控制台上。
1console.log(newString);
这将输出 string 值。
1[secondary_label Output]
2This is a string assigned to a variable.
通过使用变量来代表字符串,我们不必每次想要使用字符串重写字符串,这使我们更容易在我们的程序中使用和操纵字符串。
紧紧连接
**concatenation ** 意味着将两个或多个字符串合并在一起以创建一个新的字符串。 为了连接,我们使用一个+符号表示的concatenation操作员。
让我们创建一个简单的连接例子,在海和马之间。
1"Sea" + "horse";
1[secondary_label Output]
2Seahorse
Concatenation将字符串端到端连接起来,将它们合并并产生一个全新的字符串值. 如果我们想在字符串中有海和马之间的空间,我们需要在一个字符串中包含一个白空间字符:
1"Sea " + "horse";
1[secondary_label Output]
2Sea horse
我们将含有字符串值的字符串和变量连接在一起。
1const poem = "The Wide Ocean";
2const author = "Pablo Neruda";
3
4const favePoem = "My favorite poem is " + poem + " by " + author + ".";
1[secondary_label Output]
2My favorite poem is The Wide Ocean by Pablo Neruda.
当我们通过连接结合两个或多个字符串时,我们正在创建一个新的字符串,我们可以在整个程序中使用。
具有 Template Literals 的字符串中的变量
模板字母函数的一个特殊特征是能够在字符串中包含表达式和变量,而不是需要使用连接,我们可以使用${}语法插入变量。
1const poem = "The Wide Ocean";
2const author = "Pablo Neruda";
3
4const favePoem = `My favorite poem is ${poem} by ${author}.`;
1[secondary_label Output]
2My favorite poem is The Wide Ocean by Pablo Neruda.
正如我们所看到的,在模板字母中包含表达式是实现相同结果的另一种方法,在这种情况下,使用模板字母可能更容易编写和更方便。
字符串和字符串值
您可能会注意到,我们在源代码中写的字符串被嵌入了引文或背印,但实际的打印输出不包括任何引文。
1"Beyond the Sea";
1[secondary_label Output]
2Beyond the Sea
每一个字符串都有区别.一个 字符串字符串是源代码中所写的字符串,包括引用。
在上面的示例中,超越海洋是一个字符串,而超越海洋是一个字符串值。
逃避引用和使徒在字符串
由于引用符号被用来表示字符串,所以在使用字符串中的引文和引文时,必须特别注意。
我们可以通过试图在下面的我缩小中使用一个语来看到这一点:
1const brokenString = 'I'm a broken string';
2
3console.log(brokenString);
1[secondary_label Output]
2unknown: Unexpected token (1:24)
同样的情况也适用于尝试在双引文字符串中使用引文。
为了避免在这些情况下出现错误,我们有几个我们可以使用的选项:
- 相反的字符串语法
- 逃避字符
- 模板字符
我们将在下面探讨这些选项。
使用 Alternate String 语法
绕过潜在破碎字符串的孤立案例的一个简单的方法是使用您目前使用的字符串语法的相反字符串语法。
例如,用``构建的字符串中的 apostrophes。
1"We're safely using an apostrophe in double quotes."
引用符号在构建为``的字符串中。
1'Then he said, "Hello, World!"';
通过我们组合单个和双重引文的方式,我们可以控制我们的字符串中的引文标记和解读符号的显示,但是,当我们在项目编程文件中使用一致的语法时,这在整个代码库中很难维持。
使用逃跑字符(\)
我们可以使用回归(\)逃避字符来阻止JavaScript将引文解释为字符串的结尾。
\的语法将永远是一个单一的引文,而\的语法将永远是一个双重的引文,而不会害怕打破字符串。
使用这种方法,我们可以在构建的字符串中使用``字符串。
1'We\'re safely using an apostrophe in single quotes.'
我们还可以使用用``构建的字符串的引用标记。
1"Then he said, \"Hello, World!\"";
这种方法看起来有点模糊,但你可能需要在同一个字符串中使用一个抽象符号和一个引用符号,这将使逃避成为必要的。
使用 template 字典
模板字母是用背杆定义的,因此可以安全地使用引文和语,而无需额外的逃避或考虑。
1`We're safely using apostrophes and "quotes" in a template literal.`;
除了防止需要字符逃避和允许嵌入式表达式外,模板字母还提供多行支持,我们将在下一节(https://andsky.com/tech/tutorials/how-to-work-with-strings-in-javascript#long-strings-and-newlines)中讨论。
使用交替的字符串语法、使用逃生字符和使用模板字符数,有几种方法可以安全地创建字符串。
长串和新闻
有时你可能想要插入一个新行字符,或车辆返回你的字符串. 可以使用\n或\r逃避字符插入新行到代码输出。
1const threeLines = "This is a string\nthat spans across\nthree lines.";
1[secondary_label Output]
2This is a string
3that spans across
4three lines.
这在技术上可以使我们的输出在多个行上。然而,在一个行上写一个非常长的字符串很快就会变得非常困难地阅读和工作。
1const threeLines = "This is a string\n" +
2"that spans across\n" +
3"three lines.";
而不是连接多个字符串,我们可以使用\逃跑字符来逃避新线。
1const threeLines = "This is a string\n\
2that spans across\n\
3three lines.";
<$>[注] 注:此方法不受欢迎,因为它可能导致某些浏览器和迷你浏览器出现问题。
为了使代码更易于读取,我们可以代替使用模板的字母字符串,这些字符串将消除需要连接或逃避包含新闻线的长串。
1const threeLines = `This is a string
2that spans across
3three lines.`;
1[secondary_label Output]
2This is a string
3that spans across
4three lines.
重要的是要了解创建跨多个行的新闻行和字符串的所有方法,因为不同的代码库可能使用不同的标准。
结论
在本文中,我们探讨了 JavaScript 中的字符串工作基本知识,从使用单个和双重引文创建和显示字符串,创建模板字符串,连接,逃避,并将字符串值分配给变量。