JavaScript 字符串常用操作小結(jié)(非常實(shí)用)

字符串截取

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 = '陳寅恪,魯迅,錢鐘書,胡適,王國(guó)維,梁?jiǎn)⒊?吳宓,季羨林'

let hallAllOfFameArr = Str.split(',')

console.log(hallAllOfFameArr)

// ["陳寅恪", "魯迅", "錢鐘書", "胡適", "王國(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)厅缺。' ] ]

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蔬顾,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子湘捎,更是在濱河造成了極大的恐慌诀豁,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件窥妇,死亡現(xiàn)場(chǎng)離奇詭異舷胜,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)活翩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門烹骨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人材泄,你說(shuō)我怎么就攤上這事沮焕。” “怎么了拉宗?”我有些...
    開(kāi)封第一講書人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵峦树,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我旦事,道長(zhǎng)魁巩,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任姐浮,我火速辦了婚禮谷遂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘卖鲤。我一直安慰自己埋凯,他們只是感情好点楼,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著白对,像睡著了一般掠廓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上甩恼,一...
    開(kāi)封第一講書人閱讀 51,708評(píng)論 1 305
  • 那天蟀瞧,我揣著相機(jī)與錄音,去河邊找鬼条摸。 笑死悦污,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的钉蒲。 我是一名探鬼主播切端,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼顷啼!你這毒婦竟也來(lái)了踏枣?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤钙蒙,失蹤者是張志新(化名)和其女友劉穎茵瀑,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體躬厌,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡马昨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了扛施。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸿捧。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖疙渣,靈堂內(nèi)的尸體忽然破棺而出笛谦,到底是詐尸還是另有隱情,我是刑警寧澤昌阿,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布饥脑,位于F島的核電站,受9級(jí)特大地震影響懦冰,放射性物質(zhì)發(fā)生泄漏灶轰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一刷钢、第九天 我趴在偏房一處隱蔽的房頂上張望笋颤。 院中可真熱鬧,春花似錦、人聲如沸伴澄。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)非凌。三九已至举农,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間敞嗡,已是汗流浹背颁糟。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留喉悴,地道東北人棱貌。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像箕肃,于是被迫代替她去往敵國(guó)和親婚脱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • JS字符串方法 1.獲取字符串長(zhǎng)度的方法(str.length); var str = "welcome to c...
    劉松陽(yáng)閱讀 1,071評(píng)論 0 0
  • 字符串對(duì)象的屬性 字符串對(duì)象的方法(說(shuō)明: 底色為土黃色的文字部分主要標(biāo)明改部分的主要特征標(biāo)簽) String對(duì)象...
    南航閱讀 1,104評(píng)論 0 0
  • 字符串截取 1. substring() substring()是最常用到的字符串截取方法勺像,它可以接收兩個(gè)參數(shù)(參...
    白小蟲(chóng)閱讀 216評(píng)論 0 0
  • 六月一日正式下崗到今天八月一日障贸。整整兩個(gè)月縮在清冷的空調(diào)房里享受著里外溫差帶來(lái)的舒適感∮缴荆靠著外賣來(lái)感受酸甜苦辣惹想,一...
    大白一個(gè)閱讀 151評(píng)論 0 0
  • 華為手機(jī)系列在AS上調(diào)試接口问词,沒(méi)有對(duì)應(yīng)的log日志督函,操作如下: 進(jìn)入撥號(hào)界面輸入:##2846579## 依次選擇...
    Android_小馬范兒閱讀 4,103評(píng)論 0 0