JavaScript 字串【整合】

JavaScript 正則表示式 · 發表 2018-10-26 21:43:59

摘要： JavaScript 字串用於儲存和處理文字。因此在編寫 JS 程式碼之時總如影隨形，在你處理使用者的輸入資料的時候，在讀取或設定 DOM 物件的屬性時，在操作 Cookie 時，在轉換各種不同 Date 時，諸此等等，繁不能數；而那蠻多的 API 呵，總有些讓人不願去記憶的衝動，既然如此，就...

JavaScript 字串用於儲存和處理文字。因此在編寫 JS 程式碼之時總如影隨形，在你處理使用者的輸入資料的時候，在讀取或設定 DOM 物件的屬性時，在操作 Cookie 時，在轉換各種不同 Date 時，諸此等等，繁不能數；而那蠻多的 API 呵，總有些讓人不願去記憶的衝動，既然如此，就做一個整合吧，都是日常操作需要用到的。

字串擷取

xString.substring(start,end)

substring()是最常用到的字串擷取方法，它可以接收兩個引數(引數不能為負值)，分別是要擷取的開始位置和結束位置，它將返回一個新的字串，其內容是從start處到end-1處的所有字元。若結束引數(end)省略，則表示從start位置一直擷取到最後。

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)

slice()

stringObject.slice(start, end)

slice()方法與substring()方法非常類似，它傳入的兩個引數也分別對應著開始位置和結束位置。而區別在於，slice()中的引數可以為負值，如果引數是負數，則該引數規定的是從字串的尾部開始算起的位置。也就是說，-1 指字串的最後一個字元。

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)

substr()

stringObject.substr(start,length)

substr()方法可在字串中抽取從start下標開始的指定數目的字元。其返回值為一個字串，包含從 stringObject的start（包括start所指的字元）處開始的length個字元。如果沒有指定 length，那麼返回的字串包含從start到stringObject的結尾的字元。另外如果start為負數，則表示從字串尾部開始算起。

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(目標長度較大的話，以實際擷取的長度為準)

split()

str.split([separator][, limit])

separator 指定用來分割字串的字元（串）。separator 可以是一個字串或正則表示式。如果忽略

separator，則返回整個字串的陣列形式。如果 separator 是一個空字串，則 str 將會把原字串中每個字元的陣列形式返回。

limit 一個整數，限定返回的分割片段數量。split 方法仍然分割每一個匹配的 separator，但是返回的陣列只會擷取最多 limit 個元素。

let str = 'www.jeffjade.com'
str.split('.')// ["www", "jeffjade", "com"]
str.split('.', 1)// ["www"]
str.split('.').join('') // wwwjeffjadecom

話說這個函式真心好用，很多時候的字元擷取需求，就是依賴於某個字元；而以上三個函式都需知道其位置。我們當然可以藉助 indexOf 等方法獲取，很顯然這很繁瑣；而藉助 split 則顯得更輕而易舉。

replace()

replace，這個方法挺有用。如果是在稍微擅長正則的情形下，用 replace 等方法，來擷取字串，也是一個挺不錯的選擇；這對於某些場景下，可達到事半功倍之效，如下示例：

let str = 'jeff@nice&jade'
str.replace(/@[\s\S]*/g, '')// "jeff"
str.replace(/@[\s\S]*&/g, '')// "jeffjade"

查詢類方法

1. indexOf() & includes()

stringObject.indexOf(searchValue,fromIndex)

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() 用來檢索指定的字串值在字串中首次出現的位置，然而很多時候，使用它的場景在於判斷字串中是否存在指定的字串；因此程式碼就會如此：

if (str.indexOf('yoursPecifiedStr') !== -1) {
// do something
}

要知道在這樣的場景下，ES6 語言中的includes()就顯得更優雅許多；includes() 方法用於判斷一個字串是否被包含在另一個字串中，如果是返回true，否則返回false。

str.includes(searchString[, position])

searchString 將要搜尋的子字串。position 可選。從當前字串的哪個索引位置開始搜尋子字串；預設為0。需要注意的是，includes() 是區分大小寫的。

'Blue Whale'.includes('blue'); // returns false
'喬峰喬布斯喬幫主'.includes('喬布斯'); // returns true

if (str.includes('yoursPecifiedStr')) {
// do something(這樣寫是不是更為人性化？Yeah，這是一個更趨向人性化的時代嘛)
}

lastIndexOf()

stringObject.lastIndexOf(searchValue,fromIndex)

lastIndexOf()語法與indexOf()類似，它返回的是一個指定的子字串值最後出現的位置，其檢索順序是從後向前。

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

search()

stringObject.search(substr)

stringObject.search(regexp)

search()方法用於檢索字串中指定的子字串，或檢索與正則表示式相匹配的子字串。它會返回第一個匹配的子字串的起始位置，如果沒有匹配的，則返回-1。

let str = 'www.jeffjade.com'
console.log(str.search('w'))// 0
console.log(str.search(/j/g))// 4
console.log(str.search(/\./g))// 3

match()方法

stringObject.match(substr)
stringObject.match(regexp)

match() 方法可在字串內檢索指定的值，或找到一個或多個正則表示式的匹配。

如果引數中傳入的是子字串或是沒有進行全域性匹配的正則表示式，那麼match()方法會從開始位置執行一次匹配，如果沒有匹配到結果，則返回null。否則則會返回一個數組，該陣列的第0個元素存放的是匹配文字，除此之外，返回的陣列還含有兩個物件屬性index和input，分別表示匹配文字的起始字元索引和stringObject 的引用(即原字串)。

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屬性。

let str = '#1a2b3c4d5e#'
console.log(str.match(/h/g))//返回null
console.log(str.match(/\d/g))//返回["1", "2", "3", "4", "5"]

其他方法

replace()方法

replace()方法用來進行字串替換操作，它可以接收兩個引數，前者為被替換的子字串（可以是正則），後者為用來替換的文字。

如果第一個引數傳入的是子字串或是沒有進行全域性匹配的正則表示式，那麼replace()方法將只進行一次替換（即替換最前面的），返回經過一次替換後的結果字串。

let str = 'www.jeffjade.com'
console.log(str.replace('w', 'W'))// Www.jeffjade.com
console.log(str.replace(/w/, 'W'))// Www.jeffjade.com

如果第一個引數傳入的全域性匹配的正則表示式，那麼replace()將會對符合條件的子字串進行多次替換，最後返回經過多次替換的結果字串。

let str = 'www.jeffjade.com'
console.log(str.replace(/w/g, 'W'))// WWW.jeffjade.com

toLowerCase() & toUpperCase()

stringObject.toLowerCase()
stringObject.toUpperCase()

toLowerCase()方法可以把字串中的大寫字母轉換為小寫，toUpperCase()方法可以把字串中的小寫字母轉換為大寫。

let str = 'www.jeffjade.com'
console.log(str.toLowerCase())// www.jeffjade.com
console.log(str.toUpperCase())// WWW.JEFFJADE.COM

模板字串

這個也是 ES6 才引入進來的語法，來解決傳統輸出String模板的蹩腳問題；其功能之強大，設計之貼心，著實令人得到極大滿足感，好如久旱逢甘霖一般的舒暢。更何況，在當今 MVVM 前端框架大行其道的時代，使用 ES6 語法也是不用自己個兒去操心相容性問題，對於塑造 Dom Template 更是如虎添翼，令人愛不釋手。

對於使用，阮一峰在 ofollow,noindex">ECMAScript 6 入門有過詳細的描述以及示例，在此就不贅述。只需要明白我們可以像這樣去操作了，試問爽否？

function ncieFunc() {
return "四海無人對夕陽";
}
var niceMan = "陳寅恪";

var jadeTalk = `一生負氣成今日 \n ${ncieFunc()} ,
語出 ${niceMan} 的《憶故居》。
`
console.log(jadeTalk)

執行之，Chrome Console 輸出結果如下：

一生負氣成今日

四海無人對夕陽 ,

語出陳寅恪的《憶故居》。

組合其法

細看 JavaScript 提供的String Api，還是有蠻多的，也有些許廢棄的，也有將在未來版本會出來的；這其中不乏很多也挺有用的，譬如： charAt(x) 、 charCodeAt(x) 、 concat(v1, v2,…) 、 fromCharCode(c1, c2,…) 等等,還有 ES6 對字串的擴充套件，比如 字串的遍歷器介面 ， repeat() 等等，這可以參見 ES6-string ，這裡就不多贅述。

在實際程式碼生產中，很多時候需要用這些提供的基本方法，來打出一套組合拳，以解決其需求所需。很顯然又可以藉助 prototype 屬性，將自造的各路拳法，其歸置於 String 物件，然後天亮啦。這一步就看個人喜好了，這裡丟擲一二段，以引大玉。

字串反轉

String.prototype.reverse = function () {
truereturn this.split('').reverse().join('')
}

去除空白行

String.prototype.removeBlankLines = function () {
truereturn this.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g, '')
}

String轉化為陣列

1, 轉化為一維陣列

場景是根據某子字串轉化，直接就用 split 就好；如果轉換規則不統一，那麼請自求多福吧。

let Str = '陳寅恪,魯迅,錢鍾書,胡適,王國維,梁啟超,吳宓,季羨林'
let hallAllOfFameArr = Str.split(',')
console.log(hallAllOfFameArr)
// ["陳寅恪", "魯迅", "錢鍾書", "胡適", "王國維", "梁啟超", "吳宓", "季羨林"]

2, 轉化為二維陣列

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(),
truetruecontentStrArr = contentStr.split(firstSplit),
truetrueresultArr = contentStrArr.map((element) => {
return element.split(secondSplit)
})
truereturn resultArr
}

var str = `
渺渺鐘聲出遠方,依依林影萬鴉藏。
一生負氣成今日,四海無人對夕陽。
破碎山河迎勝利,殘餘歲月送淒涼。
鬆門鬆菊何年夢,且認他鄉作故鄉。
`
console.log(str.strTo2dArr('\n', ','))

執行之，輸出結果如下：

[ [ ‘渺渺鐘聲出遠方’, ‘依依林影萬鴉藏。’ ],

[ ‘一生負氣成今日’, ‘四海無人對夕陽。’ ],

[ ‘破碎山河迎勝利’, ‘殘餘歲月送淒涼。’ ],

[ ‘鬆門鬆菊何年夢’, ‘且認他鄉作故鄉。’ ] ]

3, startsWith()

if (typeof String.prototype.startsWith != 'function') {
String.prototype.startsWith = function (prefix){
return this.slice(0, prefix.length) === prefix
}
}

4, endsWith()

if (typeof String.prototype.endsWith != 'function') {
String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1
}
}

結束

這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。