JavaScript 字符串常用内置方法详解

作者:异步漫步

时间:2026-11-01

浏览:429

本文详细解析了 JavaScript 中处理字符串的常用内置方法,包括字符获取、索引查找、子串截取、大小写转换、替换分割及去空格等。所有字符串方法均不改变原字符串,通过返回值实现操作。掌握这些方法可有效降低开发成本,提升字符串处理效率。

文章目录

一、前言

在前端项目开发中,字符串处理是高频操作。JavaScript 提供了丰富的内置方法,极大降低了开发复杂度。虽然无需深究底层实现,但了解其用法即可高效开发。本文将分析几种最常用的字符串操作方法。

需注意:字符串与数组类似,均通过索引访问。所有字符串常用方法都不会修改原始字符串,而是以返回值的形式返回新结果。

二、常见内置方法

// 转换为字符串
// 方法1
var num=110;
var n=num.toString();    //"110"

// 方法2
var num=111;
var n=String(num);       //"111"

// 方法3
var num=112;
var n="" + num;          //"112"

1. charAt 与 charCodeAt

1) charAt

● 作用:charAt() 用于获取指定索引位置的字符。

● 语法:字符串.charAt(索引)

● 返回值:该索引位置对应的字符。

○ 若索引存在,返回对应字符。

○ 若索引超出范围,返回空字符串 ('')。

var str = 'hello world'
//使用charAt找到字符串中的某一个内容
var index = str.charAt(2)
console.log(index)// l
//查找索引为13的内容,因为没有返回是一共空字符串var index1 = str.charAt(13)
console.log(index1);// ''

2) charCodeAt

● 作用:charCodeAt() 返回指定索引位置字符的 Unicode 编码。

● 语法:字符串.charCodeAt(索引)

● 返回值:该索引位置字符的 Unicode 编码(十进制)。

var str = ' hello world'
1/使用charAt找到字符串中的某一个内容var index = str.charCodeAt(4)
console.log(index)// 111
// 因为0在 unicode 对照表里面存储的是 111,所以就会返回111

2. indexOf 与 lastIndexOf

1) indexOf

● 作用:indexOf 用于查找指定字符在字符串中的索引位置。

● 语法:字符串.indexOf(要查找的字符,开始索引)

● 返回值:

○ 若找到该字符,返回其索引位置。

○ 若未找到,返回 -1。

var str =  'hello world'
//使用indexOf 找到字符串中的某一个内容
var index = str.indexOf('l',0)
console.log(index)// 2返回第一个找到的内容的下标后面的就不查找了
var index1 = str.indexof('w',3)
console.log(index1);116不管从那个索引开始,索引的位置不变
var index2 = str.indexOf('w',7)
console.log(index2);// -1从索引7开始查找没有找到返回-1

2) lastIndexOf

● 作用:lastIndexOf 从后向前查找字符在字符串中的索引位置。

● 语法:字符串.indexOf(要查找的字符,开始索引)

● 返回值:

○ 若找到该字符,返回其索引位置。

○ 若未找到,返回 -1。

var str = 'hello world'
//使用lastIndexOf找到字符串中的某一个内容
var index = str.lastIndexOf('l')
console.log(index)//9返回第一个找到的内容的下标后面的就不查找了,索引的位置不变
var index = str.lastIndexOf('l',8)
console.log(index)//3 返回第一个找到的内容的下标后面的就不查找了,索引的位置不变
var index = str.lastIndexof('w',5)
console.log(index)//-1 从后开始查找,开始的索引是5但是前面没有找到w返回-1

3. substring 与 substr

1) substring

● 作用:substring 用于截取字符串。

● 语法:substring(起始索引,结束索引),包含起始索引,不包含结束索引。

● 返回值:截取后的子字符串。

var str = 'hello world'
//使用substring截取字符串中的某一个内容
var res = str. substring(2,8)
console.log(res); //llo wo

2) substr

● 作用:substr 同样用于截取字符串。

● 语法:substr(起始索引,截取长度)

● 返回值:截取后的子字符串。

var str = 'hello world'
//使用substr截取字符串中的某一个内容
var res = str.substr(2,7)//从索引2开始,截取7个
console.log(res);//llo wor

○ 与 substring 不同,substr 的第二个参数表示截取的字符数量。

4. toLowerCase 和 toUpperCase

● 作用:分别将字符串转换为小写和大写。

● 语法:

○ 字符串.toLowerCase()

○ 字符串.toUpperCase()

var str = 'hello world'
//使用toUppercase转换成大写
var upper = str.toUppercase(console.log(upper)// HELLO WORLD
//使用 toLowercase转换成小写
var lower = upper.toLowerCase()console.log(lower) // hello world

5. slice

● 作用:截取字符串。

● 语法:字符串.slice(起始索引,结束索引)

○ 包含起始索引对应的字符,不包含结束索引对应的字符。

○ 若省略结束索引,则截取至字符串末尾。

● 返回值:截取后的字符串。

var str = ' hello world'
/使用slice截取字符串
var res = str.slice(1,4) //ell
console.log(res);
//没有结束的索引直接截取到末尾
var res1 = str.slice(1)//ello world
console.log(res1);

6. replace

● 作用:用指定内容替换字符串中的部分。

● 语法:字符串.replace(被替换内容,替换内容)

○ 被替换内容 => 原内容

○ 替换内容 => 新内容

● 返回值:替换后的新字符串。

● 注意:默认仅替换从索引 0 开始的第一次匹配,后续匹配不会替换。

var str = 'hello world'
//使用replace替换字符串中的内容
var res -str.replace('l','M')
console.log(res);// heMlo world
console.log(str); // hello world

7. split

● 作用:按指定分隔符将字符串分割为数组。

● 语法:字符串.split('分隔符')

○ 若不传分隔符,返回包含原字符串的单元素数组。

○ 传入空字符串 (''),将按字符逐个分割。

○ 传入空格 (' '),按原字符串中的空格进行分割。

● 返回值:分割后的数组。

//使用split切割成一个数组var res = str.splitO
console.log(res);//E'hello world']
var res1 = str.split('')
console.log(res1);//['h', 'e', 'l','l','o',' ','w','o','r', 'l', 'd']
var res2 = str.splitC(' ')
console.log(res2);//L'hello', 'world']

8. concat

● 作用:用于字符串拼接(合并)。

● 语法:字符串.concat(字符串)

● 返回值:拼接后的新字符串。

var str = 'hello world '
var str1 = 'ni hao'
//使用concat 切割成一个数组
var res = str.concat( 'ni hao' )
console.log(res); // hello world ni hao
var res1 = str.concat(str1)
console.log(res1); // hello world ni hao

9. trim

● 作用:去除字符串首尾的空白字符。

● 语法:字符串.trim()

● 返回值:去除空白后的新字符串。

var str = ' hello world '
//使用trim切割成一个数组
var res = str.trim()
console.log(res); // hello world

10. trimStart / trimLeft

● 作用:去除字符串头部的空白字符。

● 语法:

○ 字符串.trimStart()

○ 字符串.trimLeft()

● 返回值:去除头部空白后的新字符串。

var str = ' hello world '
//使用trimStart后者trimLeft去除头部的空白内容
var res = str.trimstart()
console.log(res);//hello world
var res1 = str.trimLeft()
console.log(res1); //hello world

11. trimEnd / trimRight

● 作用:去除字符串尾部的空白字符。

● 语法:

○ 字符串.trimEnd()

○ 字符串.trimRight()

● 返回值:去除尾部空白后的新字符串。

var str = ' hello world '
//使用trimEnd后者trimRight去除尾部的空白内容
var res = str.trimEnd()
console.log(res); // hello world
var res1 = str.trimRight(
console.log(res1);// hello world

12. search()

● 作用:search() 用于检索字符串中指定的子字符串,或匹配正则表达式的子字符串。

● 语法:

○ 字符串.search()

● 返回值:若未找到匹配子串,返回 -1。

var str="abc DEF!" // 要执行忽略大小写的检索,请追加标志 i。
console.log(str.search(/DEF/))//4

三、结尾

以上介绍了 JavaScript 中处理字符串的常用方法。尽管部分方法功能相似,但在性能等方面各有优劣。开发者可根据实际开发需求选择合适的方法。

本文介绍了 JS 操作字符串的常见内置方法。更多相关内容请搜索本站历史文章或浏览后续文章,感谢支持!

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章