日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
想要在JS中把正則玩得飄逸，學會這幾個函數(shù)的使用必不可少

在之前的一系列文章中，我們講解了很多關(guān)于正則表達式的知識。那么作為一個前端工程師，如果想要把這些知識應(yīng)用到我們平時的開發(fā)中去的話，就需要知道在JavaScript中，能夠使用正則的函數(shù)有哪些？然后它們各自的功能是什么？有哪些需要注意的地方？只有掌握好了每一個方法的使用場景，我們才可能在需要使用的時候能夠很快的想起來使用哪個方法效率最高，效果最好。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的黃南州網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

這些確實是一些基礎(chǔ)的知識，但是我相信應(yīng)該有很多同學還沒有系統(tǒng)的把這些知識學習一邊。相信我，如果你能夠把這篇文章看完的話，你肯定可以學習到一些新的知識。知道每一個方法的用途，使用場景，學會在合適的場景選擇合適的方法。當然你還能夠掌握這些方法需要注意的地方，以防在以后使用的時候陷入了困境。

文章中的代碼示例如果沒有特別說明的話，都是在Chrome瀏覽器中進行的。本篇文章的內(nèi)容比較長，建議先收藏起來，可以以后慢慢細看。

在JavaScript中，能夠使用正則表達式的函數(shù)有（排除了過時的方法）：

  •  RegExp.prototype
    •  RegExp.prototype.test()
    •  RegExp.prototype.exec()
  •  String.prototype
    •  String.prototype.match()
    •  String.prototype.matchAll()
    •  String.prototype.replace()
    •  String.prototype.replaceAll()
    •  String.prototype.search()
    •  String.prototype.split()

RegExp.prototype

首先我們要講解的是RegExp對象上的兩個方法

RegExp.prototype.test()

  •  作用：檢測給定的字符串中是否有滿足正則的匹配
  •  代碼示例：

簡單的匹配，根據(jù)匹配的結(jié)果確定是否匹配成功。

 
 
 
 
    
  
  
  
  
  1. const reg = /\d{4}-\d{2}-\d{2}/;  
    2.   
  
  
  
  2. const str1 = '2000-02-22';  
    3.   
  
  
  
  3. const str2 = '20-20-20';  
    4.   
  
  
  
  4. console.log(reg.test(str1)); // true  
    5.   
  
  
  
  5. console.log(reg.test(str2)); // false 
    6.

上面的正則表達式?jīng)]有設(shè)置全局的標志符g，如果設(shè)置了全局的標志符的話，我們在使用這個方法的時候就要小心一些了。因為如果正則表達式設(shè)置了全局的標識符g，那么對于同一個正則表達式來說，在運行test方法的時候，如果匹配成功的話，它會修改這個正則對象的lastIndex屬性，可能會在下次匹配的時候?qū)е乱恍﹩栴}，我們下面來看一個例子。

 
 
 
 
    
  
  
  
  
  1. const reg = /abc/g;  
    2.   
  
  
  
  2. const str1 = 'abcd';  
    3.   
  
  
  
  3. const str2 = 'abcdabcd';  
    4.   
  
  
  
  4. console.log(reg.lastIndex);  // 0  
    5.   
  
  
  
  5. console.log(reg.test(str1));  // true  
    6.   
  
  
  
  6. console.log(reg.lastIndex);  // 3  
    7.   
  
  
  
  7. console.log(reg.test(str1));  // false  
    8.   
  
  
  
  8. console.log(reg.lastIndex);  // 0  
    9.   
  
  
  
  9. console.log(reg.test(str2));  // true  
    10.   
  
  
  
  10. console.log(reg.lastIndex);  // 3  
    11.   
  
  
  
  11. console.log(reg.test(str2));  // true 
    12.

上面的例子很好地說明了這種情況，如果我們設(shè)置了全局標識符g的話，只要我們當前的匹配是成功的，那么接下來如果再次使用同樣的正則進行匹配的話就可能會出現(xiàn)問題，因為上一個成功的匹配導致正則表達式對象的lastIndex屬性的值發(fā)生了變化，那么下次進行匹配的時候是從lastIndex位置開始的，所以就可能會出現(xiàn)一些問題。

  •  注意事項：如果在使用test方法的時候，需要注意正則表達式是否帶有g(shù)標識符。如果這個正則表達式需要進行多次的匹配的話，最好不要設(shè)置g標識符。除非你知道自己確實需要這樣做。
  •  使用場景：

假如有這樣一個需求，你需要判斷用戶輸入的用戶名是否滿足需求，需求如下：（1）用戶名長度需要是8-16位。（2）用戶名可以包含數(shù)字，字母（大小寫都可以），下劃線。（3）數(shù)字和字母是必須包含的。

當然對于熟悉正則表達式的你來說，這不是一個問題，能用一行代碼解決的問題絕不用兩行代碼去解決。你可以很快可以通過使用test方法來解決這個問題。

 
 
 
 
    
  
  
  
  
  1. const validNameRE = /^(?=_*(?:\d+_*[a-zA-Z]+|[a-zA-Z]+_*\d+))\w{8,16}$/;  
    2.   
  
  
  
  2. // 假如這是用戶輸入的用戶名  
    3.   
  
  
  
  3. const userInputName = '1234567890';  
    4.   
  
  
  
  4. // 檢查用戶輸入的用戶名是否合乎要求  
    5.   
  
  
  
  5. const isValidName = validNameRE.test(userInputName); // false 
    6.

在平時的開發(fā)中，如果需要判斷頁面所處的宿主環(huán)境的話，我們也會使用test方法去判斷當前頁面所處的環(huán)境。例如，你需要判斷當前頁面所處的環(huán)境是不是iPhone的話，你可能會寫出這樣的判斷：

 
 
 
 
    
  
  
  
  
  1. const iPhoneReg = /iPhone/;  
    2.   
  
  
  
  2. console.log(iPhoneReg.test(navigator.userAgent));  // true 
    3.

RegExp.prototype.exec()

  •  作用：這個方法是比較常用的一個方法，在給定的字符串中進行匹配，返回一個匹配的結(jié)果數(shù)組或者null。通常情況下我們會使用這個方法來提取字符串中符合匹配的一些字符串。
  •  代碼示例：

需要注意的是，如果沒有符合的匹配，返回的結(jié)果是null，而不是一個空數(shù)組[]。所以當我們需要判斷是否有匹配的結(jié)果的時候，不能憑感覺覺得返回的值是一個空的數(shù)組[]。

 
 
 
 
    
  
  
  
  
  1. const reg1 = /(\d{2}):(\d{2}):(\d{2})/;  
    2.   
  
  
  
  2. const str1 = 'Sat Aug 22 2020 17:31:55 GMT+0800 (中國標準時間)';  
    3.   
  
  
  
  3. const str2 = 'Sat Aug 22 2020';  
    4.   
  
  
  
  4. console.log(reg1.exec(str1));  // ["17:31:55", "17", "31", "55", index: 16, input: "Sat Aug 22 2020 17:31:55 GMT+0800 (中國標準時間)", groups: undefined]  
    5.   
  
  
  
  5. console.log(reg1.exec(str2));  // null 
    6.

從上面的代碼中我們可以看到，如果沒有匹配結(jié)果的話，返回的結(jié)果是null。如果能夠匹配成功的話，返回的結(jié)果是一個數(shù)組。在這個結(jié)果數(shù)組中，第0項表示正則表達式匹配的內(nèi)容。其中第1..n項表示的是正則表達式中括號的捕獲內(nèi)容，對于上面的示例來說，第1..3項表示的是捕獲時間的時分秒。數(shù)組還有額外的屬性index和input，其中index表示正則表達式匹配到的字符串在原字符串中的位置。input表示原始待匹配的字符串。

  •  注意事項：
    •  注意正則表達式是否設(shè)置了g標識符，如果設(shè)置了g標識符，那么我們可以使用這個正則表達式進行全局的搜索?？梢钥聪旅娴拇a示例。   
 
 
 
 
    
  
  
  
  
  1. const reg = /\d/g;  
    2.   
  
  
  
  2.     const str = '654321';  
    3.   
  
  
  
  3.     let result;  
    4.   
  
  
  
  4.     while ((result = reg.exec(str))) {  
    5.   
  
  
  
  5.       console.log(  
    6.   
  
  
  
  6.         `本次匹配到的數(shù)字是：${result[0]}, 正則表達式的 lastIndex 的值是：${  
    7.   
  
  
  
  7.           reg.lastIndex  
    8.   
  
  
  
  8.         }` 
    9.   
  
  
  
  9.       );  
    10.   
  
  
  
  10.     } 
    11.

輸出的結(jié)果如下：

 
 
 
 
    
  
  
  
  
  1. 本次匹配到的數(shù)字是：6, 正則表達式的 lastIndex 的值是：1  
    2.   
  
  
  
  2. 本次匹配到的數(shù)字是：5, 正則表達式的 lastIndex 的值是：2  
    3.   
  
  
  
  3. 本次匹配到的數(shù)字是：4, 正則表達式的 lastIndex 的值是：3  
    4.   
  
  
  
  4. 本次匹配到的數(shù)字是：3, 正則表達式的 lastIndex 的值是：4  
    5.   
  
  
  
  5. 本次匹配到的數(shù)字是：2, 正則表達式的 lastIndex 的值是：5  
    6.   
  
  
  
  6. 本次匹配到的數(shù)字是：1, 正則表達式的 lastIndex 的值是：6 
    7.

需要注意的是，如果上面匹配的正則表達式?jīng)]有設(shè)置g標識符，或者在while循環(huán)的條件判斷中使用的是正則表達式的字面量的話，都會造成“死循環(huán)”。因為那樣的話，每次循環(huán)開始的時候，正則表達式的lastIndex屬性都會是0，導致result一直都是有值的，所以就導致了“死循環(huán)”。所以我們在while循環(huán)中使用exec方法的時候一定要小心一些。

  •  使用場景：這個方法主要用來在原始文本中提取一些我們想要的關(guān)鍵信息，所以只要是這樣的一個需求場景，都可以使用正則表達式的exec方法去處理。比如：
    •  對用戶輸入內(nèi)容中的鏈接進行自動識別，然后對相應(yīng)的鏈接內(nèi)容進行樣式和功能上的處理。
    •  可以提取url中的查詢參數(shù)，如果我們需要自己把url中的查詢參數(shù)提取出來的話，使用exec方法也是一個選擇。
    •  如果你閱讀過vue的源碼的話，在編譯模塊中的文本解析使用到了exec方法，有興趣的話大家可以看一看相關(guān)的代碼實現(xiàn)。

當然還有很多的場景可以使用exec方法去處理的，大家在平時的開發(fā)中有沒有使用過exec方法處理一些問題呢？可以在下面留言，我們大家一起討論一下，加深一下對這個方法的理解。

String.prototype

接下來我們來講解一下String.prototype上面有關(guān)正則的一些方法。

String.prototype.match()

  •  作用：這個方法返回字符串匹配正則表達式的結(jié)果。
  •  代碼示例： 
 
 
 
 
    
  
  
  
  
  1. const reg = /\d/;  
    2.   
  
  
  
  2. const str = 'abc123';  
    3.   
  
  
  
  3. console.log(str.match(reg));  // ["1", index: 3, input: "abc123", groups: undefined] 
    4.
  • 注意事項：

              1.   沒有匹配到結(jié)果的返回結(jié)果是null。  

 
 
 
 
    
  
  
  
  
  1. const reg = /\d/;  
    2.   
  
  
  
  2.    const str = 'abc';  
    3.   
  
  
  
  3.    console.log(str.match(reg));  // null 
    4.

              2.  是否設(shè)置了g標識符，如果沒有設(shè)置g的話，match的返回結(jié)果跟對應(yīng)的exec的返回結(jié)果是一樣的。如果設(shè)置了g標識符的話，返回的結(jié)果是與正則表達式相匹配的結(jié)果的集合。

 
 
 
 
    
  
  
  
  
  1. const reg = /\d/g;  
    2.   
  
  
  
  2. const str = 'abc123';  
    3.   
  
  
  
  3. console.log(str.match(reg));  // ["1", "2", "3"] 
    4.

             3.   如果match方法沒有傳遞參數(shù)的話，返回的結(jié)果是['']，一個包含空字符串的數(shù)組。

 
 
 
 
    
  
  
  
  
  1. const str = 'abc123';  
    2.   
  
  
  
  2.   console.log(str.match());  // ["", index: 0, input: "abc123", groups: undefined] 
    3.

             4.  如果match方法傳遞的參數(shù)是一個字符串或者數(shù)字的話，會在內(nèi)部隱式調(diào)用new RegExp(regex)，將傳入的參數(shù)轉(zhuǎn)變?yōu)橐粋€正則表達式。

 
 
 
 
    
  
  
  
  
  1. const str = 'abc123';  
    2.   
  
  
  
  2. console.log(str.match('b'));  // ["b", index: 1, input: "abc123", groups: undefined] 
    3.
  •  使用場景：

簡單獲取url中的查詢參數(shù)：  

 
 
 
 
    
  
  
  
  
  1. const query = {};  
    2.   
  
  
  
  2.    // 首先使用帶有g(shù)標識符的正則，表示全局查找  
    3.   
  
  
  
  3.    const kv = location.search.match(/\w*=\w*/g);  
    4.   
  
  
  
  4.    if (kv) {  
    5.   
  
  
  
  5.      kv.forEach(v => {  
    6.   
  
  
  
  6.          // 使用不帶g標識符的正則，需要獲取括號中的捕獲內(nèi)容  
    7.   
  
  
  
  7.        const q = v.match(/(\w*)=(\w*)/);  
    8.   
  
  
  
  8.        query[q[1]] = q[2];  
    9.   
  
  
  
  9.      });  
    10.   
  
  
  
  10.    } 
    11.

String.prototype.matchAll()

  •  作用：這個方法返回一個包含所有匹配正則表達式以及正則表達式中括號的捕獲內(nèi)容的迭代器。需要注意的是這個方法存在兼容性，具體內(nèi)容可以查看String.prototype.matchAll。
  •  代碼示例： 
 
 
 
 
    
  
  
  
  
  1. const reg = /(\w*)=(\w*)/g;  
    2.   
  
  
  
  2. const str = 'a=1,b=2,c=3';  
    3.   
  
  
  
  3. console.log([...str.matchAll(reg)]); 
    4.

String.prototype.matchAll()

  •  注意事項：

                1.  跟match方法相同的地方是，如果傳遞給matchAll方法的參數(shù)不是一個正則表達式的話，那么會隱式調(diào)用new RegExp(obj)將其轉(zhuǎn)換為一個正則表達式對象。 傳遞給matchAll的正則表達式需要是設(shè)置了g標識符的，如果沒有設(shè)置g標識符，那么就會拋出一個錯誤。  

 
 
 
 
    
  
  
  
  
  1. const reg = /(\w*)=(\w*)/;  
    2.   
  
  
  
  2.     const str = 'a=1,b=2,c=3';  
    3.   
  
  
  
  3.     console.log([...str.matchAll(reg)]);  // Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument 
    4.

               2.  在可以使用matchAll的情況下，使用matchAll比使用exec方法更便捷一些。因為在全局需要匹配的情況下，使用exec方法需要配合循環(huán)來使用，但是使用matchAll就可以不使用循環(huán)。

               3.  matchAll方法在字符串執(zhí)行匹配的過程中，正則表達式的lastIndex屬性不會更新。更多詳情可以參考String.prototype.matchAll()。

  •  使用場景：

還是以上面的獲取url中的查詢參數(shù)這個小功能來實踐一下：

 
 
 
 
    
  
  
  
  
  1. const query = {};  
    2.   
  
  
  
  2. const kvs = location.search.matchAll(/(\w*)=(\w*)/g);  
    3.   
  
  
  
  3. if (kvs) {  
    4.   
  
  
  
  4.     for (let kv of kvs) {  
    5.   
  
  
  
  5.         query[kv[1]] = kv[2];  
    6.   
  
  
  
  6.     }  
    7.   
  
  
  
  7. }  
    8.   
  
  
  
  8. console.log(query); 
    9.

String.prototype.replace()

  •  作用：這個方法在平時的開發(fā)中應(yīng)該比較常用，那么它的作用就是使用替換物replacement替換原字符串中符合某種模式pattern的字符串。其中替換物可以是一個字符串，或者返回值是字符串的函數(shù)；模式可以是正則表達式或者字符串。
  •  代碼示例：

    因為這個函數(shù)的入?yún)⒖梢允遣煌念愋?，所以對每種類型的入?yún)⑽覀兌紒韺嵺`一下吧。

          1.  pattern是字符串，replacement也是字符串。這種形式在平時的開發(fā)中使用的比較多。  

 
 
 
 
    
  
  
  
  
  1. const pattern = 'a';  
    2.   
  
  
  
  2.    const replacement = 'A';  
    3.   
  
  
  
  3.    const str = 'aBCD';  
    4.   
  
  
  
  4.    console.log(str.replace(pattern, replacement));  // ABCD 
    5.

          2.  pattern是正則表達式，replacement是字符串。

 
 
 
 
    
  
  
  
  
  1. const pattern = /__(\d)__/;  
    2.   
  
  
  
  2.  const replacement = "--$$--$&--$`--$'--$1--";  
    3.   
  
  
  
  3.  const str = 'aaa__1__bbb';  
    4.   
  
  
  
  4.  console.log(str.replace(pattern, replacement));  // aaa--$--__1__--aaa--bbb--1--bbb 
    5.

如果replacement是字符串，那么在這個字符串中可以使用一些特殊的變量，具體可參考Specifying a string as a parameter。

  •  pattern是正則表達式，replacement是函數(shù)。   
 
 
 
 
    
  
  
  
  
  1. const pattern = /__(?\d)__/;  
    2.   
  
  
  
  2.     const replacement = function(match, p1, offset, str, groups) {  
    3.   
  
  
  
  3.       console.log(`匹配到的字符串是：${match}\n捕獲到的內(nèi)容是：${p1}\n匹配的位置是：${offset}\n原始待匹配的字符串是：${str}\n命名的捕獲內(nèi)容是：${JSON.stringify(groups)}`);  
    4.   
  
  
  
  4.       return '======';  
    5.   
  
  
  
  5.     };  
    6.   
  
  
  
  6.     const str = 'aaa__1__bbb';  
    7.   
  
  
  
  7.     console.log(str.replace(pattern, replacement)); // aaa======bbb 
    8.

其中控制臺的輸出如下所示：

 
 
 
 
    
  
  
  
  
  1. 匹配到的字符串是：__1__  
    2.   
  
  
  
  2. 捕獲到的內(nèi)容是：1  
    3.   
  
  
  
  3. 匹配的位置是：3  
    4.   
  
  
  
  4. 原始待匹配的字符串是：aaa__1__bbb  
    5.   
  
  
  
  5. 命名的捕獲內(nèi)容是：{"number":"1"} 
    6.

如果你對replacement是函數(shù)這種情況不是很了解的話可以看看Specifying a function as a parameter，里面會有詳細的解釋，這里就不在具體解釋了。

  •  注意事項：

          需要注意的地方就是當我們的pattern是正則表達式的時候，要注意是否設(shè)置了g標識符，因為如果沒有設(shè)置g標識符的話，只會進行一次匹配。設(shè)置了g標識符的話，會進行全局的匹配。

  •  使用場景：

          對于前端來說，對用戶的輸入進行校驗時很常見的需求。假如我們有一個輸入框，只允許用戶輸入數(shù)字，我們可以這樣處理：

 
 
 
 
    
  
  
  
  
  1. const reg = /\D/g;  
    2.   
  
  
  
  2.  const str = 'abc123';  
    3.   
  
  
  
  3.  console.log(str.replace(reg, ''));  // 123 
    4.

         這樣就能夠保證用戶的輸入只有數(shù)字了。

String.prototype.replaceAll()

As of August 2020 the replaceAll() method is supported by Firefox but not by Chrome. It will become available in Chrome 85.

這個方法和replace方法的作用差不多，從名字上就能夠知道replaceAll是全局的替換。因為這個方法的兼容性問題，我們需要在Firefox瀏覽器上進行試驗。

 
 
 
 
    
  
  
  
  
  1. const pattern = 'a';  
    2.   
  
  
  
  2. const replacement = 'A';  
    3.   
  
  
  
  3. const str = 'aBCDa';  
    4.   
  
  
  
  4. console.log(str.replace(pattern, replacement));  // ABCDa  
    5.   
  
  
  
  5. console.log(str.replaceAll(pattern, replacement));  // ABCDA 
    6.
  •  注意事項：如果給函數(shù)傳遞的pattern參數(shù)是個正則表達式的話，這個正則表達式必須設(shè)置了g標識符，不然會拋出一個錯誤。 
 
 
 
 
    
  
  
  
  
  1. const pattern = /a/;  
    2.   
  
  
  
  2. const replacement = 'A';  
    3.   
  
  
  
  3. const str = 'aBCDa';  
    4.   
  
  
  
  4. console.log(str.replace(pattern, replacement));  // ABCDa  
    5.   
  
  
  
  5. console.log(str.replaceAll(pattern, replacement));  // Uncaught TypeError: replaceAll must be called with a global RegExp 
    6.

String.prototype.search()

  •  作用：這個方法用來在字符串中尋找是否含有特定模式的匹配，如果找到對應(yīng)的模式，返回匹配開始的下標；沒有找到的話返回-1。
  •  代碼示例： 
 
 
 
 
    
  
  
  
  
  1. const reg = /\d/;  
    2.   
  
  
  
  2. const str1 = '123';  
    3.   
  
  
  
  3. const str2 = 'abc';  
    4.   
  
  
  
  4. console.log(str1.search(reg));  // 0  
    5.   
  
  
  
  5. console.log(str2.search(reg));  // -1 
    6.
  •  注意事項：
    •  如果傳入的參數(shù)不是一個正則表達式的話，會隱式的調(diào)用new RegExp(regexp)將其轉(zhuǎn)換為一個正則表達式。
    •  沒有找到相應(yīng)匹配的時候，返回的值是-1；所以大家在使用這個方法做判斷的時候要注意，只有返回值是-1的時候，才表示沒有找到相應(yīng)的匹配。
  •  使用場景：

如果你需要找到特定匹配在字符串中的位置的話，那么可以使用search方法。

 
 
 
 
    
  
  
  
  
  1. const reg = /\d/;  
    2.   
  
  
  
  2. const str = 'abc6def';  
    3.   
  
  
  
  3. console.log(str.search(reg));  // 3 
    4.

String.prototype.split()

  •  作用：將一個字符串按照分割器進行分割，將分割后的字符串片段組成一個新的數(shù)組，其中分割器separator可以是一個字符串或者一個正則表達式。
  •  代碼示例：

                1.  分割器separator是字符串：

 
 
 
 
    
  
  
  
  
  1. const str = 'hello, world!';  
    2.   
  
  
  
  2.  console.log(str.split(''));  // ["h", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d", "!"] 
    3.

                2.  分割器separator是正則表達式：

 
 
 
 
    
  
  
  
  
  1. const str = 'abc1abc2abc3';  
    2.   
  
  
  
  2. const separator = /\w(?=\d)/;  
    3.   
  
  
  
  3. console.log(str.split(separator));  // ["ab", "1ab", "2ab", "3"] 
    4.
  •  注意事項：

               1.  如果split方法沒有傳遞參數(shù)的話，會返回一個包含原字符串的數(shù)組：

 
 
 
 
    
  
  
  
  
  1. const str = 'hello, world!';  
    2.   
  
  
  
  2.  console.log(str.split());  // ["hello, world!"] 
    3.

             2.  因為JavaScript的字符串是使用UTF-16進行編碼的，該編碼使用一個16比特的編碼單元來表示大部分常見的字符，使用兩個編碼單元表示不常用的字符。所以對于一些不常用的字符來說，在使用split方法進行字符串分割的時候可能會出現(xiàn)一些問題：

 
 
 
 
    
  
  
  
  
  1. const str = '';  
    2.   
  
  
  
  2.  console.log(str.split(''));  // ["?", "?", "?", "?", "?", "?", "?", "?", "?", "?", "?", "?"] 
    3.

如何解決這種類型的問題呢？第一種方法是使用數(shù)組的擴展運算符：

 
 
 
 
    
  
  
  
  
  1. const str = '';  
    2.   
  
  
  
  2. console.log([...str]);  // ["", "", "", "", "", ""] 
    3.

第二種方法是使用設(shè)置了u標識符的正則表達式：

 
 
 
 
    
  
  
  
  
  1. const str = '';  
    2.   
  
  
  
  2. const separator = /(?=[\s\S])/u;  
    3.   
  
  
  
  3. console.log(str.split(separator)); // ["", "", "", "", "", ""] 
    4.
  •  如果傳入的正則表達參數(shù)中含有捕獲的括號，那么捕獲的內(nèi)容也會包含在返回的數(shù)組中： 
 
 
 
 
    
  
  
  
  
  1. const str = 'abc1abc2abc3';  
    2.   
  
  
  
  2. const separator = /(\w)(?=\d)/;  
    3.   
  
  
  
  3. console.log(str.split(separator));  // ["ab", "c", "1ab", "c", "2ab", "c", "3"] 
    4.
  •  split方法還可以傳入第二個參數(shù)，用來控制返回的數(shù)組的長度： 
 
 
 
 
    
  
  
  
  
  1. const str = 'hello, world!';  
    2.   
  
  
  
  2. console.log(str.split('', 3));  // ["h", "e", "l"] 
    3.
  •  使用場景：

在實際的開發(fā)中，最常用的場景就是將一個字符串轉(zhuǎn)換為一個數(shù)組了：

 
 
 
 
    
  
  
  
  
  1. const str = 'a/b/c/d/e';  
    2.   
  
  
  
  2. console.log(str.split('/')); // ["a", "b", "c", "d", "e"] 
    3.

總結(jié)

當我們能夠把上面的這些方法都熟練的掌握之后，那么在實際的開發(fā)中再結(jié)合正則表達式來使用的話，那簡直就是如虎添翼，能夠在一些場景下提高我們開發(fā)的效率。

當然光靠看看文章是不能夠很好地將這些知識點都記牢固的，你需要的是一個一個的實踐一下，這樣才能夠加深自己的記憶，才能夠記得更牢固。

如果大家還想了解更多關(guān)于正則表達式的知識點的話，可以看看我之前寫的一系列的文章：

  •  正則表達式匹配素數(shù)的原理講解
  •  距離弄懂正則的環(huán)視，你只差這一篇文章
  •  正則表達式量詞匹配方式的講解（上篇）
  •  想寫出效率更高的正則表達式？試試固化分組和占有優(yōu)先匹配吧

如果你對本篇文章有什么意見和建議，都可以直接在文章下面留言，也可以在這里提出來。也歡迎大家關(guān)注我的公眾號關(guān)山不難越，學習更多實用的前端知識，讓我們一起努力進步吧。


網(wǎng)頁題目：想要在JS中把正則玩得飄逸，學會這幾個函數(shù)的使用必不可少
標題來源：http://www.5511xx.com/article/dhcdegc.html