點擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!
【String - 字符串】
什麼叫學習?那就是學別人的東西。像我這樣-
什麼叫好好學習?那就是把別人的的東西學好。像我這樣-
好好學習,天天向上。像我這樣-
不錯,上面都是扯淡,下面要說的東西是才是認真的。
在JavaScript代碼中,一種出現頻率特別高的數據類型,幾乎每一次代碼中,我們都需要通過使用一些方式方法去處理它,從而得到我們想要的結果,這些方式方法,各種各樣,各自有各自的特點和用法,在這裡,不管是複習還是學習,小鄭給大家總結一下,ECMAScript中所有關於字符串的處理方式。
重要說明:為了讓了手速度能跟上思維,大部分舉例我都會通過chrome控制檯完成。有不適應者,請適應。
一、關於字符串分割
1、slice
語法:slice(start,end)
關於這個方法,一定要搞懂四個關鍵點:
(1)截取字符串時不包括下標為end的元素。
(2)end是可選參數,沒有時,默認從start到結束的所有字符串。
(3)String.slice與Array.slice區別。
(4)參數為負數時,是如何處理的。
其中第3點其實就是在JavaScript中字符串和數組都具有這個方法,它們的返回結果形式不一樣,一個是一段字符串,一個是一段淺複製後的數組。另外三個點接著往下看你就會明白。
2、substr
語法:substr(start,length)
關於這個方法,也需要搞懂幾個關鍵點:
(1)第二個參數是子串中的字符數,必須是數值。可以沒有。
(2)參數為負數時如何進行處理。
(3)最重要一點來自官網說明,如下所示:
由於substr() 的參數指定的是子串的開始位置和長度,因此它可以替代 substring() 和 slice() 來使用。
3、substring
語法:substring(start,stop)
關於這個方法,同樣需要搞懂幾個關鍵點:
(1)返回的字符串中不包括 stop 處的字符。
(2)參數為負數時如何進行處理。
(3)如果參數 start 與 stop 相等,那麼該方法返回的就是一個空串(即長度為 0 的字符串)。
(4)如果 start 比 stop 大,那麼該方法在提取子串之前會先交換這兩個參數。
這個方法的作用同樣可以使用slice方法來替代。
在講第四個方法之前,先來捋一捋上面這三個方法的區別和使用:
(一):都接收兩個參數,slice和substring接收的是起始位置和結束位置(注意:不包括結束位置),而substr接收的則是起始位置和所要返回的字符串長度。
我想,下面這個例子足夠說明這一點:
看一下控制檯運行出來的結果,其中slice/substring都是從0開始截取3到6位置但不包括6位置的字符串"lo ",對比之下,substr截取3位置之後的6個字符串"lo wor"。
(二):需要注意substring是以兩個參數中較小一個作為起始位置,較大的參數作為結束位置。
來,在控制檯驗證一下:
上面這個(6,3)會默認變成(3,6)將小的當起始位置來處理。
接下來第三點很關鍵,一定要記清楚,雖然不常用,但用了就很容易出BUG。
(三):參數為負數時如何解析。
(我認為這種負數的情況就應該在標準中禁止掉,參數中有負數時直接報錯就行,可現在竟然能為負數,那我們只有兩條出路:1,避免在code的時候出現它;2,就是今天我們要做的,徹底搞懂它。一次性消滅掉)
slice:將字符串的長度與對應的負數相加,結果作為參數。
substr:只會將第一個參數與字符串長度相加後的結果作為第一個參數(第一個參數為負數)。
substring:直接將負參數直接轉成0。
下面我來舉個例子,因為有一個參數和兩個參數的情況,所以,我得分別舉兩種情況的例子,把這個問題講明白。
第一,先看一個參數的情況:
解釋一下上面的結果:字符串長度是11,(11-3=8),所以slice(-3)和substr(-3)從下標為8的字母開始。得到的結果就是"rld"。而substring直接將負數據轉為0,所以輸出結果就是"hello world"。
第二,看一下兩個參數的情況:
先回憶一下上面的定義:
slice:長度與負數相加作為參數。
substring:負數直接轉為0。
substr:僅將第一個參數與長度相加作為第一個參數。
解釋一下輸出的結果:slice(3,11-4)就是從下標3截取到下標7的字符串,這裡就是"lo w"。substring(3,0),其中-4直接轉成0,所以由定義從下標0截取到3,這裡表示"hel"。最後一個substr第一個參數不是負數,第二個表示長度的參數為負數時,輸出只能是空字符串。
語法:split(separator,howmany)
這個方法作用就是將一個字符串分割成字符串數組。
需要記住兩個地方:
1、separator可以是字符串或正則表達式。
2、howmany可選參數,表示返回數組的最大長度。
舉兩個例子:
上面separator是正則表達式的情況。
再來看一個擁有howmany參數的情況。
來闡述一下。split方法把一個字符串string分割成片段創建一個字符串數組,可選參數howmany可以限制被分割的片段的數量。separator參數可以是一個字符串或一個正則表達式。
二、其它字符串處理方法
1、charAt(pos)
返回指定位置(如上pos)的字符。如果pos小於0或者大於等於字符串的長度string.length,它會返回空字符串。
charAt其實可以像下面這樣實現:
2、charCodeAt(pos)
和上面那個方法類似,只是它返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。
3、concat(string...)
用於連接兩個或者多個字符串。相較於數組Array.concat()。其實字符串到是用的不多,主要是之前使用加號(+)會更方便一些,新語法時一步優化字符串拼接的操作。
4、indexOf(searchString,position)
在string內查找另一個字符串searchString。如果它被找到,就返回第1個匹配字符的位置,否則返回-1。
需要記住一點是:可選參數position可設置從string的某個指定的位置開始查找。
上面最後一個輸出,設置position=4,讓它從第4個位置開始查找,所以查到第二次出現O的位置是11 。
5、lastIndexOf(searchString,position)
與indexOf方法類似,只不過它是從該字符串的末尾開始查找而不是從開頭。
總結就是,查找的方向是反的,順序是正的。如下代碼:
6、localeCompare(that)
據官方給出的語法格式是:stringObject.localeCompare(target),那麼我們就從這個格式開始分析它的作用。
用來比較兩個字符串,返回比較結果數字。如果stringObject 小於 target,則 localeCompare() 返回小於 0 的數。如果 stringObject 大於 target,則該方法返回大於 0 的數。如果兩個字符串相等,或根據本地排序規則沒有區別,該方法返回 0。
所以,其實這個方法可以用比較中文是否相同,下面我舉三段代碼來看一下結果:
7、match(regexp)
match方法讓字符串和一個正則表達式進行匹配。它依據g標識來決定如何進行匹配。如果沒有g標識,那麼調用string.match(regexp)的結果與調用regexp.exec(string)的結果相同。帶g標識返回的是一個結果數組,具體如下代碼所示:
8、replace(searchValue,replaceValue)
作用:replace方法對string進行查找和替換操作,並返回一個新的字符串。
取值:而參數searchValue可以是一個字符串或者一個正則表達式對象。
第一種情況:如果searchValue是一個字符串,那麼searchValue只會在第1次出現 的地方被替換。
【舉個例子】:
上面這例子就證明searchValue是一個字符串時,只會在第1次出現的地方被替換。
第二種情況:如果searchValue是一個正則表達式並且帶有g標識,它會替換所有的匹配。如果沒有帶g標識,它會僅替換第1個匹配。
【舉個例子】:
這個例子很簡單,為的是說明searchValue為正則表達式時帶g與不帶g的情況。我先來簡單解釋一下上面這段代碼:
首先,定義了一個name具有三段字符的字符串。
其次,serchValue定義了一個正則表達式,其意義是:
\b:匹配單詞邊界,準確的說是表達獨立部分,可以是起始,結束,空格。
\w+:表示多個字符組合( 字母 ,數字,下劃線_ )。
最後,如果不加g的話,如上,只匹配第一串字符。加了之後所有的都匹配了。
第三種情況:replaceValue可以是一個字符串或一個函數,如果replaceValue是一個字符串,字符$擁有特殊的含義。
關於replaceValue是函數的情況,上面已經有一個例子了,但是等會我還會舉一個經典例子來分析一下。
現在我們來看一下是字符串的情況下,$的特殊含義。先來看一個例子的結果,然後我再來解釋一下每行代碼的意義。
這個正則表達式也很簡單,不過需要注意的一個地方是:/[^"] / 和 /^["]/是不一樣的,前者是排除的意思,後者是代表首位。(有關正則表達式部分也沒有什麼難的,而且有一些在線的工具可以利用,下回我用一篇專門來寫一下如何搞。)
其次就是講一下$number-表示分組捕獲的文本,即與regexp中的第number個子表達式相匹配的文本,後面這一句話比較是關鍵。上面那個例子$1就代表前面searchValue正則所匹配的每一項內容。
然而,這個時候關於$0,$1,$2等等,可能還不是很清楚,那麼,我決定,再舉一個更詳細的例子來給大家講一下。如下所示:
這個例子是不是可以直接將2013-6-7變成2013.6.7了,對的,直接在函數里面return $1+‘.’。
$0:匹配成功後的整體結果(2013-,6-)。
$1:匹配成功後的第一個分組,這個例子中指的是\d(2013,6)。
$2:匹配成功後的第二個分組,這個例子中指的是-(- -)。
這樣一搞,是不是就清晰多了?。好吧,不常用,用好也不容易,用好了才能才知道它有什麼用,balabalabalabalabala。有關replace就說到這裡。
9、search(regexp)
這個方法,老夫工作五年都沒用過,但這並不能說它就沒有用,更不能識而不見,竟然意外相見,那就認識一下。
search方法其實和indexOf方法有點類似。這句話一定要理解。
返回:它只接受一個正則表達式對象作為參數而不是一個字符串。如果找到匹配,它返回第1個匹配的音字符位置,如果沒有找到匹配,則返回-1。這個方法會忽略g標識,且沒有position參數。
這個表述已經很精簡了,免去了你看官網那一堆balabala的文字所要花的時間。下面就來舉個例子:
上代碼輸出"的位置:17。綠色部分用來標識位置信息,當在10及以上時省略第一位顯示。這樣看是不是有點類似於indexOf的返回。
明白了嗎?少年,搞懂了,我們就要來搞字符串中一堆大小寫轉換的方法。
ECMAScript中涉及到字符串大小寫轉換的方法總共有4個。
(1)toLowerCase()
(2)toLocaleLowerCase()
(3)toUpperCase()
(4)toLocaleUpperCase()
1和3比較經典,2和4是針對特定地區的實現。
對有些地區來說,針對地區的方法與其通用方法得到的結果相同,但少數語言(如土耳其語言)會為Unicode大小寫轉換應用特殊的規則,這時候就必須使用針對地區的方法來保證實現正確的轉換。
看一個例子:
針對地區的方法和通用的方法輸出結果是一樣的,大部分情況都會這樣,還是建議在不知道自己的代碼將在那種語言環境中運行的情況下,還是使用針對地區的方法更穩妥一些。
11、fromCharCode(char...)
用w3c上的定義,可接受一個指定的Unicode值,然後返回一個字符串。
舉個例子吧:
以上這些,就是我能想到的ECMAScript中用來處理處理字符串的方式方法。如還有其它,歡迎留言,我再補上。下面我來針對全文的內容做一個總結。
最後總結也很重要:
全文看似balabala一大堆,其實有很有"層次"感。what?不信?聽我下面來講一下。
首先,我將字符串的所有處理方法以"熱度應用"為基礎劃分成兩個大類,一個是字符串分隔法,另一個是字符串其它法。其中在分隔法不僅理清了slice,substring,substr,split各自的具體用法,更重要的是講清楚了前面三個最常用的方法(slice, substring,substr)之間的區別。讓你對經常使用的看似簡單的方法又進一步深化了理解。關於字符串其它法,也是從"熱度應用"上逐一分析了一遍,如果你只記住其中的indexOf和replace,那你就錯過了更精彩的內容,重看吧。哈哈。全文主要採用控制檯運行例子的方式,出於效率,大家也可以自己將上面例子運行進行驗證,如有理解錯誤的地方,歡迎留言指正。