如何巧妙合理利用字符串的api??

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/suandfei/article/details/102597091

首先要想巧妙的利用字符串下的api,首先你最起码你的要对字符串的各个api 要理解把 ，都不理解或者不熟悉怎么谈巧妙运用？下面就来谈谈我的理解，什么时候用啥字符串的api.
首先第一步先强调一下，字符串是不可变类型，调用字符串的api 返回的都是一个新的字符串。

1. 字符串转大写或者转小写 这没什么 背就完事了

str.toUpperCase() 和 str.toLowerCase()

 let str="abds"
    let str1=str.toUpperCase()
    console.log(str1) //ABDS

2.获取指定位置字符 可以用str[i] 或者是 str.charAt(i)

str字符串也可以像数组那样通过下标来访问指定位置字符，如果访问的位置大于字符串的长度 则是undefined
str.charAt(i) 访问字符串的i位置 和str[i]一样 ，但是两者也有不同，就是访问超过字符串长度的位置时 str[i]返回的是undefined而 str.charAt(i) 返回的是""空字符串

 let str="abds"
   console.log(str.charAt(5)==="")// true
   console.log(str[0],str[4],str.charAt(1),str.charAt(5))// a undefined  b ""

3.替换字符串中的某一项或者是某几项 str.replace(正则表达式,替换的字符串或者是回调函数)

1.先看简单替换

 var str="老师:请用小红 我的 朋友造句。小亮: 小红是我的朋友。小然: 朋友！小红是我的！";
      str1=str.replace(/小[\u4e00-\u9fa5]/,"**")
      console.log(str1)
 // 老师:请用** 我的 朋友造句。小亮: 小红是我的朋友。小然: 朋友！小红是我的！

首先你会发现符合正则表达式第一个语句已经被替换了，在看下面一个例子你会发现所有符合正则表达式的已经被替换了**

var str="老师:请用小红 我的 朋友造句。小亮: 小红是我的朋友。小然: 朋友！小红是我的！";
      str1=str.replace(/小[\u4e00-\u9fa5]/g,"**")
      console.log(str1)
//   老师:请用** 我的 朋友造句。**: **是我的朋友。**: 朋友！**是我的！   

主要是正则表达式加上了g 表示全局匹配而不是只匹配一个了。
2. 高级替换

//把每个单词首字母转大写
var str="you can you up";
str1=str.replace(
  /\b[a-z]/ig,
  function(keyword){
      return keyword.toUpperCase();
  }
)  
console.log(str1);//You Can You Up  

这是为什么呢？ 这就是高级替换 第二个参数是回调函数 首先replace 函数在执行时 先匹配每一个符合正则表达式的字符串 然后将字符串当作实参传入到keyword中 并且将返回值返回到对应的位置 有几个符合正则的子字符串就执行几次回调函数 不相信的话可以打桩。
3.替换的衍生操作 就是删除
删除用到的还是str.replace(正则表达式"") 删除就是字符串中的字符替换成空字符串就好了。例如
删除字符串中的开始和结尾的空格：

 var str=" hello     "
       var reg=/^\s+|\s+$/g
        str=str.replace(reg,"") 
        console.log(str) // hello  前后已经没有空格了

4.截取字符串

1. 有str.slice(start,end) 第二个参数可以不写 如果不写的话表示从start开始一直截取到结尾 加上的话表示截取从strat位置 到end位置所有的字符串 声明一下 strat 和end 是可以为负数的 表示倒数第几个
   不包括end
   例如

  //  截取字符串
       var str="woaizhongguo"
        str1=str.slice(0,4)
        str2=str.slice(4)
        console.log(str1,str2)// woai  zhongguo

2.还有一个与其十分类似的 str.substring(start,end) 但是有不同的是如果参数为负数的化会自动转为0
例如

 var str="woaizhongguo"
        str1=str.substring(-3,4)
        
        console.log(str1)// woai    -3转为0了

3. str.substr(start,n) 表示截取从start 位置开始包含stat本身的n个元素
   第二个参数可以省略 表示从从下标start 一直截取到最后
   例如

  //  截取字符串
       var str="woaizhongguo"
        str1=str.substr(1,4)
        
        console.log(str1)// oaiz

5.查找字符串中某个关键词

1.只能找到一个关键词
str.indexOf(i，fromi) 如果找到就返回当前元素的下标 找不到返回-1 第二个参数如果不写的话默认是从0开始查找 写了就是从fromi 进行查找

 var str="woaizhongguo"
        var a=str.indexOf("J")
        var b=str.indexOf("z",10)  
         var c=str.indexOf("z")
        console.log(a,b,c) -1  -1  4

如果一个字符串有多个数字而你只想要查找最后一个 可以用str.lastIndexOf(i) 例如

 var str="woaizhongguo"
        // o出现了多次 而我只要最后一次出现的O
        var a=str.lastIndexOf("o")
        console.log(a)//11

上面的函数是只能查找一个字母 即使你写了多个字母也还是只返回第一个字母返回的位置 这时候str.search(正则表达式) 如果找到返回下标 找不到返回-1 它还是只匹配一个。

  var str="老师:请用小红 我的 朋友造句。小亮: 小红是我的朋友。小然: 朋友！小红是我的！";
      str1=str.search(/小[\u4e00-\u9fa5]/)
      console.log(str1)// 查找到的是小红  返回的是5

这个函数 最大的优点就是可以使用正则 除了这个实在想不到了
上面3个函数只能查找到元素的下标 而不能返回内容

2.找到一个关键此的内容和下标
var arr= str.match(正则) 返回的是一个数组 arr[0] 是查找关键词的内容
arr.index 返回的是下标但是正则后面加上g 表示全局匹配 虽然能够找到所有但是不能返回关键词的位置了 如果没有找到呢返回null
例如

 var str="老师:请用小红 我的 朋友造句。小亮: 小红是我的朋友。小然: 朋友！小红是我的！";
    arr=str.match(/小[\u4e00-\u9fa5]/)
      arr2=str.match(/小[\u4e00-\u9fa5]/g)
      console.log(arr[0],arr.index)//小红  5
      console.log(arr2) //Array(5)
                      // 0: "小红"
                      // 1: "小亮"
                      // 2: "小红"
                      // 3: "小然"
                      // 4: "小红"
                      // length: 5

4匹配整个字符串是否符合规则
reg.test(str) 正确 返回true 错误返回false
例如

if(/^1[3-9]\d{9}$/.test(phone)){
  document.write(`<h1 style="color:green">验证通过</h1>`)//提示验证通过
}else{//否则
  //提示手机号格式不正确
  document.write(`<h1 style="color:red">手机号格式不正确</h1>`)
}

3.能够找到所有关键词的下标和位置
reg.exec(str) 能够查找所有符合条件的关键词 但是每次函数只是返回一组值 调用一次继续往后查找 直到没有符合的 返回null
. 原理:
i. exec每找到一个敏感词，就在数组中0位置放入本次敏感词的内容，在数组index位置放入本次敏感词的位置。
ii. exec每找到一个敏感词还会修改正则表达式reg对象内部的一个lastIndex为当前位置+敏感词.length。因为lastIndex控制着下次开始的位置，所以下次exec执行时，自动就可以跳过本次找到的敏感词向后找。
iii. 每找到一个新的敏感词，就覆盖旧的数组中的敏感词，所以exec一次只能返回一个当前敏感词的内容和位置。

var str="老师:请用小红 我的 朋友造句。小亮: 小红是我的朋友。小然: 朋友！小红是我的！";
//查找所有以小字开头的人名
var reg=/小[\u4e00-\u9fa5]/g;
  //  var arr=reg.exex(str)
  //  console.log(arr)
do{//循环找！
  //每次只找一个关键词的位置和内容
  var arr=reg.exec(str);
  console.log(arr)
  //如果找到就输出本次找到的
  if(arr!=null){
    console.log(`在位置 ${arr.index} 发现敏感词 ${arr[0]}，下次从 ${reg.lastIndex}开始`);
  }else{//否则如果找不到了就退出
    break
  }

6.字符串转为数组

str.split("") 这个可以无缝转为数组

   //  字符串无缝转接为数组
       var str="woaizhongguo"
      
        var arr=str.split("")
        console.log(arr)

有什么我没有提到的可以在评论中告诉我哦，大家一起交流学习。感谢阅读。