如何在 JavaScript 中对字符串进行索引、拆分和操作

简介

字符串是一个包含一个或多个字符的序列，可以由字母、数字或符号组成。JavaScript 字符串中的每个字符都可以通过索引号访问，并且所有字符串都有可用的方法和属性。

在本教程中，我们将学习字符串原始值和String对象之间的区别，字符串的索引方式，如何访问字符串中的字符，以及字符串常用的属性和方法。

字符串原始值和字符串对象

首先，我们将澄清两种字符串类型。JavaScript 区分字符串原始值（不可变数据类型）和String对象。

为了测试两者之间的区别，我们将初始化一个字符串原始值和一个字符串对象。

// 初始化一个新的字符串原始值
const stringPrimitive = "一个新的字符串。";
// 初始化一个新的字符串对象
const stringObject = new String("一个新的字符串。");

我们可以使用typeof运算符来确定一个值的类型。在第一个示例中，我们只是将一个字符串赋给一个变量。

typeof stringPrimitive;

string

在第二个示例中，我们使用new String()来创建一个字符串对象，并将其赋给一个变量。

typeof stringObject;

object

大多数情况下，您将创建字符串原始值。JavaScript 能够访问和利用String对象包装器的内置属性和方法，而无需将您创建的字符串原始值实际转换为对象。

虽然这个概念一开始可能有点具有挑战性，但您应该意识到原始值和对象之间的区别。基本上，所有字符串都有可用的方法和属性，在后台，JavaScript 将在每次调用方法或属性时执行从原始值到对象的转换和再转换。

字符串的索引方式

字符串中的每个字符都对应一个索引号，从0开始。

为了演示，我们将创建一个值为How are you?的字符串。

字符串中的第一个字符是H，对应索引0。最后一个字符是?，对应11。空格字符也有索引，分别为3和7。

能够访问字符串中的每个字符给了我们许多处理和操作字符串的方式。

访问字符

我们将演示如何访问How are you?字符串中的字符和索引。

"How are you?";

使用方括号表示法，我们可以访问字符串中的任何字符。

"How are you?"[5];

r

我们还可以使用charAt()方法，通过索引号作为参数返回字符。

"How are you?".charAt(5);

r

或者，我们可以使用indexOf()来返回第一次出现字符的索引号。

"How are you?".indexOf("o");

1

尽管"o"在How are you?字符串中出现了两次，indexOf()将返回第一次出现的索引号。

lastIndexOf()用于查找最后一次出现的位置。

"How are you?".lastIndexOf("o");

9

对于这两种方法，您还可以在字符串中搜索多个字符。它将返回实例中第一个字符的索引号。

"How are you?".indexOf("are");

4

另一方面，slice()方法返回两个索引号之间的字符。第一个参数将是起始索引号，第二个参数将是应该结束的索引号。

"How are you?".slice(8, 11);

you

请注意，11是?，但?不是返回输出的一部分。slice()将返回介于两个参数之间的内容，但不包括最后一个参数。

如果不包括第二个参数，slice()将返回从参数到字符串末尾的所有内容。

"How are you?".slice(8);

you?

总之，charAt()和slice()将帮助根据索引号返回字符串值，而indexOf()和lastIndexOf()将相反，根据提供的字符串字符返回索引号。

寻找字符串的长度

使用 length 属性，我们可以返回字符串中字符的数量。

"How are you?".length;

12

请记住，length 属性返回的是实际字符数量，从 1 开始计数，因此结果是 12，而不是最终索引号，最终索引号从 0 开始到 11 结束。

转换为大写或小写

两个内置方法 toUpperCase() 和 toLowerCase() 是 JavaScript 中格式化文本和进行文本比较的有用方式。

toUpperCase() 会将所有字符转换为大写字符。

"How are you?".toUpperCase();

HOW ARE YOU?

toLowerCase() 会将所有字符转换为小写字符。

"How are you?".toLowerCase();

how are you?

这两种格式化方法不需要额外的参数。

值得注意的是，这些方法不会改变原始字符串。

分割字符串

JavaScript 有一个非常有用的方法，可以通过一个字符来分割字符串，并创建一个新的数组。我们将使用 split() 方法通过空格字符 " " 来分割数组。

const originalString = "How are you?";
// 通过空格字符分割字符串
const splitString = originalString.split(" ");
console.log(splitString);

[ 'How', 'are', 'you?' ]

现在我们在 splitString 变量中有了一个新的数组，我们可以通过索引号访问每个部分。

splitString[1];

are

如果给定一个空参数，split() 将创建一个以逗号分隔的数组，其中包含字符串中的每个字符。

通过分割字符串，您可以确定句子中有多少个单词，并将该方法用作确定人们的名字和姓氏的一种方式，例如。

去除空格

JavaScript 的 trim() 方法会从字符串的两端去除空格，但不会去除中间的空格。空格可以是制表符或空格。

const tooMuchWhitespace = "     How are you?     ";
const trimmed = tooMuchWhitespace.trim();
console.log(trimmed);

How are you?

trim() 方法是执行去除多余空格的常见任务的简单方式。

查找和替换字符串值

我们可以使用 replace() 方法搜索字符串中的值，并用新值替换它。第一个参数将是要查找的值，第二个参数将是要替换它的值。

const originalString = "How are you?"
// 用 "Where" 替换第一个实例的 "How"
const newString = originalString.replace("How", "Where");
console.log(newString);

Where are you?

除了能够用另一个字符串值替换值之外，我们还可以使用正则表达式使 replace() 更加强大。例如，replace() 只影响第一个值，但我们可以使用 g（全局）标志来捕获所有实例的值，以及 i（不区分大小写）标志来忽略大小写。

const originalString = "Javascript is a programming language. I'm learning javascript."
// 搜索字符串中的 "javascript" 并替换为 "JavaScript"
const newString = originalString.replace(/javascript/gi, "JavaScript");
console.log(newString);

JavaScript is a programming language. I'm learning JavaScript.

这是一个非常常见的任务，利用了正则表达式。访问 Regexr 以练习更多正则表达式的示例。

结论

字符串是最常用的数据类型之一，我们可以做很多事情。

在本教程中，我们学习了字符串原始值和 String 对象之间的区别，字符串的索引方式，以及如何使用字符串的内置方法和属性来访问字符、格式化文本以及查找和替换值。

要了解更多关于字符串的概述，请阅读教程 “如何在 JavaScript 中使用字符串”。