3.字符串實用常操紀要 · 前端精華總結

[toc] ## 1.字符串截取 ### 1.1 substring() ```js xString.substring(start,end) ``` substring()是最常用到的字符串截取方法，它可以接收兩個參數(參數不能為負值)，分別是要截取的開始位置和結束位置，它將返回一個新的字符串，其內容是從`start`處到`end-1`處的所有字符。若結束參數(end)省略，則表示從start位置一直截取到最后。 ```js let str = 'www.jeffjade.com' console.log(str.substring(0,3)) // www console.log(str.substring(0)) //www.jeffjade.com console.log(str.substring(-2)) //www.jeffjade.com (傳負值則視為0) ``` ### 1.2 slice() ```js stringObject.slice(start, end) ``` slice()方法與substring()方法非常類似，它傳入的兩個參數也分別對應著開始位置和結束位置。而區別在于，slice()中的參數可以為負值，如果參數是負數，則該參數規定的是從字符串的尾部開始算起的位置。也就是說，-1 指字符串的最后一個字符。 ```js let str = 'www.jeffjade.com' console.log(str.slice(0, 3)) // www console.log(str.slice(-3, -1)) // co console.log(str.slice(1, -1)) // www.jeffjade.co console.log(str.slice(2, 1)) // '' (返回空字符串,start須小于end) console.log(str.slice(-3, 0)) // '' (返回空字符串,start須小于end) ``` ### 1.3 substr() ```js stringObject.substr(start,length) ``` substr()方法可在字符串中抽取從start下標開始的指定數目的字符。其返回值為一個字符串，包含從 stringObject的start（包括start所指的字符）處開始的length個字符。如果沒有指定 length，那么返回的字符串包含從start到stringObject的結尾的字符。另外如果start為負數，則表示從字符串尾部開始算起。 ```js let str = 'www.jeffjade.com' console.log(webStr.substr(1, 3)) // ww. console.log(webStr.substr(0)) // www.jeffjade.com console.log(webStr.substr(-3, 3)) // com console.log(webStr.substr(-1, 5)) // m (目標長度較大的話，以實際截取的長度為準) ``` ### 1.4 split() ```js str.split([separator][, limit]) ``` - **separator** 指定用來分割字符串的字符（串）。separator 可以是一個字符串或正則表達式。如果忽略 separator，則返回整個字符串的數組形式。如果 separator 是一個空字符串，則 str 將會把原字符串中每個字符的數組形式返回。 - **limit** 一個整數，限定返回的分割片段數量。split 方法仍然分割每一個匹配的 separator，但是返回的數組只會截取最多 limit 個元素。 ```js let str = 'www.jeffjade.com' str.split('.') // ["www", "jeffjade", "com"] str.split('.', 1) // ["www"] str.split('.').join('') // wwwjeffjadecom ``` 話說這個函數真心好用，很多時候的字符截取需求，就是依賴于某個字符；而以上三個函數都需知道其位置。我們當然可以借助 indexOf 等方法獲取，很顯然這很繁瑣；而借助 `split` 則顯得更輕而易舉。 ## 2.查找類方法 ### 2.1 indexOf() & includes() **indexOf()** ```js stringObject.indexOf(searchValue,fromIndex) ``` indexOf()用來檢索指定的字符串值在字符串中首次出現的位置。它可以接收兩個參數，searchValue 表示要查找的子字符串，fromIndex 表示查找的開始位置，省略的話則從開始位置進行檢索。 ```js let str = 'www.jeffjade.com' console.log(str.indexOf('.')) // 3 console.log(str.indexOf('.', 1)) // 3 console.log(str.indexOf('.', 5)) // 12 console.log(str.indexOf('.', 12)) // -1 ``` 雖然 `indexOf()`用來檢索指定的字符串值在字符串中首次出現的位置，然而很多時候，使用它的場景在于判斷字符串中是否存在指定的字符串；因此代碼就會如此： ```js if (str.indexOf('yoursPecifiedStr') !== -1) { // do something } ``` **includes()** 要知道在這樣的場景下，ES6語言中的`includes()`就顯得更優雅許多；includes() 方法用于判斷一個字符串是否被包含在另一個字符串中，如果是返回true，否則返回false。 ```js str.includes(searchString[, position])` ``` searchString 將要搜尋的子字符串。position 可選。從當前字符串的哪個索引位置開始搜尋子字符串；默認為0。需要注意的是，includes() 是區分大小寫的。 ```js 'Blue Whale'.includes('blue'); // returns false '喬峰喬布斯喬幫主'.includes('喬布斯'); // returns true if (str.includes('yoursPecifiedStr')) { // do something(這樣寫是不是更為人性化？Yeah，這是一個更趨向人性化的時代嘛) } ``` ### 2.2 lastIndexOf() ```js stringObject.lastIndexOf(searchValue,fromIndex) ``` lastIndexOf()語法與indexOf()類似，它返回的是一個指定的子字符串值最后出現的位置，其檢索順序是從后向前。 ```js let str = 'www.jeffjade.com' console.log(str.lastIndexOf('.')) // 12 console.log(str.lastIndexOf('.', 1)) // -1 console.log(str.lastIndexOf('.', 5)) // 3 console.log(str.lastIndexOf('.', 12)) // 12 ``` ### 2.3 search() ```js stringObject.search(substr) stringObject.search(regexp) ``` search()方法用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。它會返回第一個匹配的子字符串的起始位置，如果沒有匹配的，則返回`-1`。 ```js let str = 'www.jeffjade.com' console.log(str.search('w')) // 0 console.log(str.search(/j/g)) // 4 console.log(str.search(/\./g)) // 3 ``` ### 2.4 match()方法 ```js stringObject.match(substr) stringObject.match(regexp) ``` match()方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。如果參數中傳入的是子字符串或是沒有進行全局匹配的正則表達式，那么match()方法會從開始位置執行一次匹配，如果沒有匹配到結果，則返回null。否則則會返回一個數組，該數組的第0個元素存放的是匹配文本，除此之外，返回的數組還含有兩個對象屬性index和input，分別表示匹配文本的起始字符索引和stringObject 的引用(即原字符串)。 ```js let str = '#1a2b3c4d5e#'; console.log(str.match('A')); //返回null console.log(str.match('b')); //返回["b", index: 4, input: "#1a2b3c4d5e#"] console.log(str.match(/b/)); //返回["b", index: 4, input: "#1a2b3c4d5e#"] ``` 如果參數傳入的是具有全局匹配的正則表達式，那么match()從開始位置進行多次匹配，直到最后。如果沒有匹配到結果，則返回null。否則則會返回一個數組，數組中存放所有符合要求的子字符串，并且沒有index和input屬性。 ```js let str = '#1a2b3c4d5e#' console.log(str.match(/h/g)) //返回null console.log(str.match(/\d/g)) //返回["1", "2", "3", "4", "5"] ``` ## 3.其他方法 ### 3.1 replace()方法 ```js stringObject.replace(regexp/substr,replacement/function) ``` replace()方法用來進行字符串替換操作，它可以接收兩個參數，前者為被替換的子字符串（可以是正則），后者為用來替換的文本。如果第一個參數傳入的是子字符串或是沒有進行全局匹配的正則表達式，那么replace()方法將只進行一次替換（即替換最前面的），返回經過一次替換后的結果字符串。 ```js let str = 'www.jeffjade.com' console.log(str.replace('w', 'W')) // Www.jeffjade.com console.log(str.replace(/w/, 'W')) // Www.jeffjade.com ``` 如果第一個參數傳入的全局匹配的正則表達式，那么replace()將會對符合條件的子字符串進行多次替換，最后返回經過多次替換的結果字符串。 ```js let str = 'www.jeffjade.com' console.log(str.replace(/w/g, 'W')) // WWW.jeffjade.com ``` ### 3.2 toLowerCase() & toUpperCase() ```js stringObject.toLowerCase() stringObject.toUpperCase() ``` toLowerCase()方法可以把字符串中的大寫字母轉換為小寫，toUpperCase()方法可以把字符串中的小寫字母轉換為大寫。 ```js let str = 'www.jeffjade.com' console.log(str.toLowerCase()) // www.jeffjade.com console.log(str.toUpperCase()) // WWW.JEFFJADE.COM ``` ## 4.模板字符串這個也是 ES6 才引入進來的新語法，來解決傳統輸出String模板的蹩腳問題；其功能之強大，設計之貼心，著實令人得到極大滿足感，好如久旱逢甘霖一般的舒暢。更何況，在當今 MVVM 前端框架大行其道的時代，使用 ES6 語法也是不用自己個兒去操心兼容性問題，對于塑造 Dom Template 更是如虎添翼，令人愛不釋手。對于她的使用，阮一峰在ECMAScript 6 入門有過詳細的描述以及示例，在此就不贅述。只需要明白我們可以像這樣去操作了，試問爽否？ ```js function ncieFunc() { return "四海無人對夕陽"; } var niceMan = "陳寅恪"; var jadeTalk = `一生負氣成今日 \n ${ncieFunc()} , 語出 ${niceMan} 的《憶故居》。 ` console.log(jadeTalk) ``` 運行之，Chrome Console 輸出結果如下： ``` 一生負氣成今日四海無人對夕陽 , 語出陳寅恪的《憶故居》。 ``` ## 5.組合利用方法 ### 5.1 字符串反轉 ```js String.prototype.reverse = function () { return this.split('').reverse().join('') } ``` ### 5.2 去除空白行 ```js String.prototype.removeBlankLines = function () { return this.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g, '') } ``` ### 5.3 String轉化為數組 **轉化為一維數組** 場景是根據某子字符串轉化，直接就用 split 就好；如果轉換規則不統一，那么請自求多福吧。 ```js let Str = '陳寅恪,魯迅,錢鐘書,胡適,王國維,梁啟超,吳宓,季羨林' let hallAllOfFameArr = Str.split(',') console.log(hallAllOfFameArr) // ["陳寅恪", "魯迅", "錢鐘書", "胡適", "王國維", "梁啟超", "吳宓", "季羨林"] ``` **轉化為二維數組** ```js String.prototype.removeBlankLines = function () { return this.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g, '') } String.prototype.strTo2dArr = function(firstSplit, secondSplit){ var contentStr = this.removeBlankLines(), contentStrArr = contentStr.split(firstSplit), resultArr = contentStrArr.map((element) => { return element.split(secondSplit) }) return resultArr } var str = ` 渺渺鐘聲出遠方,依依林影萬鴉藏。一生負氣成今日,四海無人對夕陽。破碎山河迎勝利,殘馀歲月送凄涼。松門松菊何年夢,且認他鄉作故鄉。 ` console.log(str.strTo2dArr('\n', ',')) ``` 運行之，輸出結果如下： ``` [ [ '渺渺鐘聲出遠方', '依依林影萬鴉藏。' ], [ '一生負氣成今日', '四海無人對夕陽。' ], [ '破碎山河迎勝利', '殘馀歲月送凄涼。' ], [ '松門松菊何年夢', '且認他鄉作故鄉。' ] ] ```