ES6 字符串和正則的的擴展

1.字符串的擴展

(1)字符串的遍歷器接口  for ...of

for (let codePoint of "foo")
{ 
   console.log(codePoint);  
}
//"f"
//"o"
//"o"

(2)JSON.stringify() 的改造

根據標準,JSON數據必須是 UTF-8 編碼。但是現在的 JSON.stringify()方法可能返回不符合 UTF-8 標準的編碼

JSON.stringify()的問題在於,它可能返回 0xD800到0xDFFF之間的單個碼點

JSON.stringify('\u{D834}');  //"\uD834"

爲了確保返回的是合法的 UTF-8 字符,ES2019改變了JSON.stringify()的行爲。若遇到 0xD800到0xDFFF之間的單個碼點,或者不存在的配對形式,它會返回轉義字符串,留給應用自己決定下一步的處理。

JSON.stringify('\u{D834}');  //"\\uD834"
JSON.stringify('\uDF06\uD834');//"\\udf06\\ud834"

(3)模板字符串(template string)是增強版的字符串,用反引號(')標識。它可以當做普通字符串使用,也可以用來定義多行字符串,也可以嵌入變量。

//普通字符串
'I'm chinese.';

//多行字符串
'I'm chinese
 and I'm from hainan.
';

//字符串嵌入變量
let name = "JM",time = "today";
'hello ${name},how are you ${time}?';  //hello JM,how are you today?

(4)String.fromCodePoint():ES6 提供 String.fromCodePoint() 方法,可以識別大於 0xDFFF 的字符,彌補了String.fromCharCode() 的不足。

(5)String.raw():該方法返回一個斜槓都能被轉義的字符串(即斜槓前面再加一個字符串),往往用於模板字符串的處理方法。

String.raw'hi\n${2+3}';
//實際返回 "hi\\n5",顯示的是轉義後的結果"hi\n5"

如果原字符串的斜槓已經轉義,那麼 String.raw() 會進行再次轉義

String.raw'hi\\n';  //"hi\\\\n"

String.raw'hi\\n' === "hi\\\\n" ;  //true

(6)codePointAt():charAt() 無法讀取整個字符,charCodeAt() 只能返回前兩個字節和後兩個字節的值,而 codePointAt() 能夠處理四個字節儲存的字符,返回一個字符的碼點。對於兩個字節存儲的常規字符,codePointAt()返回的結果與 charCodeAt()相同

//例1  
var s = "吉";

s.length  //2
s.charAt(0) //''
s.charAt(1) //''
s.charCodeAt(0);//55362
s.charCodeAt(1);//57271

//例2
let s = "吉a";

s.codePonitAt(0); //55362
s.codePonitAt(1); //57271
s.codePointAt(2); //97

可以用 for ...of 循環或  ... 展開運算符解決 codePointAt() 的問題。

//for ...of
let s = "吉a";

for (let ch of s){
  console.log(ch.codePointAt(0).toString(16));//將codePointAt()返回的十進制轉換爲16進制
}
// 20bb7
// 61

//...
let arr = [...'吉a'];
arr.foreach(
  ch=>console.log(ch.codePointAt(0).toString(16));
);
// 20bb7
// 61

codePointAt() 是測試一個字符由兩個字節還是四個字節組成的最簡單的方法。

function is32Bit(c){
   return c.codePointAt(0) > 0xFFFF
}

is32Bit('吉');//true
is32Bit('a');//false

(7)includes(),startsWith(),endsWith():javaScripts只有 indexOf()可以用來確定一個字符串是否包含在另一個字符串中,ES6又提供了三種方法

--includes():返回布爾值,表示是否找到了字符串

--startsWith():放回布爾值,表示參數字符串是否在原字符串的頭部

--endsWith():返回布爾值,表示參數字符串是否在原字符串的尾部

這三個方法都可以有第二個參數,表示開始搜索的位置

let s = "hello world";

s.includes("hello",6)//false
s.startsWith("world",6);//true
s.endsWith("hello",5);//true

(8)repeat(n):返回一個新字符串,表示將原字符串重複 n 次。若 n 是小數,會被取整,若是小於或等於-1的負數或是 Infinity,則會報錯。若參數是 NAN,則等同於0;若是字符串,則會先轉換成數字,若轉換失敗,則爲0.

"na".repeat(2);       //"nana"
"na".repeat(-0.2);    //""  被取整後爲0
"na".repeat(-2);      //RangeError
"na".repeat(Infinity);//RangeError

(9)padStart(),padEnd():ES2017引入了字符串補全長度的功能。如果某個字符串不夠指定長度,會在頭部或尾部自動補全。padStart() 用於頭部補全padEnd() 用於尾部補全

這兩個函數共接受兩個參數,第一個參數是字符串補全生效的最大長度,第二個參數是用來補全的字符串(若省略,則默認使用空格進行補全)

"xa".padStart(4,"ab");  //"abxa"
"xa".padStart(3,"ab");  //"axa"

(10)trimStart(),trimEnd():trimStart()消除頭部空格。trimEnd()消除尾部空格。除了空格鍵,這兩個方法對字符串頭部和尾部的 tab 鍵,換行符等不可見的空白符號也有效。 trimLeft() 和 trimRight() 分別是 startsWith() 和 endsWith() 的別名

(11)matchAll() :返回正則表達式在當前字符串的所有匹配。

2.正則的擴展

(1)RegExp 構造函數。

在 ES6 中,若 RegExp() 的第一個參數是正則表達式,可以用第二個參數指定修飾符(第二個修飾修將取代第一個參數中的修飾符)。

new RegExp(/abc/ig,'i').flags;

(2)字符串的正則方法

match(),replace(),search(),split()

(3)y 修飾符與 g 修飾符功能差不多,但是 g 修飾符匹配不按位置,只要字符串裏邊能匹配到。而 y 字符串時要從第一個位置開始匹配。

(4)sticky 屬性,表示是否設置了 y 修飾符。

(5)source 屬性(ES5中)返回正則表達式的正文。flags 屬性,返回正則表達式的修飾符。

(6)引入 s 修飾符  . 可以匹配任意單個修飾符。這被稱爲 dotAll 模式,即 dot 表示一切字符。

(7)\p{...} :表示允許正則表達式匹配符合 Unicode 某種屬性的字符。

\p{Unicode屬性名 = Unicode屬性值},屬性名或屬性值可省略。

\P{...} 是 \p{...}的反向操作,即匹配不滿足條件的字符這兩種操作都要加上 u 操作符(因爲是要符合 Unicode 的某種屬性),否則會報錯。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章