JavaScript 字符串操作详解:创建、截取与查找方法

作者:闭包旅人

时间:2026-10-28

浏览:465

本文详细介绍JavaScript中字符串的核心操作方法。涵盖字符串的创建与长度获取,深入解析charAt、slice、substring和substr在截取子串时的参数差异及负数处理规则。同时讲解indexOf和lastIndexOf的查找机制、边界条件及编程注意事项,帮助开发者准确处理文本数据。

文章目录

JavaScript字符串基础与创建

一、字符串

代码如下:

var language = "javascript";
var language = 'javascript';

在JavaScript中,字符串可以通过双引号或单引号进行定义,具体选择取决于个人编码习惯。

字符串对象内置了length属性,用于返回该字符串中包含的字符总数。

代码如下:

var test1 = "teacher";
document.write(test1.length);
// 输出test1的字符串个数:7

若需获取指定索引位置的字符,可以使用charAt()方法。注意索引从0开始,即第一个字符索引为0,第二个为1,依此类推。

代码如下:

var test1 = "teacher";
document.write(test1.charAt(1));
// 运行结果为:e

字符串截取方法:slice、substring与substr

如需提取字符串中的子串,可以使用slice()、substring()或substr()方法。

其中,substring()和slice()均接受两个参数,分别指定起始位置和结束位置。

代码如下:

var test1 = "teacher";
document.write(test1.substring(1)+"<br>");// 输出eacher
document.write(test1.substring(1,4)+"<br>"); //输出eac
document.write(test1.slice(1,4)+"<br>"); //输出eac
document.write(test1.slice(4)+"<br>"); //输出her
document.write(test1 + "<br>");//完整字符串

从上述示例可以看出,substring()和slice()都不会修改原始字符串,而是返回一个新的子串。

这两者的主要区别在于对负数参数的处理方式不同。

对于slice(),负数参数表示从字符串末尾向前计数;而对于substring(),负数会被视为0,并且该方法会将两个参数中较小的作为起始位,较大的作为结束位。

例如,substring(2,-3)等同于substring(2,0),进而等同于substring(0,2)。

代码如下:

var test1 = "teacher";
document.write(test1.substring(2,-3)+"<br>"); //te
document.write(test1.substring(2,0)+"<br>"); //te
document.write(test1.substring(0,2)+"<br>"); //te
document.write(test1.slice(2,-3)+"<br>"); //ac
document.write(test1 + "<br>"); //teacher

接下来通过示例说明substring()和substr()的区别。

代码如下:

var tt,ss;
var s = "hellobeijing";
tt = s.substring(2,8)+"<br>";
ss = s.substr(2,8);
document.write(tt);//输出:llobeij 输出下标2到下标8之间的字符
document.write(ss); //输出:llobeiji (输出下标2后的8个字符)

关于更多用法,可参考其他技术博客中的实例。

字符串查找:indexOf与lastIndexOf详解

在字符串搜索方面,JavaScript提供了indexOf()和lastIndexOf()两个方法。

代码如下:

var s = "woaibeijing";
dd = s.indexOf("e")+"<br>";//从前往后
ee = s.indexOf("e",3)+"<br>";//可选参数,从第几个字符往后查找
ff = s.lastIndexOf("e")+"<br>";//从后往前
gg = s.lastIndexOf("e",3)+"<br>"; //可选参数,从第几个字符往前查找
hh = s.lastIndexOf("H")+"<br>";
document.write(dd);
document.write(ff);
document.write(ee);
document.write(gg);
document.write(hh);

此外,关于indexof()和lastindexof()函数的使用方法,建议参考本文:https://www.jb51.net/article/44921.htm。

JS中的indexOf和lastIndexOf是处理字符串查找的高效工具,下面对其定义、用法、注意事项及使用建议进行介绍。

1、strObj.indexOf(subString[, startIndex])

功能:返回源字符串内第一次出现指定子字符串的首个字符在源字符串中的索引值(源字符串内第n个字符的索引值为n-1),返回值为整数。

参数含义:

strObj是源字符串,必选项。

subString是在源字符串对象中查找的子字符串,必选项。

startIndex是开始索引值,indexOf函数是从源字符串的索引值为startIndex的字符(即第startIndex+1个字符)开始查找,可选项。省略时,从源字符串索引值为0的字符(即第1个字符)开始查找。

实例分析:

用法1(不指定startIndex值):var i="huoshandao.com".indexOfOf("a"):则i=5 相当于var i="huoshandao.com".indexOf("a",0) 用法2(指定startIndex值):var i="huoshandao.com".indexOf("a",6):则i=8 提示:可以用alert(i);语句测试结果,以下例子也一样。

注意事项

1)strObj既可以是字符串,也可以是字符串变量。 [例子] strObj为字符串:var i="huoshandao.com".indexOf("."): strObj为字符串变量:var str="huoshandao.com";var i=str.indexOf("."); 2)subString不能为空字符串,如果为空字符串,返回值为0,但可以是空格。 [例子] subString为空字符串:var i="huo shan dao".indexOf(""):则i=0 subString为空格字符串:var i="huo shan dao".indexOf(" "):则i=3 3)第1个字符的startIndex值是0,是最小索引值;第2个字符的startIndex值是1;最后一个字符的startIndex值则是源字符串长度减1,是最大索引值。 4)如果没有找到子字符串,则返回 -1。 [例子] var i="huoshandao.com".indexOf("huosan"):则i=-1 5)如果startIndex是负数,则相当于startIndex等于0的情况。如果它大于最大索引值,则相当于startIndex等于最大索引值的情况。 [例子] startIndex为负数: var i="huoshandao.com".indexOf(".",-3);则i=10 与var i="huoshandao.com".indexOf(".",0);结果一样 startIndex大于等于字符串长度:var i="huoshandao.com_".indexOf("_",16);则i=-1 与var i="huoshandao.com_".indexOf("_",14);i=14

2、strObj.lastIndexOf(subString[, startIndex])

indexOf 函数是从左向右查找,但实际应用中我们有时想得到从右向左出现某个字符或字符串的首个字符索引值,针对这种情况,JS给出另外一个函数 lastIndexOf来解决这个问题,使用方法和indexOf相似,只是它从右向左查找而已,具体就不再重复,简单举几个例子,和indexOf作比较:

例1:var i="huo.shan.dao.com".lastIndexOf(".");则i=12而var i="huo.shan.dao.com".indexOf(".");的i=3 例2:var i="huoshandao.com_".lastIndexOf("_",16);则i=14而var i="huoshandao.com_".indexOf("_",16);则i=-1

3、使用建议

为了避免出乎意料的结果,除非有特殊用途,建议遵循以下原则:

1、startIndex为非负数,并且不大于最大索引值。如果startIndex是变量,要先判断其值是否在这个范围内。 2、如果子字符串subString是变量的话,要先判断其是否为空再使用indexOf或lastIndexOf函数。 3、输入子字符串时要特别注意全角字符和半角字符的区别。 4、注意indexOf和lastIndexOf里面的大小写,JS对大小写非常敏感。建议用Dreamweaver编程,如果函数名大小写写错的话,函数颜色是黑色,写对的话则会变成另外一种颜色。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章