如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，?請(qǐng)點(diǎn)這里 

JavaScript 字符串用于存儲(chǔ)和處理文本。因此在編寫 JS 代碼之時(shí)她總?cè)缬半S形，在你處理用戶的輸入數(shù)據(jù)的時(shí)候，在讀取或設(shè)置 DOM 對(duì)象的屬性時(shí)，在操作 Cookie 時(shí)，在轉(zhuǎn)換各種不同 Date 時(shí)，諸此等等，繁不能數(shù)；而她那滿多的 API 呵，總有些讓人不愿去記憶的沖動(dòng)，既然用時(shí)常搜，倒不如爛筆頭一翻，順道也體現(xiàn)下博客存在的價(jià)值，由此就有了這篇紀(jì)要。

字符串截取

1. substring()

xString.substring(start,end)

substring()是最常用到的字符串截取方法，它可以接收兩個(gè)參數(shù)(參數(shù)不能為負(fù)值)，分別是要截取的開(kāi)始位置和結(jié)束位置，它將返回一個(gè)新的字符串，其內(nèi)容是從start處到end-1處的所有字符。若結(jié)束參數(shù)(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 (傳負(fù)值則視為0)

2. slice()

stringObject.slice(start, end)

slice()方法與substring()方法非常類似，它傳入的兩個(gè)參數(shù)也分別對(duì)應(yīng)著開(kāi)始位置和結(jié)束位置。而區(qū)別在于，slice()中的參數(shù)可以為負(fù)值，如果參數(shù)是負(fù)數(shù)，則該參數(shù)規(guī)定的是從字符串的尾部開(kāi)始算起的位置。也就是說(shuō)，-1 指字符串的最后一個(gè)字符。

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下標(biāo)開(kāi)始的指定數(shù)目的字符。其返回值為一個(gè)字符串，包含從 stringObject的start（包括start所指的字符）處開(kāi)始的length個(gè)字符。如果沒(méi)有指定 length，那么返回的字符串包含從start到stringObject的結(jié)尾的字符。另外如果start為負(fù)數(shù)，則表示從字符串尾部開(kāi)始算起。

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  (目標(biāo)長(zhǎng)度較大的話，以實(shí)際截取的長(zhǎng)度為準(zhǔn))

4. split()

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

• separator 指定用來(lái)分割字符串的字符（串）。separator 可以是一個(gè)字符串或正則表達(dá)式。 如果忽略 separator，則返回整個(gè)字符串的數(shù)組形式。如果 separator 是一個(gè)空字符串，則 str 將會(huì)把原字符串中每個(gè)字符的數(shù)組形式返回。
• limit 一個(gè)整數(shù)，限定返回的分割片段數(shù)量。split 方法仍然分割每一個(gè)匹配的 separator，但是返回的數(shù)組只會(huì)截取最多 limit 個(gè)元素。

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

話說(shuō)這個(gè)函數(shù)真心好用，很多時(shí)候的字符截取需求，就是依賴于某個(gè)字符；而以上三個(gè)函數(shù)都需知道其位置。我們當(dāng)然可以借助 indexOf 等方法獲取，很顯然這很繁瑣；而借助 split 則顯得更輕而易舉。

查找類方法

1. indexOf() & includes()

stringObject.indexOf(searchValue,fromIndex)

indexOf()用來(lái)檢索指定的字符串值在字符串中首次出現(xiàn)的位置。它可以接收兩個(gè)參數(shù)，searchValue 表示要查找的子字符串，fromIndex 表示查找的開(kāi)始位置，省略的話則從開(kāi)始位置進(jìn)行檢索。

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()用來(lái)檢索指定的字符串值在字符串中首次出現(xiàn)的位置 ，然而很多時(shí)候，使用它的場(chǎng)景在于判斷字符串中是否存在指定的字符串；因此代碼就會(huì)如此：

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

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

str.includes(searchString[, position])

searchString 將要搜尋的子字符串。position 可選。從當(dāng)前字符串的哪個(gè)索引位置開(kāi)始搜尋子字符串；默認(rèn)為0。需要注意的是，includes() 是區(qū)分大小寫的。

'Blue Whale'.includes('blue'); // returns false '喬峰喬布斯喬幫主'.includes('喬布斯'); // returns true if (str.includes('yoursPecifiedStr')) { // do something(這樣寫是不是更為人性化？Yeah，這是一個(gè)更趨向人性化的時(shí)代嘛)
}

2. lastIndexOf()

stringObject.lastIndexOf(searchValue,fromIndex)

lastIndexOf()語(yǔ)法與indexOf()類似，它返回的是一個(gè)指定的子字符串值最后出現(xiàn)的位置，其檢索順序是從后向前。

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()方法用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串。它會(huì)返回第一個(gè)匹配的子字符串的起始位置，如果沒(méi)有匹配的，則返回-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()方法可在字符串內(nèi)檢索指定的值，或找到一個(gè)或多個(gè)正則表達(dá)式的匹配。

如果參數(shù)中傳入的是子字符串或是沒(méi)有進(jìn)行全局匹配的正則表達(dá)式，那么match()方法會(huì)從開(kāi)始位置執(zhí)行一次匹配，如果沒(méi)有匹配到結(jié)果，則返回null。否則則會(huì)返回一個(gè)數(shù)組，該數(shù)組的第0個(gè)元素存放的是匹配文本，除此之外，返回的數(shù)組還含有兩個(gè)對(duì)象屬性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#"]

如果參數(shù)傳入的是具有全局匹配的正則表達(dá)式，那么match()從開(kāi)始位置進(jìn)行多次匹配，直到最后。如果沒(méi)有匹配到結(jié)果，則返回null。否則則會(huì)返回一個(gè)數(shù)組，數(shù)組中存放所有符合要求的子字符串，并且沒(méi)有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()方法用來(lái)進(jìn)行字符串替換操作，它可以接收兩個(gè)參數(shù)，前者為被替換的子字符串（可以是正則），后者為用來(lái)替換的文本。

如果第一個(gè)參數(shù)傳入的是子字符串或是沒(méi)有進(jìn)行全局匹配的正則表達(dá)式，那么replace()方法將只進(jìn)行一次替換（即替換最前面的），返回經(jīng)過(guò)一次替換后的結(jié)果字符串。

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

如果第一個(gè)參數(shù)傳入的全局匹配的正則表達(dá)式，那么replace()將會(huì)對(duì)符合條件的子字符串進(jìn)行多次替換，最后返回經(jīng)過(guò)多次替換的結(jié)果字符串。

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

toLowerCase() & toUpperCase()

stringObject.toLowerCase() stringObject.toUpperCase()

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

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

模板字符串

這個(gè)也是 ES6 才引入進(jìn)來(lái)的新語(yǔ)法，來(lái)解決傳統(tǒng)輸出String模板的蹩腳問(wèn)題；其功能之強(qiáng)大，設(shè)計(jì)之貼心，著實(shí)令人得到極大滿足感，好如久旱逢甘霖一般的舒暢。更何況，在當(dāng)今 MVVM 前端框架大行其道的時(shí)代，使用 ES6 語(yǔ)法也是不用自己個(gè)兒去操心兼容性問(wèn)題，對(duì)于塑造 Dom Template 更是如虎添翼，令人愛(ài)不釋手。

對(duì)于她的使用，阮一峰在ECMAScript 6 入門有過(guò)詳細(xì)的描述以及示例，在此就不贅述。只需要明白我們可以像這樣去操作了，試問(wèn)爽否？

function ncieFunc() { return "四海無(wú)人對(duì)夕陽(yáng)";
} var niceMan = "陳寅恪"; var jadeTalk = `一生負(fù)氣成今日 \n ${ncieFunc()} ,
語(yǔ)出 ${niceMan} 的《憶故居》。
` console.log(jadeTalk)

運(yùn)行之，Chrome Console 輸出結(jié)果如下：

一生負(fù)氣成今日
四海無(wú)人對(duì)夕陽(yáng) ,
語(yǔ)出 陳寅恪 的《憶故居》。

組合其法

細(xì)看 JavaScript 提供的String Api，還是有蠻多的，也有些許廢棄的，也有將在未來(lái)版本會(huì)出來(lái)的；這其中不乏很多也挺有用的，譬如： charAt(x)、charCodeAt(x)、concat(v1, v2,…)、fromCharCode(c1, c2,…) 等等,還有 ES6 對(duì)字符串的擴(kuò)展，比如 字符串的遍歷器接口，repeat() 等等，這可以參見(jiàn) ES6-string，這里就不多贅述。

在實(shí)際代碼生產(chǎn)中，很多時(shí)候需要用這些提供的基本方法，來(lái)打出一套組合拳，以解決其需求所需。很顯然又可以借助 prototype 屬性，將自造的各路拳法，其歸置于 String 對(duì)象，然后天亮啦。這一步就看個(gè)人喜好了，這里拋出一二段，以引大玉。

字符串反轉(zhuǎn)

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轉(zhuǎn)化為數(shù)組

1, 轉(zhuǎn)化為一維數(shù)組

場(chǎng)景是根據(jù)某子字符串轉(zhuǎn)化，直接就用 split 就好；如果轉(zhuǎn)換規(guī)則不統(tǒng)一，那么請(qǐng)自求多福吧。

let Str = '陳寅恪,魯迅,錢鐘書(shū),胡適,王國(guó)維,梁?jiǎn)⒊?吳宓,季羨林' let hallAllOfFameArr = Str.split(',')
console.log(hallAllOfFameArr)
// ["陳寅恪", "魯迅", "錢鐘書(shū)", "胡適", "王國(guó)維", "梁?jiǎn)⒊?, "吳宓", "季羨林"]

2, 轉(zhuǎn)化為二維數(shù)組

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 = `
渺渺鐘聲出遠(yuǎn)方,依依林影萬(wàn)鴉藏。
一生負(fù)氣成今日,四海無(wú)人對(duì)夕陽(yáng)。
破碎山河迎勝利,殘馀歲月送凄涼。
松門松菊何年夢(mèng),且認(rèn)他鄉(xiāng)作故鄉(xiāng)。
` console.log(str.strTo2dArr('\n', ','))

運(yùn)行之，輸出結(jié)果如下：

[ [ ‘渺渺鐘聲出遠(yuǎn)方’, ‘依依林影萬(wàn)鴉藏?！?],
[ ‘一生負(fù)氣成今日’, ‘四海無(wú)人對(duì)夕陽(yáng)?！?],
[ ‘破碎山河迎勝利’, ‘殘馀歲月送凄涼?！?],
[ ‘松門松菊何年夢(mèng)’, ‘且認(rèn)他鄉(xiāng)作故鄉(xiāng)?！?] ]

抗戰(zhàn)時(shí)期，陳寅恪先生在給傅斯年的信中，說(shuō)了這樣一段話：“弟之生性，非得安眠飽食，不能作文，非是既富且樂(lè)，不能作詩(shī)，平生偶有安眠飽食之時(shí)，故偶可為文，而一生從無(wú)既富且樂(lè)之日，故總做不好詩(shī)。” 雖是以調(diào)侃的以言說(shuō)，恐也是寄之感慨的悟道之語(yǔ)。自由獨(dú)立的經(jīng)濟(jì)生活，是自由思想與獨(dú)立人格的堅(jiān)強(qiáng)后盾與實(shí)際保障。寫博這事兒，也是一樣，整日疲于需求之成改，熬時(shí)碌碌，生為糊口；偶有的閑時(shí)氣力，哪兒是能經(jīng)得起折騰的？唯是在壘碼的間隙，略做記錄，積而成篇。而這番為得的糊口的奮爭(zhēng)，也是希望將來(lái)的某天——能有既富且樂(lè)之時(shí)，談那些想談的，做那些想做的事，如此而已。

 

藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn?)是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)?、 cs界面設(shè)計(jì)?、 ipad界面設(shè)計(jì)?、 包裝設(shè)計(jì)?、 圖標(biāo)定制?、 用戶體驗(yàn) 、交互設(shè)計(jì)、?網(wǎng)站建設(shè)?、平面設(shè)計(jì)服務(wù)