JavaScript中的字符串

在JavaScript中，用于表示文本的类型称为字符串（String）。字符串是一个不可变的有序序列，由16位值组成，其中每个值代表一个Unicode字符。字符串的length属性表示它包含的16位值的数量。JavaScript的字符串（以及数组）使用从零开始的索引，因此第一个16位值的索引是0，第二个值的索引是1，依此类推。空字符串的长度为0。JavaScript没有单独的类型来表示字符串中的单个字符。要表示一个16位值，可以使用长度为1的字符串。

1. 字符串字面量。

在JavaScript程序中包含字符串，您可以将它们包含在匹配的单引号、双引号或反引号（`'"）中。双引号和反引号可以出现在由单引号限定的字符串中，反之亦然。以下是一些字符串字面量的示例：

""     // 一个空字符串，没有字符

'testing'

"3.14"

'name="myform"'

"t is the ratio of a circle's circumference to its radius"

'"She said \'hi\', he said."'

使用反引号作为字符串定界符是ES6的一个功能，允许您在字符串字面量中包含（或插值）JavaScript表达式。在早期版本的JavaScript中，字符串字面量必须在一行上，而+运算符用于将单行字符串连接成更长的字符串。在ES5中，您可以使用反斜杠（\）将单行字符串分成多行。反斜杠和紧随其后的行终止符不是字符串字面量的一部分。如果需要在单引号或双引号括起的字符串中包含换行符，可以使用字符序列\n。ES6的反引号语法支持多行字符串，并且行终止符被视为字符串字面量的一部分：

// 将两行表示为一行：

'two\nlines'

// 将一行分为三行：

"one\

long\

line"

// 将两行表示为两行：

`the newline character at the end of this line

is included literally in this string`

在使用单引号作为字符串定界符时，您需要注意缩略词和所有格，例如"can't"中的撇号。由于撇号是定界符，必须使用反斜杠字符（\）“转义”字符串中出现的任何撇号。

在客户端JavaScript编程中，您的代码可能包含带有HTML代码的字符串，而HTML代码可能包含JavaScript。与JavaScript类似，HTML使用单引号或双引号作为字符串的定界符。因此，如果需要混合JavaScript和HTML代码，最好使用不同类型的引号。在下面的示例中，JavaScript表达式中的字符串"Thank you"使用单引号，而HTML事件处理程序属性使用双引号：

<button onclick="alert('Thank you')">Click Me</button>

（程序员的软技能：ke.qq.com/course/6034346）

2. 字符串字面量中的转义序列。

在JavaScript字符串中，反斜杠具有特殊作用。它与其后的字符结合，用于表示字符串中无法直接表示的字符。例如，\n是一个转义序列，表示换行符。

我们之前提到了另一个例子：\'，它表示单引号（或撇号）字符。这个转义序列用于在单引号字符串中包含撇号。之所以称为转义序列，是因为反斜杠修改了后面字符的通常含义。经过转义后，它不再表示字符串的结尾，而是表示撇号本身：

'You\'re right, it can\'t be a quote'

以下是JavaScript中的转义序列列表及其表示的字符。有三个通用的转义序列，可以使用十六进制形式的Unicode字符代码指定任何字符。例如，\xA9表示版权符号，使用其十六进制的Unicode代码点来指定。同样，\u03c0表示字符π，而\u{1f600}表示"笑脸"表情符号，使用4位或最多6位十六进制代码点来指定（ES6）：

空字符（\u0000）：\0

退格（\u0008）：\b

水平制表符（\u0009）：\t

换行符（\u000A）：\n

垂直制表符（\u000B）：\v

换页符（\u000C）：\f

回车（\u000D）：\r

双引号（\u0022）：\"

单引号或撇号（\u0027）：\'

反斜杠（\u005C）：\\

由2位十六进制数字nn指定的Unicode字符：\xnn

由4位十六进制数字nnnn指定的Unicode字符：\unnnn

由代码点n在0和10FFFF之间指定的Unicode字符，使用1到6位十六进制数字（ES6）：\u{n}

如果\字符前面的字符不是上述列出的字符之一，反斜杠将被忽略（当然，将来的语言版本可能会定义新的转义序列）。例如，\#等同于#。最后，在ES5中，您可以在换行字符前面放置一个反斜杠，以将字符串字面量分割成多行。

（程序员的软技能：ke.qq.com/course/6034346）

3. 使用字符串。

字符串连接是JavaScript的固有特性。如果将+运算符与数字一起使用，数字将相加。当与字符串一起使用时，字符串将被连接在一起（第二个字符串跟随在第一个之后）。例如：

let msg="Hello, "+"world";

let greeting="Welcome to my blog,"+" "+name;

可以使用标准的相等（==）和不相等（!=）运算符进行字符串比较。只有当两个字符串具有完全相同的16位值序列时，它们才被认为是相等的。还可以使用<=、>和>=运算符进行字符串比较，比较是基于它们的16位值的比较。

要确定字符串的长度（即包含的16位值的数量），可以使用字符串的length属性：

s.length

除了length属性外，JavaScript还提供了丰富的API来操作字符串：

let s="Hello, world";

// 提取字符串的一部分

s.substring(1,4)// => "ell": 第2到4个字符

s.slice(1,4)// => "ell": 与上面相同

s.slice(-3)// => "rld": 最后3个字符

s.split("，")// => ["Hello", "world"]: 以分隔符拆分

// 在字符串中搜索

s.indexOf("l")// => 3: 第一个"l"的位置

s.indexOf("l",4)// => 6: 第一个"l"在第4个字符后的位置

s.indexOf("zz")// => -1: 未找到子字符串"zz"

s.lastIndexOf("l")// => 6: 最后一个"l"的位置

// ES6及更高版本：布尔搜索函数

s.startsWith("Hell")// => true: 以这些字符开头

s.endsWith("!")// => false: 不以它结尾

s.includes("or")// => true: 包含子字符串"or"

// 创建修改后的字符串版本

s.replace("llo","ya")// => "Heya, world"

s.toLowerCase()// => "hello, world"

s.toUpperCase()// => "HELLO, WORLD"

s.normalize()// Unicode NFC规范化（ES6）

// 访问单个（16位值）字符

s.charAt(0)// => "H": 第一个字符

s.charAt(s.length-1)// => "d": 最后一个字符

s.charCodeAt(0)// => 72: 位置0处的16位值

s.codePointAt(0)// => 72: ES6，适用于代码点> 16位

// ES2017的新字符串填充函数

"x".padStart(3)// => "  x": 左侧填充到长度3

"x".padEnd(3)// => "x  ": 右侧填充到长度3

"x".padStart(3,"*")// => "**x": 使用"*"进行左侧填充

"x".padEnd(3,"-")// => "x--": 使用"-"进行右侧填充

// 修整函数。trim()已在ES5中，其他在ES2019中添加

" test ".trim()// => "test": 删除前导和尾随空格

" test ".trimStart()// => "test ": 删除前导空格

" test ".trimEnd()// => " test": 删除尾随空格

// 未分类的字符串方法

s.concat("!")// => "Hello, world!": 可以用+运算符替换

"<>".repeat(5)// => "<><><><><>": 重复n次（ES6）

请记住，JavaScript字符串是不可变的。像replace()和toUpperCase()这样的方法会返回新的字符串；它们不会修改调用它们的原始字符串。字符串也可以像只读数组一样对待，可以使用方括号而不是charAt()方法访问单个字符（16位值）：

let s="hello, world";

s[0]    // => "h"

s[s.length-1]    // => "d"

（程序员的软技能：ke.qq.com/course/6034346）

4. 模板字符串。

在ES6及更高版本中，可以使用反引号来界定字符串字面量：

let s=`hello world`;

然而，这不仅仅是新的字符串字面量语法，因为模板字符串可以包含任意的JavaScript表达式。反引号内的字符串字面量的值通过评估其中包含的所有表达式来计算，将这些表达式的值转换为字符串，然后将这些字符串与反引号内的字面量组合在一起：

let name="Bill";

// greeting == "Hello Bill."

let greeting=`Hello ${name}。`;

${和}之间的内容被解释为JavaScript表达式，而这些花括号之外的内容被视为常规字符串字面量。花括号内的表达式会被评估、转换为字符串，并插入到模板中，替换掉美元符号、花括号和其中的所有内容。

模板字符串可以包含任意数量的表达式、在常规字符串中可能出现的任何转义字符，并且它们可以跨多行而不需要特殊转义。以下模板字符串包含4个JavaScript表达式、1个Unicode转义序列和至少4个换行字符（表达式的值也可以包含换行字符）：

let errorMessage=`\

\u2718 Test failure at ${filename}:${linenumber}：

${exception.message}

Stack trace:

${exception.stack}

`;

第一行末尾的反斜杠会转义第一个换行字符，因此结果字符串的第一个字符是Unicode字符 ✘ (\u2718)，而不是换行字符。

带标签的模板字符串。

模板字符串具有强大但不常用的功能：如果在开头的反引号之前有一个函数名（标签），则文本和模板字符串中的表达式的值将作为参数传递给该函数。"标记模板字符串"的值是该函数的返回值。此功能可用于在插入HTML或SQL之前对文本进行转义。

ES6提供了一个名为String.raw()的内置标签函数。该函数返回从反引号中获取的原始未处理文本，不处理任何反斜杠转义：

// => 1: 字符串只包含一个换行字符

'\n'.length

// => 2: 一个反斜杠字符和一个字母'n'

String.raw`\n`.length

请注意，尽管标记模板字符串的标签部分是一个函数，但在调用它时没有括号。在这个非常特殊的情况下，反引号充当了开头和结尾的括号。

（程序员的软技能：ke.qq.com/course/6034346）

5. 模式匹配。

JavaScript定义了一种称为正则表达式（或RegExp）的数据类型，用于描述和匹配文本中的字符串模式。RegExp并不是JavaScript中的基本类型，但它们具有类似于数字和字符串的字面语法，有时会被视为基本类型。正则表达式字面量的语法复杂，它们定义的API也不是很简单。由于正则表达式的强大以及它们在文本处理中的常见用途，我将提供一个简要概述。

一对斜杠之间的文本构成了一个正则表达式字面量。在这对斜杠的第二个斜杠之后，可以出现一个或多个字母，这些字母会修改模式的含义。例如：

// 匹配字符串开头的字母"H"、"T"、"M"和"L"

/^HTML/;

// 匹配非零数字后跟任意数量的数字

/[1-9][0-9]*/;

// 匹配单词"javascript"，忽略大小写

/\bjavascript\b/i;

RegExp对象定义了一些有用的方法，字符串也有一些方法可以接受RegExp参数。例如：

// 示例文本

lettext="testing: 1, 2, 3";

// 匹配一个或多个数字

letpattern=/\d+/g;

// => true：存在匹配

pattern.test(text)

// => 9：第一个匹配的位置

text.search(pattern)

// => ["1", "2", "3"]：所有匹配的数组

text.match(pattern)

// => "testing: #, #, #"：用"#"替换所有匹配

text.replace(pattern,"#")

// => ["", "1", "2", "3"]：根据非数字进行拆分

text.split(/\D+/)