JavaScript 字符串經常使用操做紀要

JavaScript 字符串用於存儲和處理文本。所以在編寫 JS 代碼之時她總如影隨形，在你處理用戶的輸入數據的時候，在讀取或設置 DOM 對象的屬性時，在操做 Cookie 時，在轉換各類不一樣 Date 時，諸此等等，繁不能數；而她那蠻多的 API 呵，總有些讓人不肯去記憶的衝動，既然用時常搜，倒不如爛筆頭一番，以做告終，順道也體現下這博客存在的價值，由此就有了這篇紀要。

如此處排版不能如意，煩請移步原文首鏈：JavaScript 字符串實用常操紀要；

字符串截取

1. substring()

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)

2. 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)

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

4. 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 則顯得更垂手可得。

5. 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)

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，這是一個更趨向人性化的時代嘛)
}

2. 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()方法

stringObject.replace(regexp/substr,replacement)

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 更是如虎添翼，使人愛不釋手。

對於她的使用，阮一峯在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 () {
    return this.split('').reverse().join('')
}

去除空白行

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轉化爲數組

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

抗戰時期，陳寅恪先生在給傅斯年的信中，說了這樣一段話：「弟之生性，非得安眠飽食，不能做文，非是既富且樂，不能做詩，生平偶有安眠飽食之時，故偶可爲文，而一輩子從無既富且樂之日，故總作很差詩。」 雖是以調侃的以言說，恐也是寄之感慨的悟道之語。自由獨立的經濟生活，是自由思想與獨立人格的堅強後盾與實際保障。寫博這事兒，也是同樣，整日疲於需求之成改，熬時碌碌，生爲餬口；偶有的閒時氣力，哪兒是能經得起折騰的？惟是在壘碼的間隙，略作記錄，積而成篇。而這番爲得的餬口的奮爭，也是但願未來的某天——能有既富且樂之時，談那些想談的，作那些想作的事，如此而已。

文章出處: http://www.jeffjade.com
原文連接: http://www.jeffjade.com/2016/11/24/116-JavaScript-string-operation/

猜你喜歡/有用

• JavaScript字符串間的比較
• JavaScript對象length