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 則顯得更輕而易舉。

查找類方法

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', ','))

運行之,輸出結果如下:

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

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

[ ‘破碎山河迎勝利', ‘殘馀歲月送凄涼。' ],

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內容

  • JS字符串方法 1.獲取字符串長度的方法(str.length); var str = "welcome to c...
    劉松陽閱讀 1,091評論 0 0
  • 字符串對象的屬性 字符串對象的方法(說明: 底色為土黃色的文字部分主要標明改部分的主要特征標簽) String對象...
    南航閱讀 1,113評論 0 0
  • 字符串截取 1. substring() substring()是最常用到的字符串截取方法,它可以接收兩個參數(參...
    白小蟲閱讀 221評論 0 0
  • 六月一日正式下崗到今天八月一日。整整兩個月縮在清冷的空調房里享受著里外溫差帶來的舒適感。靠著外賣來感受酸甜苦辣,一...
    大白一個閱讀 152評論 0 0
  • 華為手機系列在AS上調試接口,沒有對應的log日志,操作如下: 進入撥號界面輸入:##2846579## 依次選擇...
    Android_小馬范兒閱讀 4,115評論 0 0