JavaScript String 字符串对象常用操作方法详解
本文系统总结 JavaScript 中 String 对象的常用操作方法。涵盖字符串的创建方式、通过索引访问字符(charAt、charCodeAt)、查找子串位置(indexOf、lastIndexOf)、截取子串(slice、substring、substr)及分割字符串(split)。此外,还详细解析了大小写转换、去除空格(trim)以及基于正则表达式的模式匹配方法(match、search、replace),并包含各方法的参数说明与代码示例。
String 对象的创建与访问
String 对象的创建方式主要有两种:一是使用构造函数 String() 进行实例化;二是直接声明基本字符串值。需要注意的是,String 对象的所有方法同样可以在所有基本字符串值上直接调用。
var str = new String();
var str = new String('hello world');//初始化str,str.length = 11;
访问字符串内容主要通过索引实现,常用方法包括 charAt() 和方括号 []。这两种方式均接受一个参数,即字符在字符串中的位置索引,并返回该位置的单个字符。
var strValue = new String('hello world');
console.log(strValue.charAt(1));//e
console.log(strValue[1]);//e,IE7及以下版本使用这种方式,会返回undefined
若需获取字符对应的 Unicode 编码值,可使用 charCodeAt() 方法。该方法同样接受一个参数,即字符位置索引,并返回该位置字符的编码数值。
var strValue = new String('hello world');
console.log(strValue.charCodeAt(1));//101
字符串位置查找方法
查找子字符串在字符串中的位置可使用 indexOf() 方法。该方法接受两个参数:第一个是指定的子字符串,第二个是开始检索的起始位置。若找到匹配项,则返回其索引;若未找到,则返回 -1。
var str = 'hello world'
str.indexOf('l');//2,返回找到的第一个字符的位置
str.indexOf('l',6);//9
lastIndexOf() 方法的功能与 indexOf() 类似,区别在于搜索方向。lastIndexOf() 从字符串的末尾向前搜索指定的子字符串,并返回第一个匹配项的索引。
字符串拼接与截取
concat() 方法用于扩展字符串。它可以接受任意数量的参数,将当前字符串与一个或多个其他字符串拼接起来,并返回拼接后的新字符串副本。
var str = new String('hello');
var result = str.concat(' world');
console.log(result);//hello world
typeof result//"string"
获取子字符串的方法包括 slice()、substr() 和 substring()。这三个方法都会返回被操作字符串的子字符串副本,且都接受 1 或 2 个参数,采用前闭后开的区间 [) 规则。其中 slice() 方法根据起始位置和结束位置截取字符串。
var str = 'hello';
str.slice(0,2);//"he",第一个参数指定字符串开始的位置,第二个参数表示字符串到哪里结束
str.slice(-3);//"llo",o代表-1,依次倒数,-3代表倒数第三个的l
str.slice(-2,-1);//"l",同理,-2代表倒数第二个l,-1代表倒数第一的o
substring() 方法的功能与 slice() 类似,同样根据起始位置和结束位置截取字符串。但需要注意的是,substring() 会将所有负值参数转换为 0。
var str = 'hello';
str.substring(0,2);//"he",此时的参数意义同str.slice(0,2)
str.substring(-3);//"hello",substring()方法会把所有负值参数转换为0
str.substring(-3,-2);//"",同上
substr() 方法的两个参数含义不同:第一个参数指定字符串的开始位置,第二个参数指定返回的字符个数。若第二个参数为负值,substr() 会将其转换为 0。
var str = 'hello';
str.substr(1,2);//"el",第一个参数指定字符串的开始位置,第二个参数指定的则是返回的字符个数
str.substr(-3);//"llo",此时的参数意义同str.slice(-3)
str.substr(-3,-1);//"",substr()方法会将负的第二个参数转换为0
关于 substr() 方法传递负值时的行为,在旧版 IE 浏览器中存在兼容性问题,它会返回原始字符串。该问题在 IE9 版本中已得到修复。
字符串分割与格式转换
split() 方法用于将字符串转换为数组。它基于指定的分隔符(可以是字符串或 RegExp 对象)将字符串分割成多个子字符串,并将结果放入数组中。该方法可接受可选的第二个参数,用于指定返回数组的最大长度,最终返回数组对象。
var color = 'blue,red,orange';
color.split();//["red,blue,orange"],长度为1
color.split(',');//["blue", "red", "orange"],长度为3
var color = 'blue-red-orange';
color.split('-');//["blue", "red", "orange"],长度为3
color.split(',',2);//["blue", "red"]
字符串的大小写转换可通过 toLowerCase() 和 toUpperCase() 方法实现。前者将字符串转换为小写,后者将字符串转换为大写。
var str = 'hello';
str.toUpperCase();//"HELLO"
str.toLowerCase();//"hello"
trim() 方法用于删除字符串前置以及后缀的所有空格,并返回处理后的结果副本。此方法不会修改原始字符串。
var str = ' hello world ';
str.trim()//"hello world"
基于正则表达式的模式匹配
match() 方法是字符串的模式匹配方法,只接受一个参数:要么是正则表达式,要么是 RegExp() 对象。它返回一个数组,数组中的第一项是与整个模式匹配的字符串,后续项(如果有)保存着正则表达式捕获组匹配的字符串。其功能本质上与调用 RegExp 对象的 exec() 方法相同。
var text = 'cat, bat, sat, fat';
var pattern = /.at/;
var matches = text.match(pattern);
matches // ["cat"]
matches.input // "cat, bat, sat, fat"
matches.index // 0
search() 方法用于查找匹配项,参数与 match() 相同。它返回字符串中第一个匹配项的索引,如果没有匹配项则返回 -1。search() 方法始终从前向后进行查找。
var text = 'cat, bat, sat, fat';
var pattern = /at/;
text.search(pattern) // 1
replace() 方法接收两个参数:第一个参数可以是 RegExp 对象或字符串(字符串不会转换成正则表达式);第二个参数可以是字符串或函数。如果第一个参数是字符串,则只替换第一个子字符串;若要替换所有子字符串,需提供指定全局标志 (g) 的正则表达式。如果第二个参数是字符串,可使用特殊字符序列(如 $$, $&, $', $`, $n, $nn)将正则表达式操作得到的值插入结果字符串。如果第二个参数是函数,传递给函数的参数依次是模式的匹配项、匹配项在字符串中的位置以及原始字符串。在正则表达式定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项、第一个捕获组的匹配项,以此类推,但最后两个参数分别是模式的匹配项在字符串中的位置和原始字符串。
| 字符序列 | 替换文本 |
|---|---|
| $$ | $ |
| $& | 匹配整个pattern中的子字符串 |
| $' | 匹配的子字符串之后的子字符串 |
| $` | 匹配的字符串之前的子字符串 |
| $n | 匹配第n个捕获组中的子字符串,$1 |
| $nn | 匹配第nn个捕获组的子字符串,$01 |
var text = 'xxx-love-xxx';
var pattern = /xxx/g;
var result = text.replace(pattern,'2')
result// "2-love-2"
text.replace(/(xxx)-\w{4}-(xxx)/g,'I love YOU');//"I love YOU"
var text = 'xxx-love-xxx';
var pattern1 = /xxx/g;
var result = text.replace(pattern1,'$$')
result// "$-love-$"
var result = text.replace(pattern1,'$&2')
result//"xxx2-love-xxx2"
var result = text.replace(pattern1,'$\'')
result//"-love-xxx-love-"
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
