前端基礎(chǔ)(一):字符串String常用操作

一熄云、String 的屬性

1.1 length 屬性

獲取字符串的長(zhǎng)度,需要特別注意的是:JavaScript 中的中文每個(gè)漢字也只代表一個(gè)字符妙真,可能跟其他語(yǔ)言不同缴允。

'中國(guó)'.length  // 2

1.2 prototype 屬性

在 OOP 中經(jīng)常用到,用來(lái)給對(duì)象添加屬性或方法珍德,且添加的屬性或方法在所有實(shí)例上共享练般。因此常用來(lái)擴(kuò)展 JavaScript 對(duì)象矗漾,如下面的代碼給 String 添加了一個(gè)去除兩邊空格的方法。

String.prototype.trim = function(){
    return this.replace(/^\s*|\s*$/g,'');
}

二踢俄、String 的方法

2.1 charAt(index)

獲取指定位置的字符串缩功,從 0 到 str.length - 1

var str = 'abcdef';
charAt(2);  // 'c'
charAt(2);  // ''

2.2 charCodeAt(index)

返回指定位置字符的 unicode 編碼

var str = "abcde";
console.log(str.charCodeAt(0));  // 97

2.3 查找類方法

2.31 indexOf(searchValue, fromIndex)

用來(lái)檢索指定的字符串首次出現(xiàn)的位置,fromIndex 可以省略都办,省略的話從 0 開始檢索嫡锌。

var str = 'abcdeabcde';
str.indexOf('a');  // 0
str.indexOf('a', 3);  // 5
str.indexOf('bc');  // 1

2.32 includes(), startsWith(), endsWith()

傳統(tǒng)上,我們通常使用 indexOf 方法來(lái)確定琳钉,一個(gè)字符串是否包含在另一個(gè)字符串中势木。ES6 又提供了三種新方法。

  • includes(): 返回布爾值歌懒,表示是否找到了參數(shù)字符串啦桌。
  • startsWith(): 返回布爾值,表示參數(shù)字符串是否在原字符串的頭部及皂。
  • endsWith(): 返回布爾值甫男,表示參數(shù)字符串是否在原字符串的尾部。
let str = 'Hello world!';
str.startsWith('Hello');  // true
str.endsWith('!');  // true
str.includes('o');  // true

這三個(gè)方法都支持第二個(gè)參數(shù)验烧,表示開始搜索的位置板驳。

let str = 'Hello world!';
str.startsWith('world', 6);  // true
str.endsWith('Hello', 5);  // true
str.includes('Hello', 1);  // false

可見,使用第二個(gè)參數(shù) n 時(shí)碍拆,endsWith 的行為與其他兩個(gè)方法不同若治。它針對(duì)前 n 個(gè)字符,而其他兩個(gè)方法針對(duì)從第 n 個(gè)位置直到字符串結(jié)束感混。

2.33 lastIndexOf(searchValue, fromIndex)

用來(lái)檢索指定的字符串最后出現(xiàn)的位置端幼,檢索順序從后向前。

var str = 'abcdeabcde';
console.log(str.lastIndexOf('a'));  // 5
console.log(str.lastIndexOf('a', 3));  // 0 從第索引3的位置往前檢索
console.log(str.lastIndexOf('bc'));  // 6

2.34 search()

str.search(subStr), str.search(regExp) 用于檢索字符串中指定的子字符串弧满,或與正則表達(dá)式相匹配的子字符串婆跑。它返回第一個(gè)子字符串的起始位置,如未匹配到庭呜,則返回 -1洽蛀。

var str = 'abcDEDF';
console.log(str.search('c'));  // 2
console.log(str.search('d'));  // -1
console.log(str.search(/d/i));  // 3

2.35 match()

str.match(subStr), str.match(regExp) 在字符串內(nèi)檢索指定的值,或找到一個(gè)(或多個(gè))正則表達(dá)式的匹配疟赊。

如果參數(shù)中傳入的是子字符串或沒(méi)有全局匹配的正則表達(dá)式郊供,則match方法從開始位置進(jìn)行一次匹配,若未匹配到則返回null近哟,否則返回一個(gè)數(shù)組驮审。

var str = '1a2b3c4d5be';
console.log(str.match('h'));  // null
console.log(str.match('b'));  // ["b", index: 3, input: "1a2b3c4d5e"]
console.log(str.match(/b/));  // ["b", index: 3, input: "1a2b3c4d5e"]

如果參數(shù)中傳入的是具有全局匹配的正則表達(dá)式,那么match從開始位置進(jìn)行多次匹配,直到最后疯淫。如沒(méi)有匹配到結(jié)果地来,則返回null。否則返回一個(gè)數(shù)組熙掺,數(shù)組中存放所有復(fù)合要求的子字符串未斑,且沒(méi)有index和input屬性。

var str = '1a2b3c4db5e';
console.log(str.match(/h/g));  // null
console.log(str.match(/\d/g));  // ["1", "2", "3", "4", "5"]
console.log(str.match(/b/g));  // ["b", "b"]

2.4 截取類方法

2.41 substring(start, end)

這是最常用到的字符串截取方法币绩,可接受兩個(gè)參數(shù)(參數(shù)不能為負(fù))蜡秽,分別是要截取的起始和結(jié)束位置。它將返回一個(gè)新的字符串缆镣,其內(nèi)容是從start到end-1處的所有字符芽突。若結(jié)束參數(shù)end省略,則表示從起始位置一直截取到最后董瞻。

var str = 'abcdefg';
console.log(str.substring(1, 4));  // bcd
console.log(str.substring(1));  // bcdefg
console.log(str.substring(-1));  // abcdefg寞蚌,傳入負(fù)值時(shí)會(huì)視為0

2.42 substr(start, length)

在字符串中抽取從start下標(biāo)開始的指定長(zhǎng)度的字符,其返回值是一個(gè)字符串钠糊,包含從start處開始的length個(gè)字符挟秤。若沒(méi)有指定length,則為從start處開始到結(jié)尾的字符抄伍。若start為負(fù)數(shù)煞聪,則表示從字符串尾部開始算起。

var str = 'abcdefg';
console.log(str.substr(1, 3));  // bcd
console.log(str.substr(2));  // cdefg
console.log(str.substr(-2, 4));  // fg逝慧,目標(biāo)長(zhǎng)度較大的話,以實(shí)際截取的長(zhǎng)度為準(zhǔn)

2.43 slice(start, end)

slice() 方法與 substring() 類似啄糙,它傳入的兩個(gè)參數(shù)也分別對(duì)應(yīng)著開始和結(jié)束位置笛臣。區(qū)別在于,slice 中的參數(shù)可以為負(fù)隧饼,若參數(shù)為負(fù)沈堡,則該參數(shù)規(guī)定的是從字符串尾部開始計(jì)算起的位置。也就是說(shuō)燕雁,-1 指字符串的最后一個(gè)字符诞丽。

var str = 'abcdefg';
console.log(str.slice(1, 4));  // bcd
console.log(str.slice(-3, -1));  // ef
console.log(str.slice(1, -1));  // bcdef
console.log(str.slice(-1, -3));  // "" 若傳入的參數(shù)有問(wèn)題,則返回空

2.5 其他方法

2.51 replace()

替換匹配的值拐格,接受兩個(gè)參數(shù)僧免,第一個(gè)是搜索模式,第二個(gè)是替換的內(nèi)容捏浊。

// replace的一個(gè)應(yīng)用懂衩,就是用來(lái)消除字符串首尾兩端的空格
var str = "  hello world  ";
str.replace(/^\s+|\s+$/g, '');

replace() 方法的第二個(gè)參數(shù)還可以是個(gè)函數(shù),將每一個(gè)匹配內(nèi)容替換為函數(shù)返回值。

'3 and 5'.replace(/\d/g,function(match){
    return 2 * match;
});  // "6 and 10"

2.52 split(separator, howmany)

該方法用于把字符串分割成字符串?dāng)?shù)組浊洞,第一個(gè)參數(shù)表示分割位置(參考符)牵敷,第二個(gè)參數(shù)表示返回?cái)?shù)組的允許最大長(zhǎng)度。

var str = 'a|b|c|d|e';
console.log(str.split('|'));  // ["a", "b", "c", "d", "e"]
console.log(str.split('|', 3));  // ["a", "b", "c"]
console.log(str.split(''));  // ["a", "|", "b", "|", "c", "|", "d", "|", "e"]

也可以用正則來(lái)切割

var str = 'a1b2c3d4e';
console.log(str.split(/\d/));  // ["a", "b", "c", "d", "e"]

2.53 toLowerCase() 和 toUpperCase()

字母大小寫轉(zhuǎn)化

var str = 'JavaScript';
console.log(str.toLowerCase());  // javascript
console.log(str.toUpperCase());  // JAVASCRIPT
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末法希,一起剝皮案震驚了整個(gè)濱河市枷餐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌苫亦,老刑警劉巖毛肋,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異著觉,居然都是意外死亡村生,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門饼丘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)趁桃,“玉大人,你說(shuō)我怎么就攤上這事肄鸽∥啦。” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵典徘,是天一觀的道長(zhǎng)蟀苛。 經(jīng)常有香客問(wèn)我,道長(zhǎng)逮诲,這世上最難降的妖魔是什么帜平? 我笑而不...
    開封第一講書人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮梅鹦,結(jié)果婚禮上裆甩,老公的妹妹穿的比我還像新娘。我一直安慰自己齐唆,他們只是感情好嗤栓,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著箍邮,像睡著了一般茉帅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锭弊,一...
    開封第一講書人閱讀 49,031評(píng)論 1 285
  • 那天堪澎,我揣著相機(jī)與錄音,去河邊找鬼味滞。 笑死全封,一個(gè)胖子當(dāng)著我的面吹牛马昙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播刹悴,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼行楞,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了土匀?” 一聲冷哼從身側(cè)響起子房,我...
    開封第一講書人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎就轧,沒(méi)想到半個(gè)月后证杭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡妒御,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年解愤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乎莉。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡送讲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出惋啃,到底是詐尸還是另有隱情哼鬓,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布边灭,位于F島的核電站异希,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏绒瘦。R本人自食惡果不足惜称簿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惰帽。 院中可真熱鬧憨降,春花似錦、人聲如沸善茎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)垂涯。三九已至,卻和暖如春航邢,著一層夾襖步出監(jiān)牢的瞬間耕赘,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工膳殷, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留操骡,地道東北人九火。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像册招,于是被迫代替她去往敵國(guó)和親岔激。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

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