原計(jì)劃這篇筆記是像原書(shū)那樣將字符串和正則一起整理出來(lái)朴恳，結(jié)果發(fā)現(xiàn)一個(gè)模板字符串就挺長(zhǎng)的窜骄，那就只寫(xiě)字符串相關(guān)吧正則新內(nèi)容比較少蛾魄，也很簡(jiǎn)單餐曹，就不單獨(dú)寫(xiě)了
字符串新增API
- codePointAt()
解決非BMP字符碼位問(wèn)題(BMP逛拱，Basic Multilingual Plane 基本多文種平面)。
超出UTF-16中能夠用16位編碼單元表示范圍的字符叫做BMP台猴，ES5中無(wú)法按預(yù)期得到自己穿的編碼結(jié)果朽合，因此ES6中引入了codePonitAt()，解決該問(wèn)題饱狂。
let text = '??';
console.log(text.charAt(0)) // ''
console.log(text.charAt(1)) // ''
console.log(text.charCodeAt(0)) // 55362
console.log(text.charCodeAt(1)) // 57271
console.log(text.codePointAt(0)) // 134071
console.log(text.codePointAt(1)) // 57271
- String.fromCodePoint()
codePointAt()的逆操作方法
console.log(String.fromCodePoint(134071)); // '??'
- normalize()
在對(duì)比自己串之前曹步，將其標(biāo)準(zhǔn)化同一種形式，默認(rèn)“NFC”
- NFC：以標(biāo)準(zhǔn)等價(jià)方式分解休讳，然后以標(biāo)準(zhǔn)等價(jià)方式重組
- NFD：以標(biāo)準(zhǔn)等價(jià)方式分解
- NFKC： 以兼容等價(jià)方式分解
- NFKD： 以兼容等價(jià)方式分解
- includes()
如果在字符串中檢測(cè)到指定文本則返回true讲婚，否則返回false。 - startWith()
如果字符串的起始部分檢測(cè)到指定文本則返回true衍腥，否則返回false磺樱。 - endWidth()
如果字符串的結(jié)束部分檢測(cè)到指定文本則返回true，否則返回false婆咸。
以上三個(gè)方法都接收兩個(gè)參數(shù)：第一個(gè)參數(shù)指定要搜索的文本竹捉；第二個(gè)參數(shù)是可選的，指定一開(kāi)始搜索的位置的索引值尚骄。
endWith()方法從這個(gè)索引值減去欲搜索文本長(zhǎng)度的位置開(kāi)始正向匹配块差。
let message = 'hello world!';
console.log(message.includes('o')); //true 匹配的是正向第一個(gè)字母“o”
console.log(message.startWith('hello')); //true 字符串以‘hello’開(kāi)頭
console.log(message.endWith('!')); //true 字符串以“！”結(jié)尾
console.log(message.startWith('o',4)); //true 字符串索引為4的位置是“o”
console.log(message.endWidth('o',8)); //true 字符串索引位置7是“o” 索引值8減去欲搜索的文本長(zhǎng)度1等于正向開(kāi)始的位置倔丈，正向索引7位置是“o”結(jié)束的
console.log(message.includes('o',8)); //false 索引位置8開(kāi)始往后計(jì)算憨闰，沒(méi)有字母“o”
模板字面量
模板字面量也算是字符串的一種擴(kuò)展，但是因?yàn)楸容^重要和實(shí)用需五，單獨(dú)列出來(lái)做筆記鹉动。
解決問(wèn)題：
1. 多行字符串：一個(gè)正式的多行字符串的概念。ES5中如果需要處理的字符串比較長(zhǎng)時(shí)宏邮，換行比較麻煩泽示；
2. 基本的字符串格式化：將變量的值嵌入字符串的能力缸血。ES5需要字符串里加變量的時(shí)候主要是用“+”進(jìn)行拼接；
3. HTML轉(zhuǎn)義：向HTML插入經(jīng)過(guò)安全轉(zhuǎn)換后的字符串的能力械筛。有效的解決了前端的XXS攻擊捎泻。
- 基礎(chǔ)語(yǔ)法: 用反引號(hào)(`)替換單雙引號(hào)
let message = ` hello world ! `;
console.log(message); // hello world !
- 多行字符串
let message = ` hello world !
This is ES6!`;
console.log(message);
// hello world !
//This is ES6!
*hello 前有一個(gè)空格要注意，因?yàn)榭崭褚彩菍儆谧址囊徊糠?- 占位符：${變量}就是我們常用的占位符埋哟，變量部分可以用JS的任意表達(dá)式進(jìn)行替換笆豁。
let name = 'King';
let message = ' Hello, ${name}';
console.log(message) ; //Hello,King
- 標(biāo)簽?zāi)０?br>
這個(gè)是模板字面量最有威力也是最復(fù)雜的部分。
從代碼開(kāi)始看起吧赤赊，能更好的理解什么是標(biāo)簽?zāi)０濉?/li>
let name = 'King';
let language = 'ES6';
let message = tag`Hello ${name},\n welcome to ${language} world!`;
function tag(literals,...substitutions){
*模板標(biāo)簽是一個(gè)函數(shù)闯狱，調(diào)用時(shí)傳入加工過(guò)的模板字面量各個(gè)部分的數(shù)據(jù)。
*第一個(gè)參數(shù)是一個(gè)數(shù)組抛计，包含JS解釋過(guò)后的字面量字符串扩氢，它之后的所有參數(shù)都是每一個(gè)占位符的解釋值。
console.log(`literals:`,literals);
//["Hello ", ",? welcome to ", " world!", raw: ["Hello ", ",\n welcome to ", " world!"]]
* literals:注釋后是通過(guò)谷歌瀏覽器控制臺(tái)輸出的值爷辱，是一個(gè)數(shù)組录豺，
但是大家可能看著比較困惑，數(shù)組里怎么還有對(duì)象饭弓？一點(diǎn)點(diǎn)解釋双饥，別著急。
* 首先弟断，暫時(shí)不看raw相關(guān)的內(nèi)容咏花，其他的數(shù)組項(xiàng)，分別是message字符串中的常量部分阀趴。
注意看literals[0]項(xiàng)的值是含空格的昏翰，
literals[1]項(xiàng)時(shí)帶著處理過(guò)的換行符的，
literals[2]項(xiàng)也是包含world前面的空格符的刘急。
至此棚菊，literals是被占位符${變量}分隔開(kāi)的各個(gè)常量項(xiàng)。
我們會(huì)發(fā)現(xiàn)literals[1]中在message定義時(shí)寫(xiě)的‘\n’被解釋為一個(gè)新行叔汁，而不是原本的'\n'換行符统求。
* 好，那我們要是想要沒(méi)有被處理過(guò)的原文本常量怎么辦据块？ES6中把這個(gè)叫做原生字符串信息码邻。
剛剛控制臺(tái)輸出的數(shù)組中有一個(gè)raw屬性，這個(gè)就是ES6中模板字面量的一個(gè)新屬性另假，是一個(gè)包含一個(gè)字面值的原生等價(jià)信息數(shù)組像屋。
舉個(gè)例子：literals[1]總有一個(gè)對(duì)應(yīng)的literals.raw[1]
literals[1] ==> ",? welcome to " //處理過(guò)的字面值
literals.raw[1] ==> ",\n welcome to " //原生字面值
console.log(`substitutions:`,substitutions);
//["King", "ES6"]
* substitutions：這個(gè)一看就比較簡(jiǎn)單明確了，就是我們模板字面量里的占位符被處理過(guò)的結(jié)果边篮。
}
上邊寫(xiě)了這么長(zhǎng)的解釋內(nèi)容己莺，有些同學(xué)可能還比較困惑因苹，這個(gè)標(biāo)簽?zāi)０宓降子惺裁从茫?br>
其實(shí)也就是把模板字面量的各個(gè)項(xiàng)都拆分開(kāi)，可以讓你更自由的或是說(shuō)更復(fù)雜的處理這一段信息篇恒，在里面加上對(duì)業(yè)務(wù)有用的信息。
比如說(shuō)在函數(shù)里對(duì)substitutions的第二個(gè)值進(jìn)行判斷凶杖，如果值是ES6胁艰，那就把它變成Javascript，然后再把literals和substitutions的各個(gè)項(xiàng)重新組合起來(lái)智蝠，輸出結(jié)果就變成了“Hello King腾么，welcome to Javascript world!`”。當(dāng)然杈湾，這只是一個(gè)例子解虱，實(shí)際肯定不會(huì)像我這么無(wú)聊。
注意： 這里有幾個(gè)小技巧
- literals[0]總是字符串的始端漆撞，假設(shè)將上邊的 message 變成 tag
${name},\n welcome to ${language} world!殴泰，那literals[0]的值就會(huì)變成''一個(gè)空字符串，就像literals[literals.length-1]總是字符串的結(jié)尾一樣浮驳。 - 根據(jù)上一條悍汛，可以總結(jié)出substitutions的數(shù)量總比literals的數(shù)量少一個(gè)。
即：substitutions.length===literals.length-1 的結(jié)果總為true至会。 - 標(biāo)簽?zāi)０搴瘮?shù)內(nèi)部建議使用substitutions.length來(lái)做循環(huán)計(jì)數(shù)离咐，使用literals.length常常會(huì)越界。
- String.raw:模板字面量中使用原始值,輸出模板的原生形式奉件。
let message1 = `Hello\nWorld`;
let message2 = String.raw`Hello\nWorld`;
console.log(message1);
//Hello
//World
console.log(message2); //Hello\nWorld
