JS字符串常用方法 ES5

原创已于 2024-09-26 12:29:15 修改 · 523 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JS

于 2018-10-25 15:59:26 首次发布

个人总结同时被 2 个专栏收录

122 篇文章

订阅专栏

面试总结

88 篇文章

订阅专栏

本文深入讲解了JavaScript中字符串的各种常用方法，包括字符检索、拼接、转换、截取、替换等操作，通过实例演示了每个方法的具体应用，帮助读者理解和掌握字符串处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  let strA = '西湖'
  let strB = '歌舞'
  let strC = '几时休'

  // 1.charAt()  传入下角标(从0开始),然后获取字符串队形下标的字符
  let res1 = strA.charAt(1) // '湖'
  console.log('TCL: res1', res1) // TCL: res1 湖

  // 2.search()  传入要查找的字符串(或者字符) 返回对应的下标志,找不到返回-1
  let res2 = strC.search('休') // 2
  console.log('TCL: res2', res2) // TCL: res2 2

  //3.concat()  //拼接字符串,两个或者多个
  let res3 = strC.concat(strB) // '几时休歌舞'
  console.log('TCL: res3', res3) // TCL: res3 几时休歌舞

  // 4 .toString()  把整数或者小数转换成字符串  s.toString()
  let num4 = 123.5
  let res4 = num4.toString() // '123.5'
  console.log('TCL: res4', res4, typeof (res4)) // TCL: res4 123.5 string

  // 5.String()  也是转化成字符串   String(s)
  let num5 = 118.5
  let res5 = String(num5) // '123.5'
  console.log('TCL: res5', res5, typeof (res5)) // TCL: res5 123.5 string

  // 6.indexOf()  传入要查找的字符串首次出现的位置(或者字符) 返回对应的下标志,找不到返回-1
  let res6 = strC.indexOf('时')
  console.log('TCL: res6', res6) // TCL: res6 1

  // 7.lastIndexOf()  可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在字符串中的指定位置从后向前搜索 如果没有找到匹配字符串则返回 -1
  let str7 = 'I am from runoob，welcome to runoob site'
  let res7 = str7.lastIndexOf('runoob')
  let rres7 = str7.lastIndexOf('runoob', 20)
  console.log('TCL: res7', res7) // TCL: res7 28
  console.log('TCL: rres7', rres7) // TCL: rres7 10

  // 8.substr()  用于截取字符串
  let str8 = 'gahane'
  let res8 = str8.substr(1, 3)  // 参数1从第几个位置开始,截取几个字符
  console.log('TCL: res8', res8) // TCL: res8 aha

  //9.substring()  用于截取字符串
  let str9 = 'zhongwuchidehao'
  let res9 = str9.substring(5, 9) // 从哪开始到哪结束 不包含末尾的字符
  console.log('TCL: res9', res9) // TCL: res9 wuch

  // 10.split()  传入规则,按照规则拆分字符串,返回一个数组
  let str10 = 'I, am, a, panda, I, love, China'
  let arr10 = str10.split(', ')
  console.log('TCL: arr10', arr10) // TCL: arr10 (7) ['I', 'am', 'a', 'panda', 'I', 'love', 'China']

  // 11.replace()  替换字符中相应文字
  let str11 = '明天放假,不可能'
  let res11 = str11.replace('不可能', '真的') //参数1被替换,参数2要替换
  console.log('TCL: res11', res11) // TCL: res11 明天放假,真的
  let Str11 = '2015-01-02'
  // 想要全局替换，需要加上正则全局标识  /xxx/g，  2015-01-02 》 2015/01/02
  let Res11 = Str11.replace(/-/g, '/')
  console.log('TCL: Res11', Res11) // TCL: Res11 2015/01/02

  // 12.replaceAll()  全局替换字符中相应文字 2015-01-02 》 2015/01/02 该函数会替换所有匹配到的子字符串
  let str12 = '2024-01-02'
  let res12 = str12.replaceAll('-', '/')
  console.log('TCL: res12', res12) // TCL: res12 2024/01/02

  // 13.String.fromCharCode()  //传入ASCII码值,返回相应字符
  let str13 = 65
  let res13 = String.fromCharCode(str13)
  console.log('TCL: res13', res13) // TCL: res13 A

  // 14.charCodeAt()  返回字符的ASCII值
  let str14 = 'A'
  let res14 = str14.charCodeAt()
  console.log('TCL: res14', res14) // TCL: res14 65

  // 15. toUpperCase()  全部转换成大写
  let str15 = 'abc'
  let res15 = str15.toUpperCase()
  console.log('TCL: res15', res15) // TCL: res15 ABC

  // 16. toLowerCase()  转换成小写  'Abc'.toUpperCase
  let str16 = 'ABC'
  let res16 = str16.toLowerCase()
  console.log('TCL: res16', res16) // TCL: res16 abc

  // 17. startsWith()  判断字符串是否以指定的字符串开头,返回布尔值 startsWith() 方法区分大小写
  let str17 = 'Hello world, welcome to the Runoob.'
  let res17 = str17.startsWith('Hello')
  console.log('TCL: res17', res17) // TCL: res17 true

  // 18. endsWith()  判断字符串是否以指定的字符串结尾,返回布尔值 endsWith() 方法区分大小写
  let str18 = 'Hello world, welcome to the Runoob'
  let res18 = str18.endsWith('Runoob')
  console.log('TCL: res18', res18) // TCL: res18 true

  // 19. includes()  判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false   includes() 方法区分大小写
  // 如果指定第二个参数 start，则设置从那个位置开始查找，默认为 0。
  let str19 = 'Hello world, welcome to the Runoob'
  let res19 = str19.includes('Runoob')
  let rres19 = str19.includes('Runoob', 10)
  console.log('TCL: res19', res19) // TCL: res19 true
  console.log('TCL: rres19', rres19) // TCL: rres19 true

  // 20. match() 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配  返回值是数组
  let str20 = 'The rain in SPAIN stays mainly in the plain'
  let r20 = str20.match(/ain/g)
  console.log('TCL: r20', r20) // TCL: r20 ['ain', 'ain', 'ain']

  // 21. repeat()  字符串复制指定次数
  let str21 = 'Runoob'
  let res21 = str21.repeat(5)
  console.log('TCL: res21', res21) // TCL: res21 RunoobRunoobRunoobRunoobRunoob

  // 22. trim()  用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等  不会改变原始字符串
  let str22 = '   Runoob   '
  let res22 = str22.trim()
  console.log('TCL: res22', res22) // TCL: res22 Runoob

  // 23. valueOf()  返回 String 对象的原始值  注意： valueOf() 方法通常由 JavaScript 在后台自动进行调用，而不是显式地处于代码中
  let str23 = 'Runoob'
  let res23 = str23.valueOf()
  console.log('TCL: res23', res23) // TCL: res23 Runoob

  // 24. str.padStart(length，string) 头部补全 length表示补全后字符的总长度（原字符加补全的长度），string表示用何种字符进行补全，默认为空格
  let str24 = 'Runoob'
  let res24 = str24.padStart(10, '*')
  console.log('TCL: res24', res24) // TCL: res24 ****Runoob

  // 25. str.padEnd(length，string) 尾部补全 length表示补全后字符的总长度（原字符加补全的长度），string表示用何种字符进行补全，默认为空格
  let str25 = 'Runoob'
  let res25 = str25.padEnd(10, '*')
  console.log('TCL: res25', res25) // TCL: res25 Runoob****


  //利用ASCII码封装加密字符
  function setSecret(str) {
    let result = ''
    for (let i = 0; i < str.length; i++) {
      let code = str[i].charCodeAt()
      result = result + code + ','
    }
    return result.substr(0, result.length - 1)
  }
  console.log('TCL: setSecret', setSecret('侯金明大帅哥')) // TCL: setSecret 20399,37329,26126,22823,24069,21733


  function operateSecret(str) {
    let result = ''
    let oldStr = str.split(',')
    for (let i = 0; i < oldStr.length; i++) {
      result = result + String.fromCharCode(oldStr[i])
    }
    return result
  }
  console.log('TCL: operateSecret', operateSecret('20399,37329,26126,22823,24069,21733')) // TCL: operateSecret 侯金明大帅哥
</script>

</html>

JS字符串常用处理函数总结_js中字符串处理函数-CSDN博客

js 字符串操作函数 - 郭先生blog - 博客园