JS中的String的常用方法
在 JavaScript 中,String
类型提供了大量实用方法,用于字符串的查找、截取、转换、替换等操作。以下是最常用的方法分类整理,附带示例说明:
一、获取字符串信息
1. length
(属性,非方法)
获取字符串的长度(字符个数),注意:中文、符号等每个字符都算 1 个长度。
const str = "Hello 世界";
console.log(str.length); // 7("Hello"5个 + 空格1个 + "世界"2个)
2. charAt(index)
/ str[index]
获取指定索引位置的字符(索引从 0 开始),str[index]
是 ES6 新增的简化写法,兼容性更好。
const str = "abcde";
console.log(str.charAt(2)); // "c"
console.log(str[3]); // "d"
console.log(str.charAt(10)); // ""(索引超出范围时返回空字符串)
3. indexOf(searchValue, fromIndex)
从左到右查找 searchValue
在字符串中首次出现的索引,fromIndex
可选(指定开始查找的位置);未找到返回 -1
。
const str = "abacab";
console.log(str.indexOf("a")); // 0(首次出现的索引)
console.log(str.indexOf("a", 1)); // 2(从索引1开始找,首次a在2)
console.log(str.indexOf("x")); // -1(未找到)
4. lastIndexOf(searchValue, fromIndex)
从右到左查找 searchValue
在字符串中最后出现的索引,未找到返回 -1
。
const str = "abacab";
console.log(str.lastIndexOf("a")); // 4(最后一个a的索引)
console.log(str.lastIndexOf("a", 3)); // 2(从索引3往左找,最后a在2)
二、字符串截取/分割
1. slice(start, end)
截取字符串中 [start, end)
区间的子串(左闭右开,end
可选,默认到字符串末尾);支持负索引(表示从末尾开始数,如 -1
是最后一个字符)。
const str = "Hello World";
console.log(str.slice(1, 4)); // "ell"(索引1到3,不包含4)
console.log(str.slice(6)); // "World"(从6到末尾)
console.log(str.slice(-5)); // "World"(从末尾第5个字符开始)
console.log(str.slice(4, 1)); // ""(start > end 时返回空字符串)
2. substring(start, end)
类似 slice
,但不支持负索引;若 start > end
,会自动交换两者位置。
const str = "Hello World";
console.log(str.substring(4, 1)); // "ell"(自动交换为1-4)
console.log(str.substring(-5)); // "Hello World"(负索引视为0)
3. split(separator, limit)
将字符串按 separator
(分隔符,可为字符串或正则)分割成数组,limit
可选(限制返回数组的最大长度)。
const str = "a,b,c,d";
console.log(str.split(",")); // ["a", "b", "c", "d"](按逗号分割)
console.log(str.split(",", 2)); // ["a", "b"](限制最多2个元素)
console.log(str.split("")); // ["a", ",", "b", ",", "c", ",", "d"](空字符串分割为单个字符)
三、字符串转换
1. toUpperCase()
/ toLowerCase()
将字符串转为全大写 / 全小写,不改变原字符串(字符串是 immutable 不可变类型)。
const str = "Hello World";
console.log(str.toUpperCase()); // "HELLO WORLD"
console.log(str.toLowerCase()); // "hello world"
console.log(str); // "Hello World"(原字符串不变)
2. trim()
/ trimStart()
/ trimEnd()
trim()
:去除字符串首尾的空白字符(空格、换行\n
、制表符\t
等);trimStart()
(原trimLeft()
):只去除开头空白;trimEnd()
(原trimRight()
):只去除结尾空白。
const str = " Hello\nWorld ";
console.log(str.trim()); // "Hello\nWorld"(保留中间换行,去除首尾空白)
console.log(str.trimStart()); // "Hello\nWorld "(只去开头)
3. toString()
/ valueOf()
将其他类型(如 Number
、Boolean
)转为字符串,通常自动调用,无需手动写。
const num = 123;
console.log(num.toString()); // "123"
四、字符串替换
1. replace(searchValue, replacement)
替换字符串中第一个匹配的 searchValue
(可为字符串或正则),返回新字符串(不改变原字符串);若要全局替换,需给正则加 g
修饰符。
const str = "abacab";
// 1. 替换第一个"a"为"x"
console.log(str.replace("a", "x")); // "xbacab"
// 2. 全局替换所有"a"为"x"(用正则 + g)
console.log(str.replace(/a/g, "x")); // "xbxcxb"
// 3. 替换并使用函数(动态生成替换内容)
console.log(str.replace(/a/g, (match, index) => `a${index}`)); // "a0bac0b"
2. replaceAll(searchValue, replacement)
(ES2021+)
全局替换所有匹配的 searchValue
(无需正则 g
修饰符,直接支持字符串),兼容性需注意(现代浏览器/Node.js 15+ 支持)。
const str = "abacab";
console.log(str.replaceAll("a", "x")); // "xbxcxb"(直接全局替换字符串)
五、判断与验证
1. includes(searchValue, fromIndex)
判断字符串是否包含 searchValue
,返回布尔值;fromIndex
可选(指定开始查找的位置)。
const str = "Hello World";
console.log(str.includes("World")); // true
console.log(str.includes("world")); // false(区分大小写)
console.log(str.includes("Hello", 1)); // false(从索引1开始找,不包含Hello)
2. startsWith(searchValue, fromIndex)
判断字符串是否以 searchValue
开头,返回布尔值;fromIndex
可选(指定从哪个位置开始判断“开头”)。
const str = "Hello World";
console.log(str.startsWith("Hello")); // true
console.log(str.startsWith("World", 6)); // true(从索引6开始,以World开头)
3. endsWith(searchValue, length)
判断字符串是否以 searchValue
结尾,返回布尔值;length
可选(指定用字符串的前 length
个字符来判断)。
const str = "Hello World";
console.log(str.endsWith("World")); // true
console.log(str.endsWith("Hello", 5)); // true(用前5个字符"Hello"判断结尾)
六、其他常用方法
1. repeat(count)
将字符串重复 count
次,返回新字符串;count
需为非负整数,0 则返回空字符串。
const str = "ab";
console.log(str.repeat(3)); // "ababab"
console.log(str.repeat(0)); // ""
2. padStart(targetLength, padString)
/ padEnd(targetLength, padString)
padStart
:在字符串开头补全padString
,直到总长度达到targetLength
;padEnd
:在字符串结尾补全,用法类似。
常用于格式化(如时间、编号补零)。
// 补零到长度为2
const num = "5";
console.log(num.padStart(2, "0")); // "05"
console.log(num.padEnd(2, "0")); // "50"// 补全到长度为5,用"ab"填充
const str = "12";
console.log(str.padStart(5, "ab")); // "ab12"(ab重复2次是abab,取前3个字符"aba"?不:5-2=3,ab补3个字符:ab的前3个是"aba"?结果是"aba12")
关键注意点
- 字符串不可变:所有
String
方法都不会修改原字符串,而是返回新字符串; - 索引从0开始:所有涉及“位置”的方法(如
charAt
、slice
)都遵循左到右的 0 基索引; - 区分大小写:
includes
、indexOf
、replace
等方法默认区分大小写,如需不区分,可先转全大写/小写再操作。
这些方法覆盖了日常开发中 90% 以上的字符串处理场景,熟练掌握后能高效解决字符串相关需求。