最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JavaScript中字符串操作方法

    正文概述 掘金(A白衣苍狗)   2021-03-20   555

    写在前面的一段话

    人只有在脱离的舒适圈以后才会发现自己的不足。 最近在找工作才发现自己对技术方面的严重不足,所以在这里梳理记录下知识体系,方便日后查阅复习。

    基础

    JavaScript数据类型包括字符串String,数组Array,布尔boolean,null,undefined,这些都是基本的数据类型;函数function,对象object是复杂数据类型,还有一种symbol特殊数据类型

    字符串

    详细整理了字符串中的方法语法,以及基本实现的原理

    1. length字符串长度 该属性表示表示一个字符串的长度 它返回的是一个字符串的编码长度,JavaScript中使用UTF-16编码,空字符串的长度为0.静态String.length长度为1.

      const str = "tom"
      console.log(str.length) //输出为3
      

    再来说下上面空字符长度为0,这个应该很好理解,那为什么String.length长度是1呢?怎么不能是0呢或者是其他呢?以下是我自己的理解,希望各位能交流指正.打印查看了下String的原型对象prototype发现它的length长度为0,那它肯定不是String的长度,我们再看下它对象原型__proto__指向了Object,那我们可以肯定它是继承或者对象已经定义的长度.查看了下其他文章,这个 length 其实继承于 Function.prototype 的,函数实例的 length 为声明的参数长度,String 接受一个 value 参数,所以 length 为 1. 2. indexOf 该方法返回某个指定字符串在字符串中首次出现的位置,如果没有该字符串则返回-1.

      const str = "welcome to my world"
      str.indexOf("to") //打印结果为8
    

    与之对应的还有一个lastIndexOf,使用方法与indexOf一样,它返回的是指定字符串最后出现的位置,没有的话结果返回-1.

    3.search() 该方法执行一段正则表达式与string对象作匹配.如果匹配成功,返回该字符串的索引值,否则返回-1.

      const str = "welcome to my world."
      const regex = /[^\w\s]/g
      str.search(regex) // =>19 \w匹配数字字母下划线 \s匹配空白字符 
    

    serach()indexOf虽然都是检索字符串的,但是search()只能传递正则来检索,而indexOf()是无法设置正则,但是它可以传递第二个参数,用来设置检索开始的位置.

    4.slice() 该方法用来提取字符串中的某一部分,并返回新的字符串,原字符串不会改变. 该方法可以添加两个参数,开始的位置和结束的位置,开始位置参数如果为负数,则表示字符串长度加上这个参数(如传入一个参数-7,则表示字符串长度-7作为截取开始的位置),结束位置为可选项,不填则从开始位置截取到末尾.

      const str = "welcome to my world."
      console.log(str.slice(12)) // => y world.
      console.log(str.slice(12,18)) // => y worl
      console.log(str.slice(-6,18)) // => worl
    

    5.substring() 该方法与slice()类型,唯一不同的是无法传入负值,如果传入的值为负值或者NaN,则它会被当成0

      const str = "welcome to my world."
      console.log(str.substring(6)) // =>VM195:2 e to my world. 没有结束的参数会截取到字符串最后一位
      console.log(str.substring(5,5)) //=>当开始位置和结束位置一样,会返回一个空字符串
      console.log(str.substring(-2,6)) //=>当传入值为-,则从字符串开始位置截取
      console.log(str.substring()) //=> 当省略开始和结束参数时,会从原字符串开始截取到结束位置
      console.log(str.substring(22,18)) //=>当开始>结束,执行就相当于两个参数对调了
    

    6.substr() 该方法类似于slice(),不同之处在于substr()是第二个参数用来指定截取字符串的长度.未来该函数可能会被废弃,所以尽量使用substring().

    7.replace() 该方法用于替换原字符串中字符,并返回一个新的字符串 语法:string.replace(regexp|substr,newsubstr|function) regexp为正则,substr为匹配的字符串.newsubstr为新的替换的字符串,function可以创建一个新的字符串的函数.

      const str = "welcome to my world."
      let newstr = str.replace('my','you') //=> 输出结果为welcome to you world.
      let newstr = str.replace(/my/g,'you') //=>通过正则匹配替换my 输出welcome to you world.
      let newstr = str.replace('my',()=> 'you') //=>当第二个参数为函数时,会将函数的返回值替换匹配到的字符串
    

    8.toLowerCase() toUpperCase()

    toLowerCase()方法将字符串转换为小写,toUpperCase()方法将字符串转换为大写. 他们都会返回一个新的字符串.

    const str = "welcome to my world."
    let newstr = str.toLowerCase() //=> welcome to my world.
    let newstr = str.toUpperCase() //=> WELCOME TO MY WORLD.
    

    9.concat() 该方法用于一个或者多个字符串与原字符串连接,并返回一个新的字符串

      const str = "welcome"
      const str1 = " to"
      newstr = str.concat(str1)
      console.log(newstr) // =>welcome to
    

    10.trim() 该方法用于删除字符串两端的空白字符

     const str = "    welcome  "
     newstr = str.trim()
     console.log(str === newstr) //=>false 
    

    11.charAt() 该方法用于查找字符串指定下标的字符.当未传值时使用0为索引参数.

     const str = "welcome to my world."
     console.log(str.charAt()) //=> 输出w
    

    12.split() 该方法用指定的分隔字符将string对象分隔为数组

     const str = "welcome"
     console.log(str.split('')) //=>输出["w", "e", "l", "c", "o", "m", "e"]
    
    
      
    

    起源地下载网 » JavaScript中字符串操作方法

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元