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

介绍

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

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

字符串基元和字符串对象

首先，我们将阐明这两种类型的字符串。 JavaScript 区分 字符串原语 、不可变数据类型和 String 对象。

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

// Initializing a new string primitive
const stringPrimitive = "A new string.";

// Initializing a new String object
const stringObject = new String("A new string.");

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

typeof stringPrimitive;

Outputstring

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

typeof stringObject;

Outputobject

大多数时候，您将创建字符串原语。 JavaScript 能够访问和利用 String 对象包装器的内置属性和方法，而无需实际将您创建的字符串原语更改为对象。

虽然这个概念一开始有点挑战性，但您应该知道原始和对象之间的区别。本质上，所有字符串都有可用的方法和属性，并且每次调用方法或属性时，JavaScript 都会在后台执行到对象的转换并返回到原始类型。

字符串是如何被索引的

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

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

H	o	w		a	r	e		y	o	u	?
0	1	2	3	4	5	6	7	8	9	10	11

字符串中的第一个字符是 H，它对应于索引 0。最后一个字符是?，对应11。空白字符也有一个索引，位于 3 和 7。

能够访问字符串中的每个字符为我们提供了多种处理和操作字符串的方法。

访问字符

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

"How are you?";

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

"How are you?"[5];

Outputr

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

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

Outputr

或者，我们可以使用 indexOf() 根据字符的第一个实例返回索引号。

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

Output1

尽管“o”在 How are you? 字符串中出现了两次，但 indexOf() 将获得第一个实例。

lastIndexOf() 用于查找最后一个实例。

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

Output9

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

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

Output4

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

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

Outputyou

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

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

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

Outputyou?

总而言之，charAt() 和 slice() 将有助于根据索引号返回字符串值，而 indexOf() 和 lastIndexOf() 将做相反的事情，返回基于索引号的索引号提供的字符串字符。

查找字符串的长度

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

"How are you?".length;

Output12

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

转换为大写或小写

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

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

"How are you?".toUpperCase();

OutputHOW ARE YOU?

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

"How are you?".toLowerCase();

Outputhow are you?

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

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

拆分字符串

JavaScript 有一个非常有用的方法来按字符分割字符串并从这些部分中创建一个新的 array。我们将使用 split() 方法用空格字符分隔数组，用 " " 表示。

const originalString = "How are you?";

// Split string by whitespace character
const splitString = originalString.split(" ");

console.log(splitString);

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

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

splitString[1];

Outputare

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

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

修剪空白

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

const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);

OutputHow are you?

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

查找和替换字符串值

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

const originalString = "How are you?"

// Replace the first instance of "How" with "Where"
const newString = originalString.replace("How", "Where");

console.log(newString);

OutputWhere are you?

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

const originalString = "Javascript is a programming language. I'm learning javascript."

// Search string for "javascript" and replace with "JavaScript"
const newString = originalString.replace(/javascript/gi, "JavaScript");

console.log(newString);

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

这是使用正则表达式的一项非常常见的任务。访问 Regexr 练习更多正则表达式示例。

结论

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

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

有关字符串的更一般概述，请阅读教程“如何在 JavaScript 中使用字符串 ”。