點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

【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第一個參數不是負數，第二個表示長度的參數為負數時，輸出只能是空字符串。

4、split

語法：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的返回。

明白了嗎？少年，搞懂了，我們就要來搞字符串中一堆大小寫轉換的方法。

10、大小寫轉換

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，那你就錯過了更精彩的內容，重看吧。哈哈。全文主要採用控制檯運行例子的方式，出於效率，大家也可以自己將上面例子運行進行驗證，如有理解錯誤的地方，歡迎留言指正。

閱讀更多 小鄭搞碼事 的文章

關鍵字: 編程語言 JavaScript 數據類型