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

简介

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

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

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

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

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

js 复制代码
// 初始化一个新的字符串原始值
const stringPrimitive = "一个新的字符串。";

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

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

js 复制代码
typeof stringPrimitive;
js 复制代码
string

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

js 复制代码
typeof stringObject;
js 复制代码
object

大多数情况下,您将创建字符串原始值。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。空格字符也有索引,分别为37

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

访问字符

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

js 复制代码
"How are you?";

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

js 复制代码
"How are you?"[5];
js 复制代码
r

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

js 复制代码
"How are you?".charAt(5);
js 复制代码
r

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

js 复制代码
"How are you?".indexOf("o");
js 复制代码
1

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

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

js 复制代码
"How are you?".lastIndexOf("o");
js 复制代码
9

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

js 复制代码
"How are you?".indexOf("are");
js 复制代码
4

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

js 复制代码
"How are you?".slice(8, 11);
js 复制代码
you

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

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

js 复制代码
"How are you?".slice(8);
js 复制代码
you?

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

寻找字符串的长度

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

js 复制代码
"How are you?".length;
plaintext 复制代码
12

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

转换为大写或小写

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

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

js 复制代码
"How are you?".toUpperCase();
plaintext 复制代码
HOW ARE YOU?

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

js 复制代码
"How are you?".toLowerCase();
plaintext 复制代码
how are you?

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

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

分割字符串

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

js 复制代码
const originalString = "How are you?";

// 通过空格字符分割字符串
const splitString = originalString.split(" ");

console.log(splitString);
plaintext 复制代码
[ 'How', 'are', 'you?' ]

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

js 复制代码
splitString[1];
plaintext 复制代码
are

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

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

去除空格

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

js 复制代码
const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);
plaintext 复制代码
How are you?

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

查找和替换字符串值

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

js 复制代码
const originalString = "How are you?"

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

console.log(newString);
plaintext 复制代码
Where are you?

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

js 复制代码
const originalString = "Javascript is a programming language. I'm learning javascript."

// 搜索字符串中的 "javascript" 并替换为 "JavaScript"
const newString = originalString.replace(/javascript/gi, "JavaScript");

console.log(newString);
plaintext 复制代码
JavaScript is a programming language. I'm learning JavaScript.

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

结论

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

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

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

相关推荐
开心工作室_kaic2 分钟前
ssm102“魅力”繁峙宣传网站的设计与实现+vue(论文+源码)_kaic
前端·javascript·vue.js
放逐者-保持本心,方可放逐2 分钟前
vue3 中那些常用 靠copy 的内置函数
前端·javascript·vue.js·前端框架
IT古董3 分钟前
【前端】vue 如何完全销毁一个组件
前端·javascript·vue.js
Henry_Wu0015 分钟前
从swagger直接转 vue的api
前端·javascript·vue.js
奋飞安全6 分钟前
初试js反混淆
开发语言·javascript·ecmascript
guoruijun_2012_46 分钟前
fastadmin多个表crud连表操作步骤
android·java·开发语言
浪里个浪的10249 分钟前
【C语言】计算3x3矩阵每行的最大值并存入第四列
c语言·开发语言·矩阵
@东辰16 分钟前
【golang-技巧】-自定义k8s-operator-by kubebuilder
开发语言·golang·kubernetes
乐悠小码23 分钟前
数据结构------队列(Java语言描述)
java·开发语言·数据结构·链表·队列
史努比.24 分钟前
Pod控制器
java·开发语言