• JavaScript -- 字符串常用方法及示例代码介绍


    字符串的方法

    String文档

    字符串其本质就是一个字符数组,所以字符串的很多方法都和数组是非常类似的

    "hello" --> ["h", "e", "l", "l", "o"]
    
    • 1

    1 length

    length 获取字符串的长度

    let str = "hello"
    str.length
    
    • 1
    • 2

    image-20221203203608946

    2 索引

    字符串[索引] 获取指定位置的字符

    let str = "hello"
    str[1]
    
    • 1
    • 2

    image-20221203203623273

    3 str.at()

    根据索引获取字符,可以接受负索引

    let str = "hello"
    console.log(str.at(0))
    console.log(str.at(-1))
    console.log(str.at(-2))
    
    • 1
    • 2
    • 3
    • 4

    image-20221203203733396

    4 str.charAt()

    根据索引获取字符

    不支持负数,传入负数返回的是空串

    let str = "hello"
    console.log(str.charAt(0))
    
    • 1
    • 2

    image-20221203203834538

    5 str.concat()

    用来连接两个或多个字符串

    不会破坏原来的字符串,会生成新字符串

    +效果一样,推荐使用+

    let str = "hello"
    console.log(str.concat(" ", "world"))
    
    • 1
    • 2

    image-20221203203951389

    6 str.includes()

    • 用来检查字符串中是否包含某个内容(字符串)
      • 有返回true
      • 没有返回false
    • 第一个参数是要找的内容
    • 第二个参数是查找的起始位置
    let str = "hello hello how are you"
    console.log(str.includes("hello"))
    console.log(str.includes("ttt"))
    console.log(str.includes("hello", 10))
    
    • 1
    • 2
    • 3
    • 4

    image-20221203204400489

    7 str.indexOf() 和 str.lastIndexOf()

    查询字符串中是否包含某个内容,并返回下标,如果没有的话返回-1

    第二个参数是查找的起始,不传默认为0

    let str = "hello hello how are you"
    
    • 1

    image-20221203204515290

    8 str.startsWith() 和 str.endsWith()

    检查一个字符串是否以指定内容开头或者结尾的

    let str = "hello hello how are you"
    
    • 1

    image-20221203204635491

    9 str.padStart() 和 str.padEnd()

    通过在开头或者结尾添加指定的内容,使字符串保持某个长度

    • 第一个参数是字符串的位数
    • 第二个参数是要补的符号

    如果穿进去的第一个参数比str.length少,则不做任何操作

    str = "100"
    
    console.log(str.padStart(7, "0"))
    console.log(str.padEnd(7, "0"))
    
    • 1
    • 2
    • 3
    • 4

    image-20221203204851125

    10 str.replace() 和 str.replaceAll()

    使用一个新字符串替换一个指定内容

    str = "hello hello how are you"
    
    let result = str.replace("hello", "abc")
    console.log(result)
    
    str = "hello hello how are you"
    result = str.replaceAll("hello", "abc")
    console.log(result)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    image-20221203205936740

    使用正则表达式替换

    通过指定模式g可以实现全部替换

    image-20221203223039741

    11 str.slice() 和 str.substring()

    对字符串进行切片

    • 第一个参数是开始位置
    • 第二个参数是结束位置
    • 前闭后开

    substring会自动判断参数,如果第一个参数比第二个参数大,则会自动交换参数位置,slice不会

    str = "hello hello how are you"
    result = str.slice(12, 15)
    result = str.slice(15, 12)
    result = str.substring(12, 15)
    result = str.substring(15, 12)
    
    • 1
    • 2
    • 3
    • 4
    • 5

    image-20221203210404837

    12 str.split() 和 str.join()

    str.split():用来将一个字符串拆分为一个数组

    str.join():用来将数组拼接为字符串

    • 参数是分割的符号,也可以根据正则表达式拆分
    str = "abc@bcd@efg@jqk"
    result = str.split("@")
    result = result.join("@"")
    
    • 1
    • 2
    • 3

    image-20221203210753350

    根据正则表达式拆分

    image-20221203222554303

    13 str.toLowerCase() 和 str.toUpperCase()

    将字符串转为大写或小写

    str = "abcdABCD"
    
    result = str.toLowerCase()
    result = result.toUpperCase()
    
    • 1
    • 2
    • 3
    • 4

    image-20221203211151241

    14 str.trim() 和 str.trimStart() 和 str.trimEnd()

    • str.trim():去除字符串的前后空格
    • str.trimStart():去除开始空格
    • str.trimEnd():去除结束空格
    str = "    ab  c     "
    str.trim()
    str.trimStart()
    str.trimEnd()
    
    • 1
    • 2
    • 3
    • 4

    image-20221203211325655

    15 str.search()

    可以去搜索符合正则表达式的内容第一次在字符串中出现的位置

    image-20221203222845262

    16 str.match() 和 str.matchAll()

    • str.match():根据正则表达式去匹配字符串中符合要求的内容
    • str.matchAll():根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配),返回的是一个迭代器

    str.match()可以通过设置全局模式g来匹配所有符合的字符串,并以数组的形式返回

    image-20221203223229801

    str.matchAll()如果不使用全局模式的话会报错,返回的是一个迭代器,使用for-of遍历可以打印结果

    image-20221203223802189

  • 相关阅读:
    Qlist的使用
    MySQL_生产环境中concat用法及功能实现
    通配符指什么呢?
    UnrealEngine5 - Niagara粒子系统问题 当发射器不在视口内时,发射物不可见
    SpringCloud微服务架构
    【校招VIP】“推推”产品项目课程:产品的规划和商业化分析
    Tomcat catalina.properties配置文件详解
    机器学习从入门到放弃:我们究竟是怎么教会机器自主学习的?
    【Linux kernel/cpufreq】framework ----初识
    如何有效防止服务器被攻击?
  • 原文地址:https://blog.csdn.net/qq_46311811/article/details/128207761