1、字符串增加

1-1.concat()

.concat() —拼接字符串

  1. <script>
  2.         var str = "hello";
  3.         var b = " world";
  4.         console.log(str.concat(b));
  5.     </script>

image.png

1-2.+号拼接

  1. <script>
  2.         var str = "hello";
  3.         var b = " world";
  4.         console.log(str+b);
  5.     </script>

image.png

2、字符串查找

2-1.indexOf()

indexOf —可以查询字符串中某个字符的下标

  1. <script>
  2.         /* indexOf --可以查询字符串中某个字符的下标 */
  3.         var str = "hello";
  4.         console.log(str.indexOf("l")); 
  5.     </script>

image.png

2-2.slice()

slice(startIndex,endIndex) —截取字符串的某一段

  1. <script>
  2.         /* concat,indexOf,slice,includes */ 
  3.         /* slice(startIndex,endIndex) --截取字符串的某一段 */
  4.         var str = "hello";
  5.         console.log(str.slice(1,4))
  6.         /* includes */
  7.         var test = "hello world";
  8.         console.log(test.includes("world"))
  9.     </script>

image.png

2-3.includes()

includes() —判断字符串中是否含有内容

  1. var test = "hello world";
  2.         console.log(test.includes("world"))

image.png

2-4.substr()

substr(index,length) —截取字符串

  1. <script>
  2.         var str = "hello world";
  3.         /* substr(index,length) */ 
  4.         console.log(str.substr(1,3));
  5.     </script>

image.png

2-5.substring()

substring(startIndex,endIndex) —截取字符串

  1. <script>
  2.         var str = "hello";
  3.         /* ell substring */
  4.         /* substring(startIndex,endIndex) */  
  5.         var res = str.substring(1,4);
  6.         console.log(res);
  7.     </script>

image.png

2-6.charAt()

.charAt() —选取index位字符

  1. <script>
  2.         /* charAt */ 
  3.         var str = "hello";
  4.         console.log(str.charAt(1));
  5.         console.log(str[1]);
  6.     </script>

image.png

2-7.search()

indexOf()
search() —查找指定字符，并获取它的下标位置，如果不存在则返回-1
includes()

  1. <script>
  2.         /*
  3.         indexOf()
  4.         search()
  5.         includes()
  6.         */ 
  7.         var str = "hello world";
  8.         var res = str.search("r");
  9.         console.log(res);
  10.         console.log(str.search("a"))
  11.     </script>

image.png

2-8.match()

match返回的是一个数组，将匹配的第一个字符返回为一个数组
1、存在 返回数组
2、不存在 返回null

  1. <script>
  2.         /* match返回的是一个数组，将匹配的字符返回一个数组 */ 
  3.         /* 
  4.         1、存在     数组
  5.         2、不存在   null
  6.         */ 
  7.         var str = "你好你来你的";
  8.         var res = str.match("你");
  9.         console.log(res);
  10.     </script>

image.png

3、字符串修改

3-1.replace()

replace(修改的旧值，赋予的新值)

  1. <script>
  2.         /* replace */
  3.         var str = "你好";
  4.         /* 他好 */
  5.         console.log(str.replace("你","他"));
  6.         var s = "hello";
  7.         console.log(s.replace("l","*"))
  8.     </script>

image.png

4、字符串的其他方法

4-1.split()字符串分割

split() —分割，将字符串转化为数组

  1. <script>
  2.         /* split() --分割，将字符串转化为数组 */ 
  3.         var str = "hello";
  4.         console.log(str.split());
  5.         console.log(str.split(""));
  6.         console.log(str.split("e"));
  7.     </script>

image.png

例子

1.将字符串中大于3的字数用。。。表示

  1. <script>
  2.         var arr = [
  3.             "你好",
  4.             "添加了附近",
  5.             "杀鸡打击的速度",
  6.             "暗示大家大赛的骄傲"
  7.         ]
  8.         for(var i=0;i<arr.length;i++){
  9.             var test = arr[i];
  10.             if(test.length>3){
  11.                 console.log(test.substr(0,3)+"...");
  12.             }else{
  13.                 console.log(test);
  14.             }
  15.         }
  16.     </script>

image.png
map方法并表示为数组

  1. <script>
  2.         var arr = [
  3.             "你好",
  4.             "添加了附近",
  5.             "杀鸡打击的速度",
  6.             "暗示大家大赛的骄傲"
  7.         ]
  8.         var res = arr.map(item=>{
  9.             if(item.length>3){
  10.                 item = item.substr(0,3)+"..."
  11.             }
  12.             return item
  13.         })
  14.         console.log(res)
  15.     </script>

image.png

2.输入框搜索关键字显示含有的字符串并大于3的用。。。表示

  1. <input type="text" id="input">
  2.     <script>
  3.         var arr = [
  4.             "你好",
  5.             "添加了附近的你",
  6.             "杀鸡打击的速度",
  7.             "暗示大家大赛的骄傲"
  8.         ]
  9.         $("#input").keyup(function(event){
  10.             if(event.keyCode==13){
  11.                 var value = $(this).val();
  12.                 var res = arr.filter(item=>{
  13.                     return item.includes(value);
  14.                 })
  15.                 console.log(res)
  16.                 var lists = res.map(item=>{
  17.                     if(item.length>3){
  18.                         item = item.substr(0,3)+"...";
  19.                     }
  20.                     return item
  21.                 })
  22.                 console.log(lists);
  23.             }
  24.         })
  25.     </script>

image.png

3.搜索框输入id显示对应的内容对象并在name+。。。

  1. <input type="text" id="app">
  2.     <script>
  3.         var arr = [
  4.             {id:1001,name:"html"},
  5.             {id:1002,name:"css"},
  6.             {id:1003,name:"js"},
  7.         ]
  8.         $("#app").keyup(function(event){
  9.             if(event.keyCode==13){
  10.                 var value = $(this).val();
  11.                 console.log(value);
  12.                 var res = arr.filter(item=>{    //var res = arr.find(item=>{})
  13.                     if(item.id==value){
  14.                         item.name = item.name.concat("...")
  15.                         return item
  16.                     }
  17.                 })
  18.                 console.log(res);
  19.             }
  20.         })
  21.     </script>

image.png

4.颠倒字符串

  1. <script>
  2.         var str = "hello";
  3.         var arr = str.split("");
  4.         arr.reverse();
  5.         console.log(arr.join(""));
  6.         /*  */
  7.     </script>

image.png

5.提取字符串内容生成对象

  1. <script>
  2.         var str = "?key=你&age=18";
  3.         var res = str.slice("1");
  4.         var lists = res.split("&");
  5.         console.log(lists);
  6.         var key = lists[0];
  7.         var age = lists[1];
  8.         key = key.split("=")[1];
  9.         age = age.split("=")[1];
  10.         var obj = {
  11.             key,
  12.             age
  13.         }
  14.         console.log(obj);
  15.     </script>

image.png
优化forEach()方法

  1. <script>
  2.         var str = "?key=你&age=18&offset=10"
  3.         var arr = str.slice(1).split("&");
  4.         console.log(arr);
  5.         var lists = [];
  6.         arr.forEach(item=>{
  7.             var res = item.split("=");
  8.             console.log(res);
  9.             var obj = {};
  10.             obj[res[0]]=res[1];
  11.             console.log(obj)
  12.             lists.push(obj)
  13.         })
  14.         console.log(lists);
  15.     </script>

image.png
优化map()方法

  1. <script>
  2.         var str = "?key=你&age=18&offset=10"
  3.         var arr = str.slice(1).split("&");
  4.         console.log(arr);
  5.         var res = arr.map(item=>{
  6.             var obj={};
  7.             var list = item.split("=");
  8.             // console.log(list);
  9.             obj[list[0]]=list[1];
  10.             console.log(obj);
  11.             return obj;
  12.         })
  13.         console.log(res)
  14.     </script>

image.png

综合例子

  1. <script>
  2.         var url = "https://music.163.com/#/discover/playlist?order=hot&cat=你&limit=35&offset=140"
  3.         /* 1、order=hot&cat=你&limit=35&offset=140 */ 
  4.         /* 2、['order=hot', 'cat=你', 'limit=35', 'offset=140'] */ 
  5.         var arr = url.split("?")[1].split("&");
  6.         console.log(arr);
  7.         var list = [];
  8.         arr.forEach(item=>{
  9.             var res = item.split("=");
  10.             console.log(res);
  11.             var obj={};
  12.             /* 3、需要让数组的每一项中
  13.                 第一项作为key
  14.                 第二项作为value
  15.             */ 
  16.             obj[res[0]]=res[1];
  17.             // console.log(obj)
  18.             list.push(obj);
  19.         })
  20.         console.log(list);
  21.     </script>

image.png