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

字符串常用方法

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

目录

字符串常用方法

字符串常用方法1

charAt()

charCodeAt()

substr()

substring()

toLowerCase()

toUpperCase()

replace()

concat()

slice()

split()

字符串常用方法2

indexOf()

lastIndexOf()

includes()

search()

match()

trim()

trimStart()

trimEnd()

padStart()

padEnd()

startsWith()

endsWith()

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

small()

big()

bold()

fontsize()

fontcolor()

---

字符串常用方法1

charAt()

=> 语法: 字符串.charAt(索引) ​

=> 返回值: 该索引位置的字符 ​

-> 如果有该索引位置, 就是索引位置字符 ​

-> 如果没有该索引位置, 是一个空

// 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编码)

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

substr()

=> 语法: 字符串.substr(开始索引, 多少个)

=> 作用: 截取字符串

=> 返回值: 截取出来的字符串

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

substring()

=> 语法: 字符串.substring(开始索引, 结束索引) - 包前不包后

=> 作用: 截取字符串

=> 返回值: 截取出来的字符串

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

toLowerCase()

=> 语法: 字符串.toLowerCase()

=> 作用: 把字符串里面的大写字母转成小写字母

=> 返回值: 转换好以后的字符串

 // 5. toLowerCase()
    var str = 'HELLO worLD'
    var res = str.toLowerCase()
    console.log(res) // hello world

toUpperCase()

=> 语法: 字符串.toUpperCase()

=> 作用: 把字符串里面的小写字母转换成大写字母

=> 返回值: 转换好以后的字符串

 // 6. toUpperCase()
    var str = 'HELlo World'
    var res = str.toUpperCase()
    console.log(res) // HELLO WORLD

replace()

=> 语法: 字符串.replace('要被替换的字符', '替换成的字符')

=> 作用: 替换字符串内的某些字符

-> 只能替换查找到的第一个

=> 返回值: 替换好的字符串

  // 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(字符串)

=> 作用: 拼接字符串

=> 返回值: 拼接好的字符串

  // 8. concat()
    var str = 'hello'
    var res = str.concat('world')
    console.log(res) // helloworld

slice()

=> 语法: 字符串.slice(开始索引, 结束索引) - 包前不包后

-> 和 substring 的区别就是可以写 负整数

-> 当你写负整数的时候, 表示 length + 负整数

=> 作用: 截取字符串

=> 返回值: 截取好的字符串

    // 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('切割符号', 多少个) ​

-> 切割符号, 按照你写的符号把字符串切割开

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

如果写一个空字符串(''), 按照一位一位的切割 ​

-> 多少个, 选填, 默认是全部, 表示你切割完以后保留多少个 ​

=> 返回值: 一个数组的形式保存每一段内容 ​

-> 不管按照什么切割, 返回值一定是一个数组

    // 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

    // 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

    // 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

    // 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()

=> 语法: 字符串.search('字符串片段') ​

=> 作用: 查找字符串里面有没有匹配的字符串片段 ​

=> 返回值:

-> 如果有, 就是指定索引

-> 如果没有, 就是 -1

和 indexOf 的区别 : 没有第二个参数

search 参数可以写正则

    // 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('字符串片段') ​

=> 作用: 找到字符串里面的字符串片段 ​

=> 返回值: 是一个数组

-> 里面是找到的字符串片段

​ => 实际应用:

-> 不是传递字符串

-> 传递正则

    // 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() ​

=> 作用: 去除首尾空格 ​

=> 返回值: 去除空格以后的字符串

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

trimStart()

=> 语法: 字符串.trimStart() ​

=> 作用: 去除开始的空格 ​

=> 返回值: 去除空格以后的字符串 ​

=> 别名: trimLeft()

trimEnd()

=> 语法: 字符串.trimEnd() ​

=> 作用: 去除尾部空格 ​

=> 返回值: 去除空格以后的字符串

​ => 别名: trimRight()

padStart()

=> 语法: 字符串.padStart(目标长度, '填充字符串')

-> 目标长度: 你想把字符串补充到多长

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

超过长度以后, 用填充字符串补齐

-> 填充字符串: 可以是一个字符, 也可以是多个

多个的时候, 如果超长后面的就不要了

=> 作用: 从前面字符串补齐

=> 返回值: 补齐以后的字符串

    // 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(目标长度, '填充字符串')

-> 目标长度: 你想把字符串补充到多长

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

超过长度以后, 用填充字符串补齐

-> 填充字符串: 可以是一个字符, 也可以是多个

多个的时候, 如果超长后面的就不要了

=> 作用: 从后面字符串补齐

=> 返回值: 补齐以后的字符串

    // 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

    // 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

    // 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() ​

=> 作用: 把字符串里面的内容变成小号文字

返回值: <small>字符串</small>

big()

=> 语法: 字符串.big()

=> 作用: 把字符串里面的内容变成大号文字

=> 返回值: <big>字符串</big>

bold()

=> 语法: 字符串.blod()

=> 作用: 把字符串加粗显示

=> 返回值: <b>字符串</b>

fontsize()

=> 语法: 字符串.fontsize(尺寸)

=> 作用: 指定字符串大小

=> 返回值: <font>字符串</font>

fontcolor()

=> 语法: 字符串.fontcolor(颜色)

=> 作用: 指定字符串颜色

=> 返回值: 带一个颜色样式

	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