JavaScript之字符串的常用方法汇总

📖 toLowercase()/toUppercase()

📖 trim()

---

高质量前端博主，点个关注不迷路🌸🌸🌸**！**

字符串的常用方法详细汇总

---

本篇文章，我们一同了解一下在JavaScript中关于字符串的常见方法：

📖 str.length

第一个最简单，length方法返回字符串的长度，虽然它最简单，但是使用的频率很高，我们用代码简单做演示：

很显然长度应该是7：

---

**📖 str.**charAt(index)

str.charAt(index)方法表示获取索引值为index的字符，注意获取到的是字符，不是字符串，字符串由字符组成。

我们用代码演示一下：

注意，字符串与数组类似，索引都是从0开始，因此我们获取的应该是第四个字符：的，

---

📖 indexOf(char)

IndexOf(char)方法表示获取字符char的下标，传参是一个字符，同时注意以下两种特殊情况：

(1) 传入的字符不存在，则返回 -1

(2) 传入的字符多次出现，则返回第一次出现的位置

我们为大家一一演示这些情况：

上面分别对应了三种情况，于是我们看到如下的运行结果：

---

📖 concat(string)

concat(string1，string2，…)方法用于把传入的所有字符串拼接在原来的字符串的后面，形成并返回一个新的更长的字符串。

有人要说了，+ 号不是也可以拼接吗？答案是肯定的，因此本方法对比用 + 号连接反而略显得麻烦了一些，大家了解即可，平时用加号来拼接还是更多一些。

用代码演示一下：

可以看到，两种拼接方式没有区别：

值得一提的是，concat可以传入多个字符串，并把它们按照传入的顺序依次拼接在原来的字符串后面，我们举个例子：

这样拼接了三个字符串，我们看看拼好之后是不是我们想的那样：

---

📖 includes(string)

includes(string)方法用于检测本字符串是否包含传入的子字符串string，是则返回true，否则返回false。

我们用一个例子来看看它是怎么用的：

这个例子就和我们平时的一些需求挂钩了，我们定义了一个表示qq邮箱格式的子字符串，之后对每一个邮箱字符串调用includes方法，如果包含qq邮箱格式子字符串，就返回true，于是就形成了一个简单的筛选邮箱格式的功能，运行结果如下：

---

📖 match(regex string)

match(reg_str)方法用于对字符串按照传入的正则表达式进行匹配，并返回匹配的结果的一个对象数组，数组的第一个元素是匹配成功的字符串，其他元素则是对匹配的一些其他信息，若匹配不上，则返回一个空对象。

match方法，我这里就不过多介绍了，它已经在我的另一篇讲**JavaScript正则表达式的博客**中给大家详细的讲解过了，我们用一个例子回顾一下：

可以看到如下运行结果：

由于456@163.com匹配不上，因此返回空对象。

---

📖 replace(old_str,new_str)

replace(old_str,new_str)方法用于对目标字符串执行部分替换功能，被替换的部分是参数old_str，新的部分是new_str，返回替换后的新字符串。

我们用代码演示一下：

我们看一下运行的效果：

这个例子中有一个细节，大家可以看到原来的字符串有两个"跳探戈"，但是最终只有第一个被替换了，第二个还是跳探戈，因此大家要记住这个细节：

replace()方法只会替换第一次出现的符合传入的旧字符串的部分，不会对第二次出现的旧部分进行替换。

---

📖 split(string)

split()方法用于对目标字符串执行以传入的字符或字符串为分隔符的分割工作，分割后形成并一个字符串数组。

其中最常用的是以空格、逗号做分隔符的分割，我们举个例子：

此时arr就是以逗号，为分隔符分割后的字符串数组，我们看看arr打印出来是什么：

此外，分隔符也可以不是单个字符，而是字符串做分隔符，我们再举个例子：

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门即可获取

学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

[外链图片转存中…(img-s7spG8X4-1711673597241)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门即可获取

[外链图片转存中…(img-KXaZ1wVy-1711673597241)]