2019-01-08JavaScript?|?字符串1739View0
對于JavaScript字符串操作方法,你真的全部掌握了嗎沛硅?來看看這篇面試中逞廴校考的字符串操作大全,包含最新的ES6字符串操作方法摇肌,值得收藏哦擂红。
返回在指定位置的字符围小。
varstr="abc"console.log(str.charAt(0))//a
返回在指定的位置的字符的 Unicode 編碼树碱。
varstr="abc"console.log(str.charCodeAt(1))//98
連接字符串涉茧。
vara ="abc";varb ="def";varc= a.concat(b); console.log(c);//abcdef
檢索字符串疹娶。indexOf() 方法對大小寫敏感伴栓!
varstr="Hello world!"console.log(str.indexOf("Hello"))//0console.log(str.indexOf("World"))//-1console.log(str.indexOf("world"))///6
match() 方法可在字符串內(nèi)檢索指定的值雨饺,或找到一個或多個正則表達(dá)式的匹配钳垮。該方法類似 indexOf() 和 lastIndexOf(),但是它返回指定的值额港,而不是字符串的位置饺窿。
varstr="1 abc 2 def 3"console.log(str.match(/\d+/g))//123
replace() 方法用于在字符串中用一些字符替換另一些字符移斩,或替換一個與正則表達(dá)式匹配的子串肚医。
varstr="abc Def!"console.log(str.replace(/abc/,"CBA"))//CBA Def!
search() 方法用于檢索字符串中指定的子字符串向瓷,或檢索與正則表達(dá)式相匹配的子字符串肠套。要執(zhí)行忽略大小寫的檢索,請追加標(biāo)志 i猖任。如果沒有找到任何匹配的子串你稚,則返回 -1。
varstr="abc DEF!"console.log(str.search(/DEF/))//4
提取字符串的片斷刁赖,并在新的字符串中返回被提取的部分。
stringObject.slice(start,end);
start:要抽取的片斷的起始下標(biāo)长搀。如果是負(fù)數(shù)宇弛,則該參數(shù)規(guī)定的是從字符串的尾部開始算起的位置。也就是說源请,-1 指字符串的最后一個字符枪芒,-2 指倒數(shù)第二個字符,以此類推巢钓。
end:緊接著要抽取的片段的結(jié)尾的下標(biāo)病苗。若未指定此參數(shù),則要提取的子串包括 start 到原字符串結(jié)尾的字符串症汹。如果該參數(shù)是負(fù)數(shù)硫朦,那么它規(guī)定的是從字符串的尾部開始算起的位置。
varstr="abc def ghk"console.log(str.slice(6))//f ghk
把字符串分割為字符串?dāng)?shù)組咬展。
var str="abc def ghi jkl"console.log(str.split(" "))//["abc","def","ghi","jkl"]console.log(str.split("") )//["a","b","c"," ","d","e","f"," ","g","h","i"," ","j","k","l"]console.log(str.split(" ",3))//["abc","def","ghi"]
把字符串轉(zhuǎn)換為小寫。
varstr="ABC def!"console.log(str.toLocaleLowerCase())//abc def!
把字符串轉(zhuǎn)換為大寫涮总。
varstr="ABC def!"console.log(str.toLocaleUpperCase())//ABC DEF!
把字符串轉(zhuǎn)換為小寫祷舀。
varstr="ABC def!"console.log(str.toLowerCase())//abc def!
把字符串轉(zhuǎn)換為大寫。
varstr="ABC def!"console.log(str.toUpperCase())//ABC DEF!
從起始索引號提取字符串中指定數(shù)目的字符抛丽。
stringObject.substr(start,length)。
start:必需饰豺。要抽取的子串的起始下標(biāo)亿鲜。必須是數(shù)值。如果是負(fù)數(shù)冤吨,那么該參數(shù)聲明從字符串的尾部開始算起的位置蒿柳。也就是說,-1 指字符串中最后一個字符漩蟆,-2 指倒數(shù)第二個字符垒探,以此類推。
length:可選爆安。子串中的字符數(shù)叛复。必須是數(shù)值。如果省略了該參數(shù)扔仓,那么返回從 stringObject 的開始位置到結(jié)尾的字串褐奥。
varstr="abc def"console.log(str.substr(2))//c defconsole.log(str.substr(2,4))// c de
提取字符串中兩個指定的索引號之間的字符翘簇。
stringObject.substring(start,stop)撬码。
start :必需。一個非負(fù)的整數(shù)版保,規(guī)定要提取的子串的第一個字符在 stringObject 中的位置呜笑。
stop :可選。一個非負(fù)的整數(shù)彻犁,比要提取的子串的最后一個字符在 stringObject 中的位置多 1叫胁。如果省略該參數(shù),那么返回的子串會一直到字符串的結(jié)尾汞幢。
varstr="abc def"console.log(str.substring(2))//c defconsole.log(str.substring(2,4))// c
相同點(diǎn):如果只是寫一個參數(shù)驼鹅,兩者的作用都一樣:都是是截取字符串從當(dāng)前下標(biāo)以后直到字符串最后的字符串片段。
substr(startIndex);
substring(startIndex);
varstr ='123456789';console.log(str.substr(2));//? "3456789"console.log(str.substring(2)) ;//? "3456789"
不同點(diǎn):第二個參數(shù)
substr(startIndex,lenth): 第二個參數(shù)是截取字符串的長度(從起始點(diǎn)截取某個長度的字符串);
substring(startIndex, endIndex): 第二個參數(shù)是截取字符串最終的下標(biāo) (截取2個位置之間的字符串,‘含頭不含尾’)输钩。
console.log("123456789".substr(2,5));//? "34567"console.log("123456789".substring(2,5)) ;//? "345"
lets ='??a';s.codePointAt(0)// 134071s.codePointAt(1)// 57271s.codePointAt(2)// 97
codePointAt方法的參數(shù),是字符在字符串中的位置(從 0 開始)买乃。上面代碼中姻氨,JavaScript?將“??a”視為三個字符,codePointAt 方法在第一個字符上剪验,正確地識別了“??”肴焊,返回了它的十進(jìn)制碼點(diǎn) 134071(即十六進(jìn)制的20BB7)。在第二個字符(即“??”的后兩個字節(jié))和第三個字符“a”上碉咆,codePointAt方法的結(jié)果與charCodeAt方法相同抖韩。
ES5 提供String.fromCharCode方法疫铜,用于從碼點(diǎn)返回對應(yīng)字符,但是這個方法不能識別 32 位的 UTF-16 字符(Unicode 編號大于0xFFFF)双谆。
String.fromCharCode(0x20BB7)// "?"
上面代碼中壳咕,String.fromCharCode不能識別大于0xFFFF的碼點(diǎn),所以0x20BB7就發(fā)生了溢出顽馋,最高位2被舍棄了谓厘,最后返回碼點(diǎn)U+0BB7對應(yīng)的字符,而不是碼點(diǎn)U+20BB7對應(yīng)的字符寸谜。
ES6 提供了String.fromCodePoint方法竟稳,可以識別大于0xFFFF的字符,彌補(bǔ)了String.fromCharCode方法的不足熊痴。在作用上他爸,正好與codePointAt方法相反。
String.fromCodePoint(0x20BB7)// "??"String.fromCodePoint(0x78,0x1f680,0x79) ==='x\uD83D\uDE80y'// true
for(letcodePointof'abc') {console.log(codePoint)}// "a"http:// "b"http:// "c"
除了遍歷字符串诊笤,這個遍歷器最大的優(yōu)點(diǎn)是可以識別大于0xFFFF的碼點(diǎn),傳統(tǒng)的for循環(huán)無法識別這樣的碼點(diǎn)巾陕。
at方法可以識別Unicode 編號大于0xFFFF的字符,返回正確的字符鄙煤。
‘a(chǎn)bc’.at(0)//"a"'吉'.at(0)//"吉"
許多歐洲語言有語調(diào)符號和重音符號。為了表示它們梯刚,Unicode 提供了兩種方法凉馆。一種是直接提供帶重音符號的字符,比如ǒ(u01D1)。另一種是提供合成符號(combining character)句喜,即原字符與重音符號的合成预愤,兩個字符合成一個字符,比如O(u004F)和ˇ(u030C)合成ǒ(u004Fu030C)咳胃。
這兩種表示方法植康,在視覺和語義上都等價,但是?JavaScript?不能識別展懈。
'\u01D1'==='\u004F\u030C'//false? ? '\u01D1'.length// 1'\u004F\u030C'.length// 2
上面代碼表示销睁,JavaScript 將合成字符視為兩個字符,導(dǎo)致兩種表示方法不相等存崖。
ES6 提供字符串實例的normalize()方法冻记,用來將字符的不同表示方法統(tǒng)一為同樣的形式,這稱為 Unicode 正規(guī)化来惧。
'\u01D1'.normalize() ==='\u004F\u030C'.normalize()// true
六冗栗、includes(), startsWith(), endsWith()
傳統(tǒng)上,JavaScript 只有indexOf方法供搀,可以用來確定一個字符串是否包含在另一個字符串中隅居。ES6 又提供了三種新方法。
**includes()**:返回布爾值葛虐,表示是否找到了參數(shù)字符串胎源。**startsWith()**:返回布爾值,表示參數(shù)字符串是否在原字符串的頭部屿脐。**endsWith()**:返回布爾值涕蚤,表示參數(shù)字符串是否在原字符串的尾部。lets ='Hello world!';? ? s.startsWith('Hello')// trues.endsWith('!')// trues.includes('o')// true
這三個方法都支持第二個參數(shù)的诵,表示開始搜索的位置万栅。
lets ='Hello world!';? ? s.startsWith('world',6)// trues.endsWith('Hello',5)// trues.includes('Hello',6)// false
上面代碼表示,使用第二個參數(shù)n時奢驯,endsWith的行為與其他兩個方法有所不同申钩。它針對前n個字符,而其他兩個方法針對從第n個位置直到字符串結(jié)束瘪阁。
repeat方法返回一個新字符串,表示將原字符串重復(fù)n次管跺。
'x'.repeat(3) //"xxx"'hello'.repeat(2) //"hellohello"'na'.repeat(0) //""
參數(shù)如果是小數(shù)义黎,會被取整。
'na'.repeat(2.9) //"nana"
如果repeat的參數(shù)是負(fù)數(shù)或者Infinity豁跑,會報錯廉涕。
'na'.repeat(Infinity)// RangeError'na'.repeat(-1)// RangeError
ES2017 引入了字符串補(bǔ)全長度的功能狐蜕。如果某個字符串不夠指定長度宠纯,會在頭部或尾部補(bǔ)全。padStart()用于頭部補(bǔ)全层释,padEnd()用于尾部補(bǔ)全婆瓜。
'x'.padStart(5,'ab')// 'ababx''x'.padStart(4,'ab')// 'abax''x'.padEnd(5,'ab')// 'xabab''x'.padEnd(4,'ab')// 'xaba'
上面代碼中,padStart和padEnd一共接受兩個參數(shù)贡羔,第一個參數(shù)用來指定字符串的最小長度廉白,第二個參數(shù)是用來補(bǔ)全的字符串。
如果原字符串的長度乖寒,等于或大于指定的最小長度猴蹂,則返回原字符串。
'xxx'.padStart(2,'ab')// 'xxx''xxx'.padEnd(2,'ab')// 'xxx'
如果用來補(bǔ)全的字符串與原字符串楣嘁,兩者的長度之和超過了指定的最小長度磅轻,則會截去超出位數(shù)的補(bǔ)全字符串。
'abc'.padStart(10,'0123456789')// '0123456abc'
如果省略第二個參數(shù)马澈,默認(rèn)使用空格補(bǔ)全長度瓢省。
'x'.padStart(4)// '? x''x'.padEnd(4)// 'x? '
padStart的常見用途是為數(shù)值補(bǔ)全指定位數(shù)。下面代碼生成 10 位的數(shù)值字符串痊班。
'1'.padStart(10,'0')// "0000000001"'12'.padStart(10,'0')// "0000000012"'123456'.padStart(10,'0')// "0000123456"
另一個用途是提示字符串格式。
'12'.padStart(10,'YYYY-MM-DD')// "YYYY-MM-12"'09-12'.padStart(10,'YYYY-MM-DD')// "YYYY-09-12"
matchAll方法返回一個正則表達(dá)式在當(dāng)前字符串的所有匹配涤伐。
模板字符串(template string)是增強(qiáng)版的字符串缨称,用反引號(`)標(biāo)識凝果。它可以當(dāng)作普通字符串使用,也可以用來定義多行字符串睦尽,或者在字符串中嵌入變量器净。-----字符串模板,工作中用到比較多当凡。
// 普通字符串`In JavaScript '\n' is a line-feed.`// 多行字符串`In JavaScript this is
not legal.`console.log(`string text line 1
string text line 2`);// 字符串中嵌入變量letname ="Bob", time ="today";`Hello${name}, how are you${time}?`
上面代碼中的模板字符串山害,都是用反引號表示。如果在模板字符串中需要使用反引號沿量,則前面要用反斜杠轉(zhuǎn)義浪慌。
letgreeting =`\`Yo\` World!`;
如果使用模板字符串表示多行字符串,所有的空格和縮進(jìn)都會被保留在輸出之中朴则。
$('#list').html(`
- first
- second
上面代碼中权纤,所有模板字符串的空格和換行,都是被保留的,比如<ul>標(biāo)簽前面會有一個換行汹想。如果你不想要這個換行外邓,可以使用trim方法消除它。
$('#list').html(`
- first
- second
模板字符串中嵌入變量古掏,需要將變量名寫在${}之中坐榆。
functionauthorize(user, action){if(!user.hasPrivilege(action)) {thrownewError(// 傳統(tǒng)寫法為// 'User '// + user.name// + ' is not authorized to do '// + action// + '.'`User${user.name}is not authorized to do${action}.`);? }}
大括號內(nèi)部可以放入任意的 JavaScript 表達(dá)式,可以進(jìn)行運(yùn)算冗茸,以及引用對象屬性席镀。
letx =1;lety =2;`${x}+${y}=${x + y}`// "1 + 2 = 3"`${x}+${y * 2}=${x + y * 2}`// "1 + 4 = 5"letobj = {x:1, y:2};`${obj.x + obj.y}`// "3"
模板字符串之中還能調(diào)用函數(shù)。
functionfn(){return"Hello World";}`foo${fn()}bar`// foo Hello World bar
如果大括號中的值不是字符串夏漱,將按照一般的規(guī)則轉(zhuǎn)為字符串豪诲。比如,大括號中是一個對象挂绰,將默認(rèn)調(diào)用對象的toString方法屎篱。
如果模板字符串中的變量沒有聲明,將報錯葵蒂。
// 變量place沒有聲明letmsg =`Hello,${place}`;// 報錯
由于模板字符串的大括號內(nèi)部交播,就是執(zhí)行 JavaScript 代碼,因此如果大括號內(nèi)部是一個字符串践付,將會原樣輸出秦士。
`Hello${'World'}`// "Hello World"
模板字符串甚至還能嵌套。
const tmpl = addrs => `${addrs.map(addr => ``).join('')}${addr.first}${addr.last}`;