介绍
字符串是可以由字母,数字或符号组成的一个或多个字符的序列。 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.
通过使用变量来代替字符串,我们不需要在每次使用它时重新输入一个字符串,从而使我们在我们的程序中使用和操作字符串更简单。
字符串连接
连接意味着将两个或多个字符串连接在一起以创建一个新的字符串。 为了连接,我们使用由+
符号表示的级联运算符。 +
符号也是与算术运算一起使用的加法运算符。
让我们在"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
当提到这些中的每一个时,都有区别。 字符串字面量是字符串,它以源代码编写,包括引号。 字符串值是我们在输出中看到的,不包括引号。
在上面的例子中, "Beyond the Sea"
是一个字符串文字,而Beyond the Sea
是一个字符串值。
逃避字串中的行情和撇号
由于使用引号来表示字符串,因此在字符串中使用撇号和引号时,必须特别注意。 例如,尝试在单引号字符串中间使用单引号会终止字符串,JavaScript将尝试将其余的预期字符串解析为代码。
我们可以通过尝试在下面的收缩中使用撇号来看到这一点:
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.";
而不是连接多个字符串,我们可以使用\
escape字符来转义换行符。
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中的字符串的基础知识,从使用单引号和双引号创建和显示字符串文字,创建模板文字,连接,转义和将字符串值分配给变量。