Yjx | blog
0%

JavaScript中常用的27种字符串方法的详细汇总

发表于 更新于 分类于

字符串常用方法

​ + 说明: 所有字符串方法都不会改变原始字符串

字符串常用方法1

charAt()

​ => 语法: 字符串.charAt(索引)
​ => 返回值: 该索引位置的字符
​ -> 如果有该索引位置, 就是索引位置字符
​ -> 如果没有该索引位置, 是一个空

1
2
3
4
5
6
// 1. charAt()
var str = 'hello world'
var res = str.charAt(1)
console.log(res) // e
var res2 = str.charAt(100)
console.log(res2) // 空
charCodeAt()

=> 语法: 字符串.charCodeAt(索引)
=> 返回值: 该索引位置的字符编码(UTF-8编码)

1
2
3
4
// 2. charCodeAt()
   var str = '你hello world'
   var res = str.charCodeAt(0)
   console.log(res) //20320
substr()

=> 语法: 字符串.substr(开始索引, 多少个)
=> 作用: 截取字符串
=> 返回值: 截取出来的字符串

1
2
3
4
5
// 3. substr()
var str = 'hello world'
// 从索引 [2] 开始, 向后截取八个字符
var res = str.substr(2, 8)
console.log(res) // llo worl
substring()

=> 语法: 字符串.substring(开始索引, 结束索引) - 包前不包后
=> 作用: 截取字符串
=> 返回值: 截取出来的字符串

1
2
3
4
5
// 4. substring
var str = 'hello world'
// 从 [2] 开始 截取到 [8], 不包含 [8]
var res = str.substring(2, 8)
console.log(res) // llo wo
toLowerCase()

=> 语法: 字符串.toLowerCase()
=> 作用: 把字符串里面的大写字母转成小写字母
=> 返回值: 转换好以后的字符串

1
2
3
4
// 5. toLowerCase()
var str = 'HELLO worLD'
var res = str.toLowerCase()
console.log(res) // hello world
toUpperCase()

=> 语法: 字符串.toUpperCase()
=> 作用: 把字符串里面的小写字母转换成大写字母
=> 返回值: 转换好以后的字符串

1
2
3
4
// 6. toUpperCase()
var str = 'HELlo World'
var res = str.toUpperCase()
console.log(res) // HELLO WORLD
replace()

=> 语法: 字符串.replace(‘要被替换的字符’, ‘替换成的字符’)
=> 作用: 替换字符串内的某些字符
-> 只能替换查找到的第一个
=> 返回值: 替换好的字符串

1
2
3
4
5
6
// 7. replace()
var str = '你好 世界 H H abc abc HH 你好'
var res = str.replace('HH', '**')
console.log(res) // 你好 世界 H H abc abc ** 你好
var res2 = str.replace('你好', '$')
console.log(res2) // $ 世界 H H abc abc HH 你好
concat()

=> 语法: 字符串.concat(字符串)
=> 作用: 拼接字符串
=> 返回值: 拼接好的字符串

1
2
3
4
// 8. concat()
var str = 'hello'
var res = str.concat('world')
console.log(res) // helloworld
slice()

=> 语法: 字符串.slice(开始索引, 结束索引) - 包前不包后
-> 和 substring 的区别就是可以写 负整数
-> 当你写负整数的时候, 表示 length + 负整数
=> 作用: 截取字符串
=> 返回值: 截取好的字符串

1
2
3
4
5
6
// 9. slice()
var str = 'hello world'
var res = str.slice(2, 8)
console.log(res) // llo wo
var res = str.slice(2, -3)
console.log(res) // llo wo
split()

​ => 语法: 字符串.split(‘切割符号’, 多少个)
​ -> 切割符号, 按照你写的符号把字符串切割开

​ 如果不写, 那么就直接切割一个完整的

​ 如果写一个空字符串(‘’), 按照一位一位的切割
​ -> 多少个, 选填, 默认是全部, 表示你切割完以后保留多少个
​ => 返回值: 一个数组的形式保存每一段内容
​ -> 不管按照什么切割, 返回值一定是一个数组

1
2
3
4
5
6
7
8
9
10
// 10. split()
var str = '2020-12-12'
var res = str.split('-')
console.log(res) // ['2020', '12', '12']
var res1 = str.split('-', 2)
console.log(res1) // ['2020', '12']
var res2 = str.split()
console.log(res2) // ['2020-12-12']
var res3 = str.split('')
console.log(res3) // ['2', '0', '2', '0', '-', '1', '2', '-', '1', '2']

字符串常用方法2

indexOf()

=> 语法:

字符串.indexOf(字符串片段)
字符串.indexOf(字符串片段, 开始索引)
=> 作用: 在字符串里面查找指定字符串片段
=> 返回值:
-> 如果查询到了, 就是指定索引
-> 如果没有, 就是 -1

1
2
3
4
5
6
7
8
9
10
// 11. indexOf()
var str = 'abcaabbcc'
var res = str.indexOf('a')
console.log(res) // 0
var res = str.indexOf('a', 2)
console.log(res) // 3
// 去到 str 里面完全匹配 'aa'
// 找到匹配的片段以后, 返回开始索引
var res = str.indexOf('aa')
console.log(res) // 3
lastIndexOf()

​ => 语法:

字符串.lastIndexOf(字符串片段)

字符串.lastIndexOf(字符串片段, 开始索引)
=> 作用: 从后向前查找对应的字符串片段
=> 返回值
-> 如果查询到了, 就是指定索引
-> 如果没有, 就是 -1

1
2
3
4
5
6
7
8
9
10
// 12. lastIndexOf()
var str = 'abcaabbcccccc'
var res = str.lastIndexOf('a')
console.log(res) // 4
var res = str.lastIndexOf('a', 2) //相当于在索引2之前找到第一个a
console.log(res) // 0
var res = str.lastIndexOf('aa')
console.log(res) // 3
var res = str.lastIndexOf('z')
console.log(res) // -1
includes()

​ => 语法: 字符串.includes(‘字符串片段’)
​ => 作用: 字符串里面是否包含该字符串片段
​ => 返回值: 布尔值
-> 有就是 true
-> 没有就是 false

1
2
3
4
5
6
// 13. includes()
var str = 'hello world'
var res = str.includes('a')
console.log(res)// false
var res = str.includes('l')
console.log(res)// true

​ => 语法: 字符串.search(‘字符串片段’)
​ => 作用: 查找字符串里面有没有匹配的字符串片段
​ => 返回值:
-> 如果有, 就是指定索引
-> 如果没有, 就是 -1
和 indexOf 的区别 : 没有第二个参数

search 参数可以写正则

1
2
3
4
5
6
// 14. search()
var str = 'hello world'
var res = str.search('l')
console.log(res)//2
var res = str.search('z')
console.log(res)//-1
match()

​ => 语法: 字符串.match(‘字符串片段’)
​ => 作用: 找到字符串里面的字符串片段
​ => 返回值: 是一个数组
-> 里面是找到的字符串片段
​ => 实际应用:
-> 不是传递字符串
-> 传递正则

1
2
3
4
5
6
7
8
9
10
// 15. match()
var str = 'hello world'
var res = str.match('o')
console.log(res)
// ['o', index: 4, input: 'hello world', groups: undefined]
// 0: "o"
// groups: undefined
// index: 4
// input: "hello world"
// length: 1
trim()

​ => 语法: 字符串.trim()
​ => 作用: 去除首尾空格
​ => 返回值: 去除空格以后的字符串

1
2
3
4
5
// 16. trim()
var str = '     你好 世界       '
var res = str.trim()
console.log(res) // 你好 世界
console.log(str) //      你好 世界       原始字符串不变
trimStart()

​ => 语法: 字符串.trimStart()
​ => 作用: 去除开始的空格
​ => 返回值: 去除空格以后的字符串
​ => 别名: trimLeft()

trimEnd()

​ => 语法: 字符串.trimEnd()
​ => 作用: 去除尾部空格
​ => 返回值: 去除空格以后的字符串
​ => 别名: trimRight()

padStart()

​ => 语法: 字符串.padStart(目标长度, ‘填充字符串’)
-> 目标长度: 你想把字符串补充到多长

如果你写的长度小于字符串本身长度, 那么这个函数没有意义

超过长度以后, 用填充字符串补齐
-> 填充字符串: 可以是一个字符, 也可以是多个

多个的时候, 如果超长后面的就不要了
=> 作用: 从前面字符串补齐
=> 返回值: 补齐以后的字符串

1
2
3
4
5
6
7
8
9
10
// 19. padStart()
var str = '1234'
var res = str.padStart(3, 'a')
console.log(res) // 1234
// 前面六位全部是 a
var res = str.padStart(10, 'a')
console.log(res) // aaaaaa1234
// 根据补位剩余的空间, 来使用指定字符串补位
var res = str.padStart(6, 'abcd')
console.log(res) // ab1234
padEnd()

​ => 语法: 字符串.padEnd(目标长度, ‘填充字符串’)
-> 目标长度: 你想把字符串补充到多长

如果你写的长度小于字符串本身长度, 那么这个函数没有意义

超过长度以后, 用填充字符串补齐
-> 填充字符串: 可以是一个字符, 也可以是多个

多个的时候, 如果超长后面的就不要了
=> 作用: 从后面字符串补齐
=> 返回值: 补齐以后的字符串

1
2
3
4
5
6
7
8
// 20. padEnd()
var str = '1234'
var res = str.padEnd(3, 'a')
console.log(res) // 1234
var res = str.padEnd(10, 'a')
console.log(res) // 1234aaaaaa
var res = str.padEnd(5, 'abc')
console.log(res) // 1234a
startsWith()

​ => 语法: 字符串.startsWith(‘字符串片段’)
​ => 作用: 判断该字符串是不是以这个字符串片段开始
​ => 返回值: 一个布尔值
-> 如果是, 就是 true
-> 如果不是, 就是 false

1
2
3
4
5
6
// 21. startsWith()
var str = 'hello world 你好 世界'
var res = str.startsWith('hello')
console.log(res) // true
var res = str.startsWith('world')
console.log(res) // false
endsWith()

​ => 语法: 字符串.endsWith(‘字符串片段’)
​ => 作用: 判断该字符串是不是以这个字符串片段结尾
​ => 返回值: 一个布尔值
-> 如果是, 就是 true
-> 如果不是, 就是 false

1
2
3
4
5
6
// 22. endsWith()
var str = 'hello world 你好 世界'
var res = str.endsWith('hello')
console.log(res) // false
var res = str.endsWith('世界')
console.log(res) // true

字符串里面特别无聊的方法

​ 鸡肋一样的方法

small()

​ => 语法: 字符串.small()
​ => 作用: 把字符串里面的内容变成小号文字

1
返回值: <small>字符串</small>
big()

=> 语法: 字符串.big()
=> 作用: 把字符串里面的内容变成大号文字

1
=> 返回值: <big>字符串</big>
bold()

=> 语法: 字符串.blod()
=> 作用: 把字符串加粗显示

1
=> 返回值: <b>字符串</b>
fontsize()

=> 语法: 字符串.fontsize(尺寸)
=> 作用: 指定字符串大小

1
=> 返回值: <font>字符串</font>
fontcolor()

=> 语法: 字符串.fontcolor(颜色)
=> 作用: 指定字符串颜色
=> 返回值: 带一个颜色样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var str = 'hello world'

   // 1. small()
   var res1 = str.small()
   console.log(res1)
   // 2. big()
   var res2 = str.big()

   // 3. blod()
   var res3 = str.bold().big()

   // 4. fontSize()
   var res4 = str.fontsize('30px')

   // 5. fontcolor()
   var res5 = str.fontcolor('blue')

   document.write(res1)
   document.write('<br>')
   document.write(str)
   document.write('<br>')
   document.write(res2)
   document.write('<br>')
   document.write(res3)
   document.write('<br>')
   document.write(res4)
   document.write('<br>')
   document.write(res5) // 蓝色的 hello world
-------------本文结束感谢您的阅读-------------
技术原创：姚渐新，您的支持将鼓励我继续创作