JavaScript 字符串實用常操紀(jì)要

字符串截取

1. substring()

xString.substring(start,end)

substring()是最常用到的字符串截取方法码党,它可以接收兩個參數(shù)(參數(shù)不能為負(fù)值),分別是要截取的開始位置和結(jié)束位置,它將返回一個新的字符串,其內(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()方法非常類似,它傳入的兩個參數(shù)也分別對應(yīng)著開始位置和結(jié)束位置莺葫。而區(qū)別在于匪凉,slice()中的參數(shù)可以為負(fù)值,如果參數(shù)是負(fù)數(shù)捺檬,則該參數(shù)規(guī)定的是從字符串的尾部開始算起的位置再层。也就是說,-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下標(biāo)開始的指定數(shù)目的字符聂受。其返回值為一個字符串,包含從 stringObject的start(包括start所指的字符)處開始的length個字符烤镐。如果沒有指定 length蛋济,那么返回的字符串包含從start到stringObject的結(jié)尾的字符。另外如果start為負(fù)數(shù)炮叶,則表示從字符串尾部開始算起碗旅。

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ǔn))

4. split()

str.split([separator][, limit])
  • separator 指定用來分割字符串的字符(串)镜悉。separator 可以是一個字符串或正則表達式祟辟。 如果忽略 separator,則返回整個字符串的數(shù)組形式侣肄。如果 separator 是一個空字符串旧困,則 str 將會把原字符串中每個字符的數(shù)組形式返回。

  • limit 一個整數(shù),限定返回的分割片段數(shù)量吼具。split 方法仍然分割每一個匹配的 separator僚纷,但是返回的數(shù)組只會截取最多 limit 個元素。

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

話說這個函數(shù)真心好用馍悟,很多時候的字符截取需求畔濒,就是依賴于某個字符;而以上三個函數(shù)都需知道其位置锣咒。我們當(dāng)然可以借助 indexOf 等方法獲取侵状,很顯然這很繁瑣;而借助 split 則顯得更輕而易舉毅整。

查找類方法

1. indexOf() & includes()

stringObject.indexOf(searchValue,fromIndex)

indexOf()用來檢索指定的字符串值在字符串中首次出現(xiàn)的位置趣兄。它可以接收兩個參數(shù),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()用來檢索指定的字符串值在字符串中首次出現(xiàn)的位置 戏蔑,然而很多時候蹋凝,使用它的場景在于判斷字符串中是否存在指定的字符串;因此代碼就會如此:

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

要知道在這樣的場景下总棵,ES6 語言中的includes()就顯得更優(yōu)雅許多鳍寂;includes() 方法用于判斷一個字符串是否被包含在另一個字符串中,如果是返回true情龄,否則返回false迄汛。

str.includes(searchString[, position])

searchString 將要搜尋的子字符串。position 可選骤视。從當(dāng)前字符串的哪個索引位置開始搜尋子字符串鞍爱;默認(rèn)為0。需要注意的是专酗,includes() 是區(qū)分大小寫的睹逃。

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

2. lastIndexOf()

stringObject.lastIndexOf(searchValue,fromIndex)

lastIndexOf()語法與indexOf()類似唯卖,它返回的是一個指定的子字符串值最后出現(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()方法用于檢索字符串中指定的子字符串拜轨,或檢索與正則表達式相匹配的子字符串。它會返回第一個匹配的子字符串的起始位置允青,如果沒有匹配的橄碾,則返回-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)檢索指定的值,或找到一個或多個正則表達式的匹配法牲。
如果參數(shù)中傳入的是子字符串或是沒有進行全局匹配的正則表達式史汗,那么match()方法會從開始位置執(zhí)行一次匹配,如果沒有匹配到結(jié)果拒垃,則返回null停撞。否則則會返回一個數(shù)組,該數(shù)組的第0個元素存放的是匹配文本悼瓮,除此之外戈毒,返回的數(shù)組還含有兩個對象屬性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ù)傳入的是具有全局匹配的正則表達式埋市,那么match()從開始位置進行多次匹配,直到最后命贴。如果沒有匹配到結(jié)果道宅,則返回null。否則則會返回一個數(shù)組胸蛛,數(shù)組中存放所有符合要求的子字符串污茵,并且沒有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()方法用來進行字符串替換操作葬项,它可以接收兩個參數(shù)省咨,前者為被替換的子字符串(可以是正則),后者為用來替換的文本玷室。
如果第一個參數(shù)傳入的是子字符串或是沒有進行全局匹配的正則表達式,那么replace()方法將只進行一次替換(即替換最前面的)笤受,返回經(jīng)過一次替換后的結(jié)果字符串穷缤。

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

如果第一個參數(shù)傳入的全局匹配的正則表達式,那么replace()將會對符合條件的子字符串進行多次替換箩兽,最后返回經(jīng)過多次替換的結(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

模板字符串

這個也是 ES6 才引入進來的新語法身坐,來解決傳統(tǒng)輸出String模板的蹩腳問題;其功能之強大落包,設(shè)計之貼心部蛇,著實令人得到極大滿足感,好如久旱逢甘霖一般的舒暢咐蝇。更何況涯鲁,在當(dāng)今 MVVM 前端框架大行其道的時代,使用 ES6 語法也是不用自己個兒去操心兼容性問題,對于塑造 Dom Template 更是如虎添翼抹腿,令人愛不釋手岛请。
對于她的使用彻亲,阮一峰在ECMAScript 6 入門有過詳細(xì)的描述以及示例躯保,在此就不贅述。只需要明白我們可以像這樣去操作了歌焦,試問爽否肩祥?

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

運行之,Chrome Console 輸出結(jié)果如下:

一生負(fù)氣成今日
四海無人對夕陽 ,
語出 陳寅恪 的《憶故居》搭幻。

組合其法

細(xì)看 JavaScript 提供的String Api咧擂,還是有蠻多的,也有些許廢棄的檀蹋,也有將在未來版本會出來的松申;這其中不乏很多也挺有用的,譬如: charAt(x)俯逾、charCodeAt(x)贸桶、concat(v1, v2,…)、fromCharCode(c1, c2,…) 等等,還有 ES6 對字符串的擴展桌肴,比如 字符串的遍歷器接口皇筛,repeat() 等等,這可以參見 ES6-string坠七,這里就不多贅述水醋。
在實際代碼生產(chǎn)中,很多時候需要用這些提供的基本方法彪置,來打出一套組合拳拄踪,以解決其需求所需。很顯然又可以借助 prototype 屬性拳魁,將自造的各路拳法惶桐,其歸置于 String 對象,然后天亮啦潘懊。這一步就看個人喜好了姚糊,這里拋出一二段,以引大玉授舟。

字符串反轉(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ù)組

  • 轉(zhuǎn)化為一維數(shù)組
    場景是根據(jù)某子字符串轉(zhuǎn)化救恨,直接就用 split 就好;如果轉(zhuǎn)換規(guī)則不統(tǒng)一岂却,那么請自求多福吧忿薇。

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

  • 轉(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)方,依依林影萬鴉藏裙椭。
一生負(fù)氣成今日,四海無人對夕陽。
破碎山河迎勝利,殘馀歲月送凄涼署浩。
松門松菊何年夢,且認(rèn)他鄉(xiāng)作故鄉(xiāng)揉燃。
`
console.log(str.strTo2dArr('\n', ','))

運行之,輸出結(jié)果如下:

[ [ ‘渺渺鐘聲出遠(yuǎn)方’, ‘依依林影萬鴉藏筋栋〈短溃’ ],
[ ‘一生負(fù)氣成今日’, ‘四海無人對夕陽”兹粒’ ],
[ ‘破碎山河迎勝利’, ‘殘馀歲月送凄涼抢腐。’ ],
[ ‘松門松菊何年夢’, ‘且認(rèn)他鄉(xiāng)作故鄉(xiāng)襟交÷醣叮’ ] ]

抗戰(zhàn)時期,陳寅恪先生在給傅斯年的信中捣域,說了這樣一段話:“弟之生性啼染,非得安眠飽食,不能作文焕梅,非是既富且樂迹鹅,不能作詩,平生偶有安眠飽食之時贞言,故偶可為文斜棚,而一生從無既富且樂之日,故總做不好詩该窗〉苁矗” 雖是以調(diào)侃的以言說,恐也是寄之感慨的悟道之語酗失。自由獨立的經(jīng)濟生活粗梭,是自由思想與獨立人格的堅強后盾與實際保障。寫博這事兒级零,也是一樣,整日疲于需求之成改滞乙,熬時碌碌奏纪,生為糊口;偶有的閑時氣力斩启,哪兒是能經(jīng)得起折騰的序调?唯是在壘碼的間隙,略做記錄兔簇,積而成篇发绢。而這番為得的糊口的奮爭硬耍,也是希望將來的某天——能有既富且樂之時,談那些想談的边酒,做那些想做的事经柴,如此而已。

文章出處: http://www.jeffjade.com

原文鏈接: http://www.jeffjade.com/2016/11/24/116-JavaScript-string-operation/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末墩朦,一起剝皮案震驚了整個濱河市坯认,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌氓涣,老刑警劉巖牛哺,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異劳吠,居然都是意外死亡引润,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門痒玩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來淳附,“玉大人,你說我怎么就攤上這事凰荚∪脊郏” “怎么了?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵便瑟,是天一觀的道長缆毁。 經(jīng)常有香客問我,道長到涂,這世上最難降的妖魔是什么脊框? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮践啄,結(jié)果婚禮上浇雹,老公的妹妹穿的比我還像新娘。我一直安慰自己屿讽,他們只是感情好昭灵,可當(dāng)我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著伐谈,像睡著了一般烂完。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上诵棵,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天抠蚣,我揣著相機與錄音,去河邊找鬼履澳。 笑死嘶窄,一個胖子當(dāng)著我的面吹牛怀跛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播柄冲,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼吻谋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了羊初?” 一聲冷哼從身側(cè)響起滨溉,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎长赞,沒想到半個月后晦攒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡得哆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年脯颜,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贩据。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡栋操,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出饱亮,到底是詐尸還是另有隱情矾芙,我是刑警寧澤,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布近上,位于F島的核電站剔宪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏壹无。R本人自食惡果不足惜葱绒,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望斗锭。 院中可真熱鬧地淀,春花似錦、人聲如沸岖是。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽豺撑。三九已至作箍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間前硫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工荧止, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留屹电,地道東北人阶剑。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像危号,于是被迫代替她去往敵國和親牧愁。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,941評論 2 355

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