字符串截取
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)長度較大的話狂票,以實(shí)際截取的長度為準(zhǔn))
4. split()
str.split([separator][, limit])
separator 指定用來分割字符串的字符(串)。separator 可以是一個字符串或正則表達(dá)式熙暴。 如果忽略 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 表示查找的開始位置磷支,省略的話則從開始位置進(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()
用來檢索指定的字符串值在字符串中首次出現(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()方法用于檢索字符串中指定的子字符串光戈,或檢索與正則表達(dá)式相匹配的子字符串。它會返回第一個匹配的子字符串的起始位置遂赠,如果沒有匹配的久妆,則返回-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)檢索指定的值跷睦,或找到一個或多個正則表達(dá)式的匹配筷弦。
如果參數(shù)中傳入的是子字符串或是沒有進(jìn)行全局匹配的正則表達(dá)式,那么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ù)傳入的是具有全局匹配的正則表達(dá)式反症,那么match()從開始位置進(jìn)行多次匹配,直到最后畔派。如果沒有匹配到結(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()方法用來進(jìn)行字符串替換操作士嚎,它可以接收兩個參數(shù)呜魄,前者為被替換的子字符串(可以是正則),后者為用來替換的文本莱衩。
如果第一個參數(shù)傳入的是子字符串或是沒有進(jìn)行全局匹配的正則表達(dá)式爵嗅,那么replace()方法將只進(jìn)行一次替換(即替換最前面的),返回經(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ù)傳入的全局匹配的正則表達(dá)式睹晒,那么replace()將會對符合條件的子字符串進(jìn)行多次替換,最后返回經(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 才引入進(jìn)來的新語法奋单,來解決傳統(tǒng)輸出String模板的蹩腳問題锉试;其功能之強(qiáng)大,設(shè)計(jì)之貼心览濒,著實(shí)令人得到極大滿足感呆盖,好如久旱逢甘霖一般的舒暢。更何況贷笛,在當(dāng)今 MVVM
前端框架大行其道的時代应又,使用 ES6 語法也是不用自己個兒去操心兼容性問題,對于塑造 Dom Template
更是如虎添翼乏苦,令人愛不釋手株扛。
對于她的使用,阮一峰在ECMAScript 6 入門有過詳細(xì)的描述以及示例汇荐,在此就不贅述洞就。只需要明白我們可以像這樣去操作了,試問爽否拢驾?
function ncieFunc() {
return "四海無人對夕陽";
}
var niceMan = "陳寅恪";
var jadeTalk = `一生負(fù)氣成今日 \n ${ncieFunc()} ,
語出 ${niceMan} 的《憶故居》奖磁。
`
console.log(jadeTalk)
運(yùn)行之改基,Chrome Console 輸出結(jié)果如下:
一生負(fù)氣成今日四海無人對夕陽 ,語出 陳寅恪 的《憶故居》繁疤。
組合其法
細(xì)看 JavaScript 提供的String Api咖为,還是有蠻多的,也有些許廢棄的稠腊,也有將在未來版本會出來的躁染;這其中不乏很多也挺有用的,譬如: charAt(x)架忌、charCodeAt(x)吞彤、concat(v1, v2,…)、fromCharCode(c1, c2,…) 等等,還有 ES6
對字符串的擴(kuò)展叹放,比如 字符串的遍歷器接口饰恕,repeat() 等等,這可以參見 ES6-string井仰,這里就不多贅述埋嵌。
在實(shí)際代碼生產(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ù)組
1, 轉(zhuǎn)化為一維數(shù)組
場景是根據(jù)某子字符串轉(zhuǎn)化吱七,直接就用 split
就好;如果轉(zhuǎn)換規(guī)則不統(tǒng)一鹤竭,那么請自求多福吧踊餐。
let Str = '陳寅恪,魯迅,錢鐘書,胡適,王國維,梁啟超,吳宓,季羨林'
let hallAllOfFameArr = Str.split(',')
console.log(hallAllOfFameArr)
// ["陳寅恪", "魯迅", "錢鐘書", "胡適", "王國維", "梁啟超", "吳宓", "季羨林"]
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)方,依依林影萬鴉藏。
一生負(fù)氣成今日,四海無人對夕陽臀稚。
破碎山河迎勝利,殘馀歲月送凄涼吝岭。
松門松菊何年夢,且認(rèn)他鄉(xiāng)作故鄉(xiāng)。
`
console.log(str.strTo2dArr('\n', ','))
運(yùn)行之吧寺,輸出結(jié)果如下:
[ [ ‘渺渺鐘聲出遠(yuǎn)方’, ‘依依林影萬鴉藏窜管。’ ],[ ‘一生負(fù)氣成今日’, ‘四海無人對夕陽稚机∧环’ ],[ ‘破碎山河迎勝利’, ‘殘馀歲月送凄涼±堤酰’ ],[ ‘松門松菊何年夢’, ‘且認(rèn)他鄉(xiāng)作故鄉(xiāng)失乾〕N酰’ ] ]
猜你喜歡/有用
JavaScript字符串間的比較
JavaScript對象length