JavaScript字符串操作核心方法详解与笔试实战
本文系统梳理JavaScript中字符串处理的核心方法，涵盖类型转换、分割、长度获取、子串查询、替换、截取、大小写转换及正则匹配等常用操作。结合前端笔试常见题型，解析indexOf、split、replace、slice等函数的参数细节与使用场景，帮助开发者夯实基础，提升代码简洁性与面试应对能力。
引言：字符串处理在前端笔试中的重要性
在前端实习生的招聘笔试中，字符串处理是高频考点，例如去哪儿网、淘宝等公司的试题中频繁出现。对于经常参与笔试或有过相关经验的开发者而言，字符串操作无疑是前端招聘中最常见的题型之一。
这类试题的设计逻辑在于：考官关注的并非你是否知道某个方法，而是能否在不查阅手册、指南或搜索引擎的情况下，用简洁的方式写出正确答案。
遗憾的是，许多开发人员（包括作者本人）对常用字符串处理函数的用法记忆不够牢固，遇到问题时往往不得不求助于在线文档或搜索引擎。
这种依赖外部资料的做法导致基础知识掌握不扎实，在应对相关题目时，常常被迫使用多层嵌套的for循环进行逐个遍历，效率低下且代码冗长。
这是一个警示信号：如果你在解决此类问题时使用了过多的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"
更多详细信息可参考：http://www.w3school.com.cn/jsref/jsref_replace.asp
字符提取、连接与大小写转换
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"
与slice()和substring()不同，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()函数在正则上调用，字符串作为参数传递。对于上述两个方法，匹配成功时返回第一个匹配的字符串，失败则返回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函数，用于获取输入参数的文件后缀名，例如输入
function getSuffix(file){
return file.slice(file.lastIndexOf(".") + 1,file.length);
}
结语
JavaScript字符串操作函数远不止上述几种，但所列均为高频常用方法。若存在遗漏，敬请指正。愿读者在应对字符串相关的笔试与面试时，能够从容不迫、游刃有余。
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01