當(dāng)ES6遇上字符串和正則表達(dá)式

字符串是一種重要的數(shù)據(jù)類型，而正則表達(dá)式則是賦予了編程人員更多操作字符串的能力。ES6的創(chuàng)作者為字符串和正則表達(dá)式添加了許多的新功能。下面玲瓏將來進(jìn)行一個(gè)全面的總結(jié)。

字符串和正則兩個(gè)部分各兩節(jié)，全文閱讀時(shí)間大約10分鐘

字符串

1.更好的Unicode支持

Unicode是一個(gè)字符集。將全世界所有的字符包含在一個(gè)集合里，計(jì)算機(jī)只要支持這一個(gè)字符集，就能顯示所有的字符，再也不會有亂碼了。

在es6出現(xiàn)之前，js字符串一直基于16位字符編碼進(jìn)行構(gòu)建。每16位序列是一個(gè)編碼單元，代表一個(gè)字符，Unicode0引入擴(kuò)展字符集，16位字符編碼將不再包含任何字符。編碼規(guī)則也因此變更。

對于UTF-16來說，碼位可以有多個(gè)編碼單元表示，是表示不是組成。

對于UTF-16前2^16個(gè)碼位都是16位的編碼單元表示，這個(gè)范圍被稱作基本多文種平面BMP，當(dāng)超過時(shí)，引入代理對，規(guī)定用兩個(gè)16位編碼單元表示一個(gè)碼位，即32位輔助平面字符。一個(gè)32位代理對表示字符長度為1，但是length屬性值為2.

如果想進(jìn)一步了解他可以參考阮一峰的一片日志： www.ruanyifeng.com/blog/2014/1… 日志里面說到的碼點(diǎn)就是碼位

1.1codePointAt（0）方法

在es6之前，charCodeAt（）方法返回字符每個(gè)16位編碼單元對應(yīng)的數(shù)值，再在es6中新增了codePointAt方法，codePointAt(0)返回的是位置0處的碼點(diǎn)或者說是位置0處的碼位，包含多個(gè)編碼單元>16進(jìn)制上限FFFF,charCodeAt(0)方法返回的是位置0的第一個(gè)編碼單元.

因此可以用此方法判斷一個(gè)字符占用編碼單元的數(shù)量

function is32Bit(c) {
  
  return c.codePointAt(0) > 0xFFFF;
}
console.log(is32Bit("吉利")); //true
console.log(is32Bit("a"));  //false

1.2 String.fromCodePoint（）方法

codePointAt()方法在字符串中檢索一個(gè)字符串的碼位，也可以使用String.fromCodePoint()方法根據(jù)指定的碼位生成一個(gè)字

console.log(String.fromCodePoint(134071));   //吉

1.3normalize()方法

在比較字符或者進(jìn)行排序的時(shí)候，可能出現(xiàn)等價(jià)的情況，然而等價(jià)卻存在兩種情況

• 規(guī)范的等效是無論從哪個(gè)角度來看，兩個(gè)序列的碼位都是沒有區(qū)別的
  
• 兼容的碼位序列看起來不同，但是在特定的情況下可以交換使用。 但是在嚴(yán)格模式下不是等效的，除非通過某些方法把這種等效關(guān)系標(biāo)準(zhǔn)化
  

normalize()方法提供Unicode的標(biāo)準(zhǔn)化形式，，這個(gè)方法可以接受一個(gè)可選的字符串參數(shù)。Unicode標(biāo)準(zhǔn)化形式有四種

以標(biāo)準(zhǔn)等價(jià)方式分解，然后以標(biāo)準(zhǔn)等價(jià)方式重組（“NFC”），默認(rèn)值選項(xiàng)

• 以標(biāo)準(zhǔn)等價(jià)方式分解（“NFD”）
• 以兼容等價(jià)方式分解（“NFKC”）
• 以兼容方式分解，然后以標(biāo)準(zhǔn)等價(jià)方式重組

1.4 正則表達(dá)式u修飾符

正則表達(dá)式后添加u修飾符會將編碼單元模式切換成字符模式，這個(gè)時(shí)候的代理對不會被視為兩個(gè)字符。

但是length這個(gè)屬性返回的仍然是字符串編碼單元的數(shù)量，而不是碼位的數(shù)量。但是也可以通過帶u修飾符的正則表達(dá)式來解決這個(gè)問題。

function codePointerLength(text) {
  let result = text.match(/[\s\S]/gu);
  return result ? result.length:0;
}
console.log(codePointerLength("吉abc")); //4

檢測是否支持u修飾符

u修飾符在不兼容ES6的JavaScript引擎中使用會導(dǎo)致語法錯(cuò)誤，可以通過以下函數(shù)檢測是否支持。

function hasRegExpU() {
  try{
    var pattern = new Regexp(".","u");
    return ture;
  }catch (ex) {
    return false;
  }
}

2.其他字符串的變更

2.1字符串中的字串識別

開發(fā)者們用indexOf（）方法在一段字符串中檢測另一段子字符串。在es6中提供3個(gè)方法達(dá)到類似的效果

• startWith()方法，在字符串起始部分檢測指定文本返回true，否則返回false。
• incledes()方法，如果在字符串中檢測到指定文本返回true，否則返回false。
• endWith()方法，顧名思義在末尾檢測，用法與上面一致。

上面三個(gè)方法接受兩個(gè)參數(shù)，第1個(gè)參數(shù)是指定要搜索的文本是一個(gè)字符。第2個(gè)是開始搜索位置的索引值是一個(gè)數(shù)字。不指定第二個(gè)參數(shù)endwith一般從字符串末尾處開始匹配。示范如下

let mes = "hello world";
console.log(mes.startWith("hello"));
console.log(mes.endWith("!"));
console.log(mes.includes("o"));
console.log(mes.startWith("o"));
console.log(mes.endWith("d!"));
console.log(mes.includes("x"));
console.log(mes.startWith("o",4));
console.log(mes.endWith("o",8));
console.log(mes.includes("o",8));
//9個(gè)結(jié)果依次為：true true true  false true false  true true false
console.log(mes.endWith("o",8));會從第7位第二個(gè)o開始匹配。索引值-要搜索文本的長度=8-1

2.2 repeat()方法

es6為字符串新增加的repeat（）方法，接受一個(gè)number類型的參數(shù)，返回重復(fù)該次數(shù)的一個(gè)新字符串。

console.log(x.repeat(3)); //"xxx"

我是2條分割線，嘎嘎嘎

正則表達(dá)式

1.其他正則表達(dá)式的變更

1.1正則表達(dá)式y(tǒng)修飾符

y修飾符粘滯正則表達(dá)式，從正則表達(dá)式的lastIndex屬性開始進(jìn)行。如果指定位置沒有匹配成功那么將停止匹配并返回結(jié)果。

let text = 'hello1 hello2 hello3';
let patt = /hello\d\s?/,
  result = patt.exec(text);
let gPatt = /helllo\d\s?/g,
  gResult = gPatt.exec(text);
let yPatt = /hello\d\s?/y,
  yResult = yPatt.exec(text);
console.log(resut[0]);  //"hello1 "
console.log(gResut[0]);  //"hello1 "
console.log(yResut[0]);  //"hello1 "
patt.lastIndex = 1;
gPatt.lastIndex = 1;
yPatt.lastIndex = 1;
result = patt.exec(text);
gResult = gPatt.exec(text);
yResult = yPatt.exec(text);
console.log(resut[0]);  //"hello1 "
console.log(gResut[0]);  //"hello2 "
console.log(yResut[0]);  //拋出錯(cuò)誤

這里三個(gè)正則表達(dá)式中，第一個(gè)沒有修飾符，第二個(gè)全局修飾符g，第三個(gè)用了y修飾符。

第一次匹配的時(shí)候是從h字符開始匹配。當(dāng)lastIndex = 1;之后，對于沒有修飾符的表達(dá)式自動忽略這個(gè)變化，結(jié)果還是hello1 ，g修飾符會從e字符開始匹配，輸出hello2 ，yResul會從e字符開始匹配，ello h與之不等，最后結(jié)果為null，所以會拋出錯(cuò)誤。

當(dāng)執(zhí)行y修飾符之后，會把上一次匹配最后的一個(gè)字符的后一位索引值保存在lastIndex中去，如果執(zhí)行y修飾符匹配結(jié)果為空那么lastIndex值會被重置為0，g修飾符與此相同。

只有調(diào)用正則表達(dá)式對象的exec（）和test（）這些方法時(shí)才會設(shè)計(jì)lastIndex屬性，如調(diào)用字符串的方法natch()就不會觸發(fā)粘滯行為。

檢測y修飾符是否存在可以用sticky屬性，如果js引擎支持粘滯修飾符，則stickey屬性值為true，否則為false

let patt = /hello\d/y;
console.log(patt.sticky);

1.2正則表達(dá)式的復(fù)制

在es5中，可以給正則表達(dá)式的構(gòu)造函數(shù)傳遞正則表達(dá)式作為參數(shù)來復(fù)制這個(gè)正則表達(dá)式。但事實(shí)第一個(gè)參數(shù)為正則表達(dá)式的時(shí)候不能用第二個(gè)參數(shù)，es6中修改了這個(gè)行為，第二個(gè)參數(shù)可以是修飾符。

let re1 = /ab/i;
let re2 = new RegExp(re1,"g");
console.log(re1.toString()); // "/ab/i"
console.log(re2.toString()); // "/ab/g"

1.3flags屬性

es6新增的flags屬性會返回所有應(yīng)用于當(dāng)前正則表達(dá)式的修飾符

let re = /ab/g;
console.log(re.source);  //"ab"
console.log(re.flags);  //"g"

2.模板字面量

2.1基礎(chǔ)語法

一句話概括，用反撇號（`）代替了雙引號，單引號。

如果想在字符串中用反撇號，就用\轉(zhuǎn)義即可。如

let message = `\`hello\`!`;
console.log(message);

結(jié)果是 hello!

2.2簡化的多行字符串

在es6之前，通過數(shù)組或字符串拼接的方法來創(chuàng)建多行字符串，es6中只需要在代碼中直接換行，換行也改變length屬性值。同時(shí)再反撇號中所有的空格符都屬于字符串的一部分。

let message = `Multiline
string`;
console.log(message);
console.log(message.length);  //16=6+9+1

2.3 字符串占位符

在一個(gè)模板字面量中，你可以把任何合法的JavaScript表達(dá)式嵌入到占位符中并將其作為字符串的一部分輸出到結(jié)果中。

占位符通常由${}組成，中間可包含任何JavaScript表達(dá)式。模板字面量本身也是JavaScript表達(dá)式，因此在一個(gè)模板字面量里面可以嵌入另外一個(gè)模板字面量。

let name = "sarah";
let message = `my${`name is${name}.`}`;
console.log(message);//my name is sarah.

message是一個(gè)模板字面量，里面又包含了name is${name}.這個(gè)模板字面量。

總結(jié)

以上所述是小編給大家介紹的當(dāng)ES6遇上字符串和正則表達(dá)式，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！