第190天:js—String常用屬性和方法(最全)

半指溫柔樂發表於2018-03-11

String常用屬性和方法

一、string物件建構函式

 1  /*string物件建構函式*/
 2     console.log(`字串即物件`);//字串即物件
 3     //傳統方式 - 背後會自動將其轉換成物件
 4     // 所以我們才可以訪問string物件中方法
 5     var zhangsan =`張三`
 6     zhangsan.length;
 7     //通過物件形式
 8     var lisi = new String(`李四`);
 9     console.log(zhangsan);//張三
10     console.log(lisi);//String
11 
12     //使用物件中的方法
13     console.log(lisi.charAt(0));//
14     console.log(lisi.concat([`張領`,`王佔一`]));//李四張領,王佔一

二、字串物件屬性和方法概述

  • 獲取字串長度Length屬性
  • 連線字串:concat
  • 獲取索引值:indexOf()
  • 根據索引值獲取單個字元:charAt()

1、concat方法   連線字串

 1 console.log(`concat用法`)
 2 
 3     var s1="a";
 4     var s2="b";
 5     var s3="c";
 6     console.log(s1.concat(s2,s3));//abc
 7 //    等同於:result = s1 + s2 + ... + s
 8 //    關聯記憶:陣列中的concat
 9     var arr = [1, 2, 3];
10     console.log(arr.concat(4, 5));//[1,2,3,4,5]

2、indexOf 找到匹配項返回索引值,如果沒找到返回-1

 1 /*indexOf 找到匹配項返回索引值,如果沒找到返回-1*/
 2 console.log(`indexOf用法`)
 3 
 4 //  獲取索引值indexOf
 5 //  常用方法:找到匹配項返回索引值,如果沒找到返回-1
 6     var myString="JavaScript";
 7     var a1=myString.indexOf("v");//2
 8     var a2=myString.indexOf("S");//4
 9     var a3=myString.indexOf("Script");//4
10     var a4=myString.indexOf("key");
11 
12     //如果沒有匹配項返回 -1
13     console.log(a1)//2
14     console.log(a2)//4
15     console.log(a3)//4
16     console.log(a4)//-1
17 
18 //    完整的indexof用法:
19 //    可以傳入第二個引數:indexOf(str,fromIndex)
20 //    表示從索引位置fromIndex開始查詢,如果fromIndex省略,則表示預設從起始索引0開始查詢;
21 //    若fromIndex為負,則從索引0開始查詢。
22     var b1 = myString.indexOf("v",5);// 從下標5開始查詢,而v在索引2,所以找不到,返回-1
23     var b2 = myString.indexOf("v",1);//-2
24     console.log(b1)//-1
25     console.log(b2)//-2

3、charAt 返回指定索引位置的字元,若索引越界,返回空字串。

1 //返回指定索引位置的字元
2 //(因為Javascript中沒有字元型別,所以返回的是長度為1的字串)。
3     myString="JavaScript";
4     console.log(myString.charAt(1));//a
5     console.log(myString.charAt(1000000));//若索引越界,返回空字串
6     console.log(myString.charAt(-1));//若索引越界,返回空字串  -- ""
7     console.log(myString.charAt(-10000000000));//若索引越界,返回空字串  ""

4、substr(fromIndex,length)  獲取部分字串

 1 /*substr(fromIndex,length)  獲取部分字串
 2    從起始索引fromIndex開始擷取長度length的字串*/
 3 console.log(`substr用法`)
 4 
 5 //從起始索引fromIndex開始擷取長度length的字串 - 正向擷取
 6     myString="JavaScript";
 7     console.log(myString.substr(1,1));//a          表示從第1個索引值開始擷取,擷取1個字元
 8     console.log(myString.substr(1,2));//av     表示從第1個索引值開始擷取,擷取2個字元
 9     console.log(myString.substr(1,3));//ava        表示從第1個索引值開始擷取,擷取3個字元
10     console.log(myString.substr(1,4));//avaS       表示從第1個索引值開始擷取,擷取4個字元
11 
12     //若不指定length或者length超過可擷取的最大長度,則擷取到結尾。
13     console.log(myString.substr(1));//avaScript
14     console.log(myString.substr(1,4000000));//avaScript
15 
16 
17     //反向擷取
18     //若起始索引為負,則從右往左開始擷取  -1表示倒數第一個, -2表示倒數第二個
19     myString="JavaScript";
20     console.log(myString.substr(-1,1));//t  表示從倒數第一個開始擷取,擷取1個字元
21     console.log(myString.substr(-2,1));//p  表示從倒數第二個開始擷取,擷取1個字元
22     console.log(myString.substr(-3,1));//i  表示從倒數第三個開始擷取,擷取1個字元
23     console.log(myString.substr(-4,1));//r  表示從倒數第四個開始擷取,擷取1個字元
24     console.log(myString.substr(-5,1));//c  表示從倒數第五個開始擷取,擷取1個字元
25     console.log(myString.substr(-6,1));//S  表示從倒數第六個開始擷取,擷取1個字元
26     console.log(myString.substr(-7,1));//a  表示從倒數第七個開始擷取,擷取1個字元
27 
28     myString="JavaScript";
29     console.log(myString.substr(-6,1));//S  表示從倒數第6個開始擷取,擷取1個字元
30     console.log(myString.substr(-6,2));//Sc  表示從倒數第6個開始擷取,擷取2個字元
31     console.log(myString.substr(-6,3));//Scr  表示從倒數第6個開始擷取,擷取3個字元
32     console.log(myString.substr(-6,4));//Scri  表示從倒數第6個開始擷取,擷取4個字元
33     console.log(myString.substr(-6,5));//Scrip  表示從倒數第6個開始擷取,擷取5個字元
34     console.log(myString.substr(-6,6));//Script  表示從倒數第6個開始擷取,擷取6個字元
35 
36     //從倒數的方式開始擷取,獲取av
37     myString="JavaScript";
38     console.log(myString.substr(-9,2));//av 表示從倒數第9個開始擷取,擷取2個字元
39 
40     //整數的方式獲取曲線S
41     //首先思考 我要獲取幾個字元,則後面的引數就確定了
42     myString="JavaScript";
43     console.log(myString.substr(4,1));//S  表示從索引值4開始擷取,擷取1個字元
44     console.log(myString.substr(-6,1));//S  表示從倒數第6個開始擷取,擷取1個字元

5、substring(startIndex,endIndex)  獲取部分字串

 1 /*substring(startIndex,endIndex)獲取部分字串
 2        擷取 起始索引startIndex  到  結束索引endIndex的子字串,
 3         結果包含startIndex處的字元,不包含endIndex處的字元。
 4      */
 5     console.log(`substring用法`)
 6     //獲取av
 7     myString="JavaScript";
 8     console.log(myString.substring(1,3));//av
 9 
10     //獲取曲線S
11     myString="JavaScript";
12     console.log(myString.substring(4,5));//S
13 
14     //其他小點:
15     //如果省略個數,則自動獲取後面所有
16      console.log(myString.substring(4));//Script
17     //若startIndex或者endIndex為負,則會被替換為0。
18     console.log(myString.substring(-1,1));//J
19     //若startIndex = endIndex,則返回空字串。
20     console.log(myString.substring(3,3));// 返回空
21     //若startIndex > endIndex,則執行方法時,兩個值會被交換。
22     console.log(myString.substring(3,1));//av  等價於myString.substring(1,3)

6、slice(startIndex,endIndex)   獲取部分字串

 1 /*slice(startIndex,endIndex)獲取部分字串
 2        擷取 起始索引startIndex  到  結束索引endIndex的子字串,
 3         結果包含startIndex處的字元,不包含endIndex處的字元。
 4      */
 5     console.log(`slice(startIndex,endIndex)用法`);
 6     myString="JavaScript";
 7     console.log(myString.slice(1,3)) //av
 8     console.log(myString.slice(4,5)) //S
 9     console.log(myString.slice(4)) //Script  //如果省略個數,則自動獲取後面所有
10 
11     // 基本用法和substring用法一樣,不同點如下:
12 
13 //    stringObj.slice(start, [end])
14 //    如果 start 為負,將它作為 length + start處理,此處 length 為陣列的長度。
15        console.log(myString.slice(-1,2));
16 //    如果 end 為負,就將它作為 length + end 處理,此處 length 為陣列的長度。
17        console.log(myString.slice(2,-3));//vaScr
18 //    如果省略 end ,那麼 slice 方法將一直複製到 arrayObj 的結尾。
19 //    如果 end 大於 start,不復制任何元素到新陣列中。
20 //
21 //    strVariable.substring(start, end)
22 //    如果 start 或 end 為 NaN 或者負數,那麼將其替換為0。
23 //    子字串的長度等於 start 和 end 之差的絕對值。例如,在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字串的的長度是 3。
24 //    slice可以對陣列操作,substring不行。。。

7、split() 分割

1 /*split()分割
2        按給定字串分割,返回分割後的多個字串組成的字串陣列。
3      */
4     console.log(`split()用法`)
5     var s="a,bc,d";
6     console.log(s.split(","));//["a", "bc", "d"]
7     s="a1b1c1d1";
8     console.log(s.split("1"));//["a", "b", "c", "d", ""]

8、join()合併

 1 /*join()合併 使用您選擇的分隔符將一個陣列合併為一個字串*/
 2     console.log(`join用法`)
 3     var myList=new Array("jpg","bmp","gif","ico","png");
 4     var imgString=myList.join("|");//結果是jpg|bmp|gif|ico|png
 5     console.log(imgString);
 6 
 7 
 8     //split()還可以結合正規表示式
 9     myString = `javascript is a good script language`;
10     console.log(myString.split(/s/)); //javascript,is,a,good,script,language
11     //傳入s表示要匹配空格,我們將字串分割為一個陣列,如果你要訪問某一個,那麼可以明確指出:
12     console.log(myString.split(/s/)[3]); //good

9、字串大小寫轉換

 1  /*字串大小寫轉換
 2      使用您選擇的分隔符將一個陣列合併為一個字串
 3      */
 4     console.log(`字串大小寫轉換`);
 5 
 6     myString="JavaScript";
 7     myString = myString.toLowerCase();
 8     console.log(myString);//javascript
 9     myString = myString.toUpperCase();
10     console.log(myString);//JAVASCRIPT

10、replace用法

  1 /*replace用法1 - 基礎用法
  2      最核心的易錯點:如果要替換全部匹配項,需要傳入一個 RegExp 物件並指定其 global 屬性。
  3      */
  4     console.log(`replace基本用法`);
  5 
  6     //基本用法:
  7     myString = "javascript is a good script language";
  8     //在此我想將字母a替換成字母A
  9     console.log(myString.replace("a","A"));//jAvascript is a good script language
 10     //    我想大家執行後可以看到結果,它只替換了找到的第一個字元,如果想替換多個字元怎麼辦?
 11     //    答案:結合正規表示式,這也是replace的核心用法之一!
 12 
 13 
 14     //將字母a替換成字母A  正確的寫法 /g表示匹配所有
 15     myString = "javascript is a good script language";
 16     console.log(myString.replace(/a/g,"A"));//jAvAscript is A good script lAnguAge
 17 
 18 
 19 
 20     /*replace用法2 - 高階用法 特殊標記$*/
 21 
 22 
 23     //replace高階技巧 - 特殊標記$
 24     console.log(`replace功能4 - 特殊標記$`);
 25 
 26     //    對於正則replace約定了一個特殊標記符$:
 27     //    1.$i (i:1-99) : 表示從左到右正則子表示式所匹配的文字。
 28     //    2.$&:表示與正規表示式匹配的全文字。
 29     //    3.$`(`:切換技能鍵):表示匹配字串的左邊文字。
 30     //    4.$`(‘:單引號):表示匹配字串的右邊文字。
 31     //    5.$$:表示$轉移。
 32 
 33 
 34 //    $i (i:1-99) : 表示從左到右正則子表示式所匹配的文字
 35 
 36     //案例1- 匹配後替換
 37     console.log(`replace功能1 - 匹配後替換`);
 38     //在本例中,我們將把所有的花引號替換為直引號:
 39     myString = `"a", "b"`;
 40     myString = myString.replace(/"([^"]*)"/g, "`$1`");// 尋找所有的"abb"形式字串,此時組合表示字串,然後用`$1`替換
 41     console.log(myString);//`a`, `b`
 42 
 43 
 44 
 45     //案例2- 匹配後替換
 46     myString= "javascript is a good script language";
 47     console.log(myString.replace(/(javascript)s*(is)/g,"$1 $2 fun. it $2"));//javascript is fun. it is a good script language
 48 
 49 
 50 
 51     //案例3 - 分組匹配後顛倒
 52     console.log(`replace功能2 - 顛倒`);
 53     //在本例中,我們將把 "baidu,com" 轉換為 "com baidu" 的形式:
 54     myString = "baidu , com";
 55     myString = myString.replace(/(w+)s*, s*(w+)/, "$2 $1");
 56     console.log(myString);//com baidu
 57 
 58 
 59     //案例4 - 分組匹配後顛倒
 60     myString = "boy & girl";
 61     myString.replace(/(w+)s*&s*(w+)/g,"$2 & $1") 
 62     console.log(myString);//girl & boy
 63 
 64 
 65 
 66 //    $&:表示與正規表示式匹配的全文字。
 67     myString = "boy";
 68     myString.replace(/w+/g,"$&-$&"); 
 69     console.log(myString);// boy-boy
 70 
 71 //    $`(`:切換技能鍵):表示匹配字串的左邊文字。
 72     myString = "javascript";
 73     myString.replace(/script/,"$& != $`");
 74     console.log(myString); //javascript != java
 75 
 76 //    $`(‘:單引號):表示匹配字串的右邊文字。
 77     myString = "javascript";
 78     myString.replace(/java/,"$&$` is "); 
 79     console.log(myString);// javascript is script
 80 
 81 
 82 
 83     /*replace用法2 - 高階用法 第二個引數可以是函式 - 最常用 必考點*/
 84 
 85      //無敵的函式 - replace第二個引數可以傳遞函式
 86     //如果第二引數是一個函式的話,那麼函式的引數是什麼呢?
 87     console.log(`replace功能5 - 無敵的函式 - replace第二個引數可以傳遞函式`);
 88     myString = "bbabc";
 89     myString.replace(/(a)(b)/g, function(){
 90         console.log(arguments); // ["ab", "a", "b", 2, "bbabc"]
 91     });
 92 //    引數將依次為:
 93 //    1、整個正規表示式匹配的字元。
 94 //    2、第一分組匹配的內容、第二分組匹配的內容…… 以此類推直到最後一個分組。
 95 //    3、此次匹配在源自符串中的下標(位置)。
 96 //    4、源自符串
 97 //    所以例子的輸出是 ["ab", "a", "b", 2, "bbabc"]
 98 
 99 
100     //用法舉例  首字母大寫 -- 一個引數 表示匹配的整個字串
101     console.log(`replace功能3 - 將首字元轉為大寫`);
102 
103     //在本例中,我們將把字串中所有單詞的首字母都轉換為大寫:
104     myString = `aaa bbb ccc`;
105     myString=myString.replace(/w+/g, function(word){
106                 return word.substring(0,1).toUpperCase()+word.substring(1);}
107     );
108     console.log(myString);//Aaa Bbb Ccc
109 
110 
111 
112     //用法舉例  首字母大寫 -- 多個引數 - 第一個表示匹配的整個字串,後面的表示分組中的內容
113     function capitalize(str){
114         return str.replace( /(^|s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
115         } );
116 
117     };
118     myString = "i am a boy !"
119     console.log(capitalize(myString)) //I Am A Boy!

11、正規表示式基礎知識

 1 //正規表示式基礎知識
 2 
 3     //星號(*) : 星號代表匹配它前面一個字元任意遍(0或任意次)
 4 
 5     //加號(+): 加號是一個與星號(*)類似的萬用字元,它也是數量詞,表示匹配前面的字元一次或多次(至少一次).
 6                 //它與星號的差別就在這裡,星號可以匹配0次,加號則必須一次以上。
 7 
 8     //問號(?): 問號也是一個數量詞,它代表匹配前一個字元0或1次。
 9 
10 
11     //中括號[]: 中括號用來表示一個字符集合,
12                 //如果這個集合有很多元素,如26個字母,數字等,一個個地寫在中括號裡,未免太麻煩太蠢笨,
13                 //這時可以用連字元(hyphen)來表示一個範圍,
14                 // 如:[a-z]表示小寫字母的集合,
15                 // [a-zA-Z]表示大小寫字母的集合。
16                 // 脫字元^ (caret).
17                 // 這種寫法表示,匹配任何不在該集合中的字元,與上面的用法剛好相反
18 
19 
20     //特殊字元:
21     //    w -- (小寫w) 表示字母或數字,等價於 [a-zA-Z0-9]
22     //    W -- (大寫W)非字母且非數字,與w相反 等價於 `[^A-Za-z0-9_]`
23     //    s  --  (小寫s)匹配一個空格字元,包括:空格,換行,回車,tab,等價於[ 

	f]
24     //    S --  (大寫S)匹配非空格字元,s的相反 等價於 [^ f

	v]。
25     //    d -- 表示10進位制數字,等價於 [0-9]
26     //    D --    匹配一個非數字字元。等價於 [^0-9]。
27 
28     //    f    匹配一個換頁符。等價於 x0c 和 cL。
29     //    
    匹配一個換行符。等價於 x0a 和 cJ。
30     //    
    匹配一個回車符。等價於 x0d 和 cM。
31     //    	    匹配一個製表符。等價於 x09 和 cI。
32     //    v    匹配一個垂直製表符。等價於 x0b 和 cK。
33 
34 
35 
36     //    大括號:{}
37     //    大括號的作用是指定重複前面一個字元多少遍:
38     //    {N} 重複N遍
39     //    {n,m} 重複 n~m 遍
40     //    {n,}  至少重複n遍
41     //    {,m} 至多重複m遍
42 
43 
44 //定位符:
45     //    ^        匹配輸入字串的開始位置。
46     //    $        匹配輸入字串的結束位置。
47     //        匹配一個單詞邊界,也就是指單詞和空格間的位置。//例如, `er` 可以匹配"never" 中的 `er`,但不能匹配 "verb" 中的 `er`。
48     //    B    和相反,匹配非單詞邊界。`erB` 能匹配 "verb" 中的 `er`,但不能匹配 "never" 中的 `er`。

12、常用字串擴充

封裝框架

  1 //定義一個物件 - 名字是$
  2 var $$ = function() {
  3 
  4 };
  5 //第二種寫法
  6 $$.prototype = {
  7     init:function(){
  8         this.stringExtend();
  9         this.MathExtend();
 10     },
 11     stringExtend:function(){
 12 
 13         /*新增一個方法*/
 14         String.prototype.formateString=function(data){
 15             return this.replace(/@((w+))/g, function(match, key){
 16                 return typeof data[key] === "undefined" ? `` : data[key]});
 17         }
 18 
 19         /*trim是ES5新增的,以前的版本不支援,一般我們在程式設計的時候不會直接使用ES5,所以必須自己擴充*/
 20         String.prototype.trim = function() {
 21             return this.replace(/(^s*)|(s*$)/g, "");
 22         }
 23 
 24         /*字串-去掉前空白字元 */
 25         String.prototype.ltrim = function(){
 26             return this.replace(/(^s*)/g, "");
 27         }
 28 
 29         /**
 30          *字串-去掉後空白字元
 31          */
 32         String.prototype.rtrim = function(){
 33             return this.replace(/(s*$)/g, "");
 34         }
 35 
 36         /**
 37          * 將一個字串的首字母大寫,其它字元小寫
 38          */
 39         String.prototype.capitalize= function() {
 40             return this.trim().replace(/^(w{1})(.*)/g, function(match, g1, g2) {
 41                 return g1.toUpperCase() + g2.toLowerCase();
 42             });
 43         }
 44 
 45         /**
 46          * 將字串中的下劃線轉換成中劃線
 47          */
 48         String.prototype.dashString = function() {
 49             return this.replace(/\_/g, `-`);
 50         }
 51 
 52         /**
 53          * 檢測字串是否是空串
 54          */
 55         String.prototype.isEmpty = function() {
 56             return this.length === 0;
 57         }
 58 
 59         /**
 60          * 檢測字串是否包含特定的字串
 61          */
 62         String.prototype.contains = function(target) {
 63             return this.indexOf(target) !== -1;
 64         }
 65 
 66         /**
 67          * 對字串中的特殊字元進行轉義,避免XSS
 68          */
 69         String.prototype.escapeHTML=function() {
 70         //轉義後的字元是可以直接設定成innerHTML的值。
 71         //replace(/&/g, `&`)這條replace()呼叫一定要寫在所有的特殊字元轉義的前面,不然轉換後有&符號的會再被轉一次
 72             return this.replace(/&/g, `&`)
 73                 .replace(/</g, `&lt;`)
 74                 .replace(/>/g, `&gt;`)
 75                 .replace(/`/g, `&#39;`)
 76                 .replace(/"/g, `&quot;`);
 77 },
 78 
 79         /**
 80          * 對字串進行反轉義
 81          */
 82          String.prototype.unescapeHTML = function() {
 83             return this.replace(/&amp;/, `&`)
 84                 .replace(/&lt;/g, `<`)
 85                 .replace(/&gt;/g, `>`)
 86                 .replace(/&#39;/g, ```)
 87                 .replace(/&quot;/g, `"`)
 88                 .replace(/&#(d+)/g, function($0, $1) {
 89                     return String.formCharCode(parseInt($1, 10));
 90                 });
 91         }
 92 
 93 
 94         /**
 95          * 取得字串的逆序
 96          */
 97         String.prototype.reverse = function() {
 98             return (this.toString()).split(``).reverse().join(``);
 99         }
100 
101     },
102     MathExtend:function(){
103 
104     },
105     $id:function(id){
106         return document.getElementById(id)
107     },
108     //去除左邊空格
109     ltrim:function(){
110         return str.replace(/(^s*)/g,``);
111     },
112     //去除右邊空格
113     rtrim:function(){
114         return str.replace(/(s*$)/g,``);
115     },
116     //去除空格
117     trim:function(){
118         return str.replace(/(^s*)|(s*$)/g, ``);
119     }
120 
121 }
//在框架中例項化,這樣外面使用的使用就不用例項化了
122 $$ = new $$(); 123 $$.init();

例項:

 1 <script>
 2     /*去除空格*/
 3     var str = `    百度一下`
 4     console.log(str.trim());//百度一下
 5 
 6     /*首字母大寫*/
 7     var baidu = `baidu`
 8     console.log(baidu.capitalize());//Baidu
 9 
10     /*下劃線轉成中劃線*/
11     var str = `1_2_3_4`
12     console.log(str.dashString());//1-2-3-4
13 
14     /*判斷是否為空*/
15     str = ``
16     console.log(str.isEmpty());//true
17 
18     /*判斷是否包含指定字串*/
19     str = `我們一起走,一起唱歌,你妹,祖宗`
20     console.log(str.contains(`祖宗`));//true
21 
22 
23     /*html編碼和解碼*/
24     str = `<div>hello</div>`
25     console.log(str.escapeHTML());//&lt;div&gt;hello&lt;/div&gt;
26     console.log(str.unescapeHTML());//<div>hello</div>
27 
28     /*獲取逆序*/
29     str = `abcdefg`
30     console.log(str.reverse());//gfedcba
31 </script>

13、獲取隨機數

 1 <script>
 2 
 3     //隨機選取
 4     //獲取10個10-100之間的隨機數,並從小到大排序放到一個陣列中
 5     function getRandom (begin,end){
 6         return Math.floor(Math.random()*(end-begin))+begin;
 7     }
 8 
 9 
10     function getRandomList(){
11         var iArray = [];
12         for(var i=0; i<10; i++){
13             iArray.push(getRandom(10,100));
14         }
15         iArray.sort();
16         return iArray
17 
18     }
19 
20    var arr = getRandomList()
21     console.log(arr);
22     //Array(10)
23     //0:20
24     //1:22
25     //2:23
26     //3:28
27     //4:56
28     //5:61
29     //6:63
30     //7:70
31     //8:73
32     //9:97
33     //length:10
34 </script>

 


相關文章