ES6字符串和正則表達式的用法

本篇內容主要講解“ES6字符串和正則表達式的用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“ES6字符串和正則表達式的用法”吧!

字符串

1.更好的Unicode支持

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

在es6出現之前，js字符串一直基于16位字符編碼進行構建。每16位序列是一個編碼單元，代表一個字符，Unicode0引入擴展字符集，16位字符編碼將不再包含任何字符。編碼規則也因此變更。

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

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

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

1.1codePointAt（0）方法

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

因此可以用此方法判斷一個字符占用編碼單元的數量

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

1.2 String.fromCodePoint（）方法

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

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

1.3normalize()方法

在比較字符或者進行排序的時候，可能出現等價的情況，然而等價卻存在兩種情況

• 規范的等效是無論從哪個角度來看，兩個序列的碼位都是沒有區別的
  

• 兼容的碼位序列看起來不同，但是在特定的情況下可以交換使用。 但是在嚴格模式下不是等效的，除非通過某些方法把這種等效關系標準化
  

normalize()方法提供Unicode的標準化形式，，這個方法可以接受一個可選的字符串參數。Unicode標準化形式有四種

以標準等價方式分解，然后以標準等價方式重組（“NFC”），默認值選項

• 以標準等價方式分解（“NFD”）

• 以兼容等價方式分解（“NFKC”）

• 以兼容方式分解，然后以標準等價方式重組

1.4 正則表達式u修飾符

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

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

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

檢測是否支持u修飾符

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

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

2.其他字符串的變更

2.1字符串中的字串識別

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

• startWith()方法，在字符串起始部分檢測指定文本返回true，否則返回false。

• incledes()方法，如果在字符串中檢測到指定文本返回true，否則返回false。

• endWith()方法，顧名思義在末尾檢測，用法與上面一致。

上面三個方法接受兩個參數，第1個參數是指定要搜索的文本是一個字符。第2個是開始搜索位置的索引值是一個數字。不指定第二個參數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個結果依次為：true true true  false true false  true true false
console.log(mes.endWith("o",8));會從第7位第二個o開始匹配。索引值-要搜索文本的長度=8-1

2.2 repeat()方法

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

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

我是2條分割線，嘎嘎嘎

正則表達式

1.其他正則表達式的變更

1.1正則表達式y修飾符

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

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]);  //拋出錯誤

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

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

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

只有調用正則表達式對象的exec（）和test（）這些方法時才會設計lastIndex屬性，如調用字符串的方法natch()就不會觸發粘滯行為。

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

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

1.2正則表達式的復制

在es5中，可以給正則表達式的構造函數傳遞正則表達式作為參數來復制這個正則表達式。但事實第一個參數為正則表達式的時候不能用第二個參數，es6中修改了這個行為，第二個參數可以是修飾符。

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屬性會返回所有應用于當前正則表達式的修飾符

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

2.模板字面量

2.1基礎語法

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

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

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

結果是 hello!

2.2簡化的多行字符串

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

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

2.3 字符串占位符

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

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

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

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

到此，相信大家對“ES6字符串和正則表達式的用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！