碼上歡樂
相關內容    簡體    繁體

js字符串操作總結(必看篇)

本文轉載自   查看原文   2018-04-17 10:54   1195 
1
2
3
4
5
<script type= "text/javascript" >
  var str = "www.taobao.com" ;
  var res = str.split( "" ).reverse().join( "" ).replace( 'oat' , '' );
  console.log(res); //moc.oab.www
</script>

字符方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>字符方法</title>
  </head>
  <body>
  <script type= "text/javascript" >
  /*
  charAt方法和charCodeAt方法都接收一個參數，基於0的字符位置
  charAt方法是以單字符字符串的形式返回給定位置的那個字符
  charCodeAt方法獲取到的不是字符而是字符編碼
   */
    var str= "hello world" ;
    console.log(str.charAt(1)); //e
    console.log(str.charCodeAt(1)); //101
    //還可以使用方括號加數字索引來訪問字符串中特定的字符
    console.log(str[1]); //e
  </script>
  </body>
</html>

字符串操作方法 concat方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>concat方法</title>
  </head>
  <body>
  <script type= "text/javascript" >
    var str= "hello " ;
    var res=str.concat( "world" );
    console.log(res); //hello world
    console.log(str); //hello  這說明原來字符串的值沒有改變
    var res1=str.concat( "nihao" , "!" );
    console.log(res1); //hello nihao!  說明concat方法可以接收任意多個參數
    //雖然concat方法是專門用來拼接字符串的，但是實踐中我們使用最多的還是加操作符+，因為其簡易便行
  </script>
  </body>
</html>

slice方法、substring方法、substr方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>字符串操作方法</title>
  </head>
  <body>
  <script type= "text/javascript" >
    /*
    slice方法：第一個參數指定子字符串開始位置，第二個參數表示子字符串最后一個字符后面的位置
    substring方法：第一個參數指定子字符串開始位置，第二個參數表示子字符串最后一個字符后面的位置
    substr方法：第一個參數指定子字符串開始位置，第二個參數表示返回的字符個數
    這三個方法都會返回被操作字符串的一個子字符串，都接收一或兩個參數
    如果沒有給這些方法傳遞第二個參數，則將字符串的長度作為結束位置。這些方法也不會修改字符串本身，只是返回一個基本類型的字符串值
     */
    var str= "hello world" ;
    console.log(str.slice(3)); //lo world
    console.log(str.substring(3)); //lo world
    console.log(str.substr(3)); //lo world
    console.log(str.slice(3,7)); //lo w  7表示子字符串最后一個字符后面的位置  簡單理解就是包含頭不包含尾
    console.log(str.substring(3,7)); //lo w
    console.log(str.substr(3,7)); //lo worl 7表示返回7個字符
    console.log(str.slice(3,-4)); //lo w  -4+11=7表示子字符串最后一個字符后面的位置  簡單理解就是包含頭不包含尾
    console.log(str.substring(3,-4)); //hel  會轉換為console.log(str.substring(3,0));
    //此外由於這個方法會將較小數作為開始位置，較大數作為結束位置，所以相當於調用console.log(str.substring(0,3));
    console.log(str.substr(3,-4)); //""空字符串
    console.log(str.substring(3,0));
  </script>
  </body>
</html>

字符串位置方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>字符串位置方法</title>
  </head>
  <body>
  <script type= "text/javascript" >
    /*
    indexOf方法和lastIndexOf方法都是從一個字符串中搜索給定的子字符串，然后返回子字符串的位置，如果沒有找到，則返回-1
    indexOf方法是從字符串的開頭向后搜索子字符串，lastIndexOf方法正好相反
    這兩個方法都可以接收兩個參數：要查找的子字符串和查找的位置
     */
    var str= "hello world" ;
    console.log(str.indexOf( "o" )); //4
    console.log(str.lastIndexOf( "o" )); //7
    console.log(str.indexOf( "o" ,6)); //7
    console.log(str.lastIndexOf( "o" ,6)); //4
  </script>
  </body>
</html>

trim方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>trim方法</title>
  </head>
  <body>
  <script type= "text/javascript" >
    /*
    trim方法用來刪除字符串前后的空格
     */
    var str= "   hello world   " ;
    console.log( '(' +str.trim()+ ')' ); //(hello world)
    console.log( '(' +str+ ')' ); //(   hello world   )
  </script>
  </body>
</html>

字符串大小寫轉換方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>大小寫轉換</title>
  </head>
  <body>
  <script type= "text/javascript" >
    var str= "HELLO world" ;
    console.log(str.toLowerCase()); //hello world
    console.log(str.toUpperCase()); //HELLO WORLD
  </script>
  </body>
</html>

字符串模式匹配方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>字符串模式匹配</title>
  </head>
  <body>
  <script type= "text/javascript" >
  /*
  match方法：只接受一個參數，由字符串或RegExp對象指定的一個正則表達式
  search方法：只接受一個參數，由字符串或RegExp對象指定的一個正則表達式
  search方法返回字符串中第一個匹配項的索引，如果沒有匹配項，返回-1
   */
  var str= "cat,bat,sat,fat" ;
  var pattern=/.at/;
  var matches=str.match(pattern);
  console.log(matches.index); //0
  console.log(matches[0]); //cat
  console.log(pattern.lastIndex); //0
  //lastIndex表示開始搜索下一個匹配項的字符位置，從0算起
  var pos=str.search(/at/);
  console.log(pos); //1 1表示at字符串在原來字符串中第一次出現的位置
  </script>
  </body>
</html>

replace方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>replace方法</title>
  </head>
  <body>
  <script type= "text/javascript" >
    var str= "cat,bat,sat,fat" ;
    var res=str.replace( "at" , "one" ); //第一個參數是字符串，所以只會替換第一個子字符串
    console.log(res); //cone,bat,sat,fat
    var res1=str.replace(/at/g, "one" ); //第一個參數是正則表達式，所以會替換所有的子字符串
    console.log(res1); //cone,bone,sone,fone
  </script>
  </body>
</html>

split方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>split方法</title>
  </head>
  <body>
  <script type= "text/javascript" >
  /*
  split方法是基於指定的字符，將字符串分割成字符串數組
  當指定的字符為空字符串時，將會分隔整個字符串
   */
    var str= "red,blue,green,yellow" ;
    console.log(str.split( "," )); //["red", "blue", "green", "yellow"]
    console.log(str.split( "," ,2)); //["red", "blue"]  第二個參數用來限制數組大小
    console.log(str.split(/[^\,]+/)); // ["", ",", ",", ",", ""]
    //第一項和最后一項為空字符串是因為正則表達式指定的分隔符出現在了子字符串的開頭，即"red"和"yellow"
    //[^...] 不在方括號內的任意字符  只要不是逗號都是分隔符
  </script>
  </body>
</html>

localeCompare方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>localeCompare方法</title>
  </head>
  <body>
  <script type= "text/javascript" >
    /*
    這個方法用於比較兩個字符串
    1.如果字符串在字母表中應該排在字符串參數之前，則返回一個負數
    1.如果字符串等於字符串參數，則返回0
    1.如果字符串在字母表中應該排在字符串參數之后，則返回一個正數
     */
    var str= "yellow" ;
    console.log(str.localeCompare( "brick" )); //1
    console.log(str.localeCompare( "yellow" )); //0
    console.log(str.localeCompare( "zoo" )); //-1
  </script>
  </body>
</html>

fromCharCode方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>fromCharCode方法</title>
  </head>
  <body>
  <script type= "text/javascript" >
    /*
    fromCharCode方法是接收一或多個字符編碼，然后將其轉換為字符串
    fromCharCode方法是String構造函數的一個靜態方法
     */
    console.log(String.fromCharCode(104,101,108,108,111)); //hello
  </script>
  </body>
</html>

找到匹配字符串所在的各個位置

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>字符串匹配</title>
  </head>
  <body>
  <script type= "text/javascript" >
  /*找到匹配字符串所在的各個位置*/
    var str= "asadajhjkadaaasdasdasdasd" ;
    var position=[];
    var pos=str.indexOf( "d" );
    while (pos>-1){
      position.push(pos);
      pos=str.indexOf( "d" ,pos+1);
    }
    console.log(position); //[3, 10, 15, 18, 21, 24]
  </script>
  </body>
</html>

字符串去重

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>字符串去重</title>
  </head>
  <body>
  <script type= "text/javascript" >
  //String.split() 執行的操作與 Array.join 執行的操作是相反的
  //split() 方法用於把一個字符串分割成字符串數組。
  //join方法用於將字符串數組連接成一個字符串
  //如果把空字符串 ("") 用作 separator，那么 stringObject 中的每個字符之間都會被分割。
    var str= "aahhgggsssjjj" ; //這里字符串沒有可以分隔的字符，所以需要使用空字符串作為分隔符
    function unique(msg){
      var res=[];
      var arr=msg.split( "" );
      //console.log(arr);
      for ( var i=0;i<arr.length;i++){
        if (res.indexOf(arr[i])==-1){
          res.push(arr[i]);
        }
      }
      return res.join( "" );
    }
    console.log(unique(str)); //ahgsj
  </script>
  </body>
</html>

判斷字符串中字符出現的次數

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang= "en" >
  <head>
    <meta charset= "utf-8" >
    <title>字符串操作</title>
  </head>
  <body>
  <script type= "text/javascript" >
  /*
  1.先實現字符串去重
  2.然后對去重后的數組用for循環操作，分別與原始數組中各個值進行比較，如果相等則count++,循環結束將count保存在sum數組中，然后將count重置為0
  3.這樣一來去重后的數組中的元素在原數組中出現的次數與sum數組中的元素是一一對應的
   */
    var str= "aacccbbeeeddd" ;
    var sum=[];
    var res=[];
    var count=0;
    var arr=str.split( "" );
    for ( var i=0;i<arr.length;i++){
      if (res.indexOf(arr[i])==-1){
        res.push(arr[i]);
      }
    }
    for ( var i=0;i<res.length;i++){
      for ( var j=0;j<arr.length;j++){
        if (arr[j]==res[i]){
          count++;
        }
      }
      sum.push(count);
      count=0;
    }
    console.log(res); //["a", "c", "b", "e", "d"]
    for ( var i=0;i<res.length;i++){
      var str=(sum[i]%2==0)? "偶數" : "奇數" ;
      console.log(res[i]+ "出現了" +sum[i]+ "次" );
      console.log(res[i]+ "出現了" +str+ "次" );
    }
  </script>
  </body>
</html>

阿里面試-字符串操作

?
1
2
3
4
5
<script type= "text/javascript" >
  var str = "www.taobao.com" ;
  var res = str.split( "" ).reverse().join( "" ).replace( 'oat' , '' );
  console.log(res); //moc.oab.www
</script>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 js字符串操作總結(必看篇) JS字符串常用方法總結 JS字符串常用方法總結 前端總結·基礎篇·JS（一）原型、原型鏈、構造函數和字符串（String） JS常用數組、字符串操作 js 字符串插入刪除操作 js字符串操作方法 js 字符串操作函數 js字符串操作方法 php操作redis--字符串篇
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM