开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

前言

在开发过程中处理字符串是不可避免的，为了将字符串处理成我们想要的模样，我们必须依赖字符串相关的方法，今天我们就来学习一下字符串相关方法。

字符串方法

按照返回结果跟操作形式我们可以将方法分为以下几种类型：

查找

查找一些方法含义跟数组方法是一样的，记忆的时候也要注意区分。

• indexOf():查找参数在字符串第一次出现的位置。返回值是对应索引，没有返回-1。注意空格也算一个字符。
• lastIndexOf():查找最后一次。返回值跟indexOf一样。
• search():在字符串查找参数对应位置，与indexOf不同，这个参数是正则表达式。
• match():在字符串查找参数，参数可以是正则匹配表达式，返回正则match方法对应的值。
• chatAt(index):查找索引为index的元素，返回该元素。

     const str = '   12345611223'//注意空格
     console.log(str.indexOf(1))//3
     console.log(str.lastIndexOf(2))//12
     console.log(str.search(/56/))//7 返回满足正则匹配参数的起始位置
     console.log(str.match('456'))//['abc', index: 14, input: '   12345611223abc', groups: undefined]
       console.log(str.charAt(8))//'6'

连接截取

• concat():连接多个字符串，返回一个新字符串。
• substr(start,length):在start索引处截取长度为length的字符串。length不传截取到最后。
• substring(start,end):截取start跟end之间的字符串，不包含end。end不传就截取到最后。
• slice(start,end):也是截取两者之间，也不包含end，但是参数可以是负数，负数从尾巴开始查找。

    const str = '12345611223abc'
    console.log('123'.concat('456'))//'123456'
    console.log(str.substring(1,3))//'23' 不包含索引为3的元素
    console.log(str.substr(2,6))//'345611' 从索引为2开始截取6个元素
    console.log(str.slice(2,5))//'345' 不包含索引为5的元素
    console.log(str.slice(-3,-1))//'ab' 从尾部开始

转换

• replaece():替换字符串中指定的参数，可以用正则。
• toLowerCase():将元素全部转为小写。
• toUpperCase():将元素全部转为大写。
• trim():去除前后空格。中间空格不会去除。
• split():根据参数将字符串分割成对应的元素，并返回由这些元素组成的数组。这个方法很常用，比如获取url带的参数，就可以用split实现。

     const str = ' abc ABC '
     console.log(str.trim())//'abc ABC'
     console.log(str.toLowerCase())//' abc ABC '
     console.log(str.toUpperCase())// ' ABC ABC ' 
     console.log(str.replace(/a/ig,1))//' 1bc 1BC '
     console.log(str.split(' '))// ['', 'abc', 'ABC', '']

改变样式

• bold():让字体变粗。
• link():让字体变成链接形式。
• sub():让字符串变成下标。
• sup():让字符串变为上标。

    const str = '12'
      document.getElementsByClassName('box')[0].innerHTML = `1${str.sub()}2${str.sup()}${str.bold()}${str.link()}`

总结

字符串方法有些相近的用法，比如substr,substring,slice，对于相近的用法一定不要记混，还需要跟数组方法区分开，所以要经常温故。