JavaScript 字符串操作函数详解与实战应用
本文系统总结了 JavaScript 中常用的字符串操作函数，涵盖类型转换、分割、长度获取、子串查询、替换、字符提取、连接、截取、大小写转换及正则匹配等核心功能。通过对比不同方法的参数差异与返回值，结合前端笔试真题示例，帮助开发者掌握简洁高效的字符串处理技巧，避免依赖冗长的循环逻辑，提升代码质量与面试表现。
JavaScript 字符串操作函数详解与实战应用
本文汇总了 JavaScript 中常用的字符串操作函数及其具体用法，供读者参考学习。
在前端实习生招聘的笔试中，字符串处理是高频考点，例如去哪儿网、淘宝等公司的试题均涉及此类内容。从考官视角来看，这类题目旨在考察开发者在不查阅文档或搜索引擎的情况下，能否使用简洁代码实现功能。许多开发者虽日常频繁使用字符串处理函数，却难以准确记忆其用法，导致在解题时不得不依赖外部资料或编写多层嵌套的 for 循环进行遍历。这种过度使用循环的情况往往暗示解题思路存在偏差。掌握这些基础且关键的字符串处理知识，对于求职和日常开发都具有重要意义。以下将对相关函数逐一进行梳理，如有遗漏欢迎补充或私信交流。
字符串转换与分割方法
1、字符串转换
字符串转换是基础且必要的操作，可将任意类型数据转换为字符串。实现方式主要有以下三种：
var num= 19; // 19
var myStr = num.toString(); // "19"
此外，还可以采用如下方式实现：
var num= 19; // 19
var myStr = String(num); // "19"
或者使用更简洁的写法：
var num= 19; // 19
var myStr = "" +num; // "19"
2、字符串分割
字符串分割用于将一个字符串拆分为多个子字符串。JavaScript 提供了便捷的 split() 函数，示例如下：
var myStr = "I,Love,You,Do,you,love,me";
var substrArray = myStr .split(",");
// ["I", "Love", "You", "Do", "you", "love", "me"];
var arrayLimited = myStr .split(",", 3);
// ["I", "Love", "You"];
split() 函数的第二个参数用于指定返回字符串数组的最大长度。
获取长度与子串查询技巧
3、获取字符串长度
获取字符串长度是开发中的常见需求，实现方式非常简单，如下所示：
var myStr = "I,Love,You,Do,you,love,me";
var myStrLength = myStr.length; //25
4、查询子字符串
许多开发者容易忽略 JavaScript 内置的这几个方法或其具体用法，导致在解题时不得不使用嵌套 for 循环。
第一个函数是 indexOf()，它从字符串开头开始查找，找到则返回对应索引，未找到则返回 -1。示例如下：
var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.indexOf("you"); // 7 ,基于0开始,找不到返回-1
第二个函数是 lastIndexOf()，它从字符串末尾开始向前查找，找到则返回对应索引，未找到则返回 -1。示例如下：
var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.lastIndexOf("you"); // 14
上述两个函数均支持第二个可选参数，用于指定开始查找的位置。
字符串替换与字符提取
5、字符串替换
除了查找，题目常要求将查到的字符串替换为指定内容，例如：
var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace("love","hate");
//"I,hate,you,Do,you,love,me"
默认情况下，replace() 仅替换第一次匹配到的字符串。若需全局替换，需使用正则表达式的全局标识 g，例如：
var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace(/love/g,"hate");
//"I,hate,you,Do,you,hate,me"
更多详细信息可参考：https://www.jb51.net/w3school/js/jsref_replace.htm
6、查找给定位置的字符或其字符编码值
若要查找指定位置的字符，可使用以下函数：
var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charAt(8);// "o",同样从0开始
此外，还有一个相关函数用于查找指定位置字符的编码值，例如：
var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charCodeAt(8); //111
字符串连接与截取提取
7、字符串连接
字符串连接操作可通过加法运算符简单实现，例如：
var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1 + str2 + "Yes!";
//"I,love,you!Do,you,love,me?Yes!"
JavaScript 也提供了内置的连接函数，例如：
var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1.concat(str2);
//"I,love,you!Do,you,love,me?"
其中，concat() 函数支持多个参数，可传递多个字符串以完成拼接。
8、字符串切割和提取
JavaScript 提供了三种从字符串中抽取和切割的方法，示例如下：
第一种方法是使用 slice()：
var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.slice(1,5);//",lov"
第二种方法是使用 substring()：
var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substring(1,5); //",lov"
第三种方法是使用 substr()：
var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substr(1,5); //",love"
与前两种方法不同，substr() 的第二个参数表示截取的字符串最大长度，如上述结果所示。
大小写转换与正则匹配
9、字符串大小写转换
常用的转换为大写或小写字符串的函数如下：
var myStr = "I,love,you,Do,you,love,me";
var lowCaseStr = myStr.toLowerCase();
//"i,love,you,do,you,love,me";
var upCaseStr = myStr.toUpperCase();
//"I,LOVE,YOU,DO,YOU,LOVE,ME"
10、字符串匹配
字符串匹配可能需要对正则表达式有一定了解。首先来看 match() 函数：
var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = myStr.match(pattern);//["love"]
console.log(result .index);//2
console.log(result.input );//I,love,you,Do,you,love,me
如示例所示，match() 函数在字符串上调用，并接受一个正则表达式参数。再看第二个例子，使用 exec() 函数：
var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = pattern .exec(myStr);//["love"]
console.log(result .index);//2
console.log(result.input );//I,love,you,Do,you,love,me
exec() 函数与 match() 的区别仅在于调用对象不同：match() 在字符串上调用并传递正则，而 exec() 在正则上调用并传递字符串。对于上述两种方法，匹配结果均返回第一个成功匹配的字符串，若匹配失败则返回 null。
再来看一个类似的方法 search()，例如：
var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = myStr.search(pattern);//2
该方法仅返回匹配到的下标，若匹配失败则返回 -1。
字符串比较与实战案例
11、字符串比较
比较两个字符串时，规则是按照字母表顺序进行比较，例如：
var myStr = "chicken";
var myStrTwo = "egg";
var first = myStr.localeCompare(myStrTwo); // -1
first = myStr.localeCompare("chicken"); // 0
first = myStr.localeCompare("apple"); // 1
12、举例
最后，我们来看一道前端笔试题，来自去哪儿网，相信许多人都做过这道题。题目要求：编写一个 getSuffix 函数，用于获取输入参数的后缀名，例如输入 abcd.txt，返回 txt。附上我的答案：
function getSuffix(file){
return file.slice(file.lastIndexOf(".") + 1,file.length);
}
结束语
JavaScript 中的字符串操作函数远不止上述几种，但所列出的均为非常常用的内容。如有需要补充的地方，欢迎指正！希望读者在阅读后，面对字符串相关的笔试面试题时能够从容应对。
希望本文所述内容对大家的 JavaScript 程序设计有所帮助。
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式：声明、表达式与箭头函数
2026-11-05 13:50:55