深入理解ES6--2.字串與正規表示式

你聽___發表於2018-05-06
字串

深入理解ES6--2.字串與正規表示式

主要知識點：新增的字串處理方法、模板字面量以及正規表示式上的改動

字串與正規表示式的知識點

1. 字串處理方法

codePointAt()方法

ES6 為全面支援 UTF-16 而新增的方法之一是 codePointAt() ，它可以在給定字串中按位 置提取 Unicode 程式碼點。該方法接受的是碼元位置而非字元位置，並返回一個整數值。

String.fromCodePoint()方法

可以使用codePointAt() 來提取字串內中某個字元的程式碼點，也可以藉助 String.fromCodePoint()用給定的程式碼點來產生包含單個字元的字串

normalize()方法

Unicode 另一個有趣之處是，不同的字元在排序或其它一些比較操作中可能會被認為是相同 的。有兩種方式可以定義這種關聯性：第一種是規範相等性（canonical equivalence ） ， 意味著兩個程式碼點序列在所有方面都被認為是可互換的。例如，兩個字元的組合可以按規範 等同於另一個字元。第二種關聯性是相容性（compatibility ） ，兩個相容的程式碼點序列看起 來有差別，但在特定條件下可互換使用。

ES6 給字串提供了** normalize()** 方法，以支援 Unicode 標準形式。因此，在比較字元時，可以先將字元用同一種標準化方法，讓它們標準化，再進行比較，例如，比較字元陣列中的大小：

let compare = function(values=[]){
	values.sort((first,second)=>{
		let firstNormalized = first.normalize();
		let secondNormalized = second.normalize();

		if (firstNormalized < secondNormalized) {
			return -1;
		} else if (firstNormalized === secondNormalized) {
			return 0;
		} else {
			return 1;
		}
	})

}

let arr = ['a','z','c','g'];
compare(arr);
console.log(arr);//["a", "c", "g", "z"]
複製程式碼

識別子字串的方法

為了識別字串是否存在於其他字串中，ES6提供了相應的方法來滿足這類需求：

  • includes()方法：在給定文字存在於字串中的任意位置時會返回 true，否則會返回 false；
  • startsWith() 方法：在給定文字出現在字串起始處時返回 true ，否則返回 false ；
  • endsWith() 方法：在給定文字出現在字串結尾處時返回 true ，否則返回 false 。

每個方法都接受兩個引數：需要搜尋的文字，以及可選的搜尋起始位置索引。當提供了第二 個引數時， includes() 與 startsWith()方法會從該索引位置開始嘗試匹配；當第二個引數未提供時， includes() 與 startsWith() 方法會從字串起始處開始查詢，而 endsWith()方法則從尾部減去第二個引數後的位置作為起始位置。

repeat()方法

ES6 還為字串新增了一個 repeat() 方法，它接受一個引數作為字串的重複次數，返回一個將初始字串重複指定次數的新字串。例如：

//repeat()方法

console.log('x'.repeat(3)); //xxx
console.log('hello world'.repeat(2)); //hello worldhello world
複製程式碼

2. 模板字面量

基本語法

模板字面量的最簡單語法，是使用反引號來包裹普通字串，而不是用雙引號或單引號，例如：

//模板字面量

let  message = `hello world`;
console.log(message); //hello world
console.log(typeof message); //string
console.log(message.length); //1
複製程式碼

若想字串中包含反引號，可以使用反斜槓（\）進行轉義即可：

let  message = `\`hello world\``;
console.log(message); //`hello world`
複製程式碼

多行字串

使用模板字面量可以輕鬆建立多行字串，例如：

let message = `hello

world`;
console.log(message);
輸出：
hello

		world
複製程式碼

替換位

**替換位可以嵌入到模板字面量中，替換位最終可以轉換為字串的一部分輸出。替換位可以是任意的js表示式。**替換位的語法採用 ${} 表示。

例如，替換位為變數：

let msg = 'hello';
let message = `${msg} world`;
console.log(message); //hello world
複製程式碼

替換位不僅僅可以是簡單的變數，還可以嵌入計算表示式、函式呼叫等，甚至還可以將模板字面量作為替換位嵌入到另一個模板字面量中。

3. 模板標籤

一個模板標籤（template tag ） 能對模板字面量進行轉換並返回最終的字串值，標籤在模板的起始處被指定，即在第一個 ` 之前。例如：

let message = tag`Hello world`;
複製程式碼

tag 就是會被應用到 Hello world 模板字面量上的模板標籤。

定義標籤

一個標籤（tag ） 僅是一個函式，它被呼叫時接收需要處理的模板字面量資料。標籤所接收的資料被劃分為獨立片段，並且必須將它們組合起來以建立結果。第一個引數是個陣列，包含被 JS 解釋過的字面量字串，隨後的引數是每個替換位的解釋值。

標籤函式的引數一般定義為剩餘引數形式，以便更容易處理資料，如下：

function tag(literals, ...substitutions) {
// 返回一個字串
}
複製程式碼

使用模板字面量中的原始值

模板標籤也能訪問字串的原始資訊，主要指的是可以訪問字元在轉義之前的形式。獲取原始字串值的最簡單方式是使用內建的 String.raw() 標籤。例如：

let message1 = `Multiline\nstring`,
message2 = String.raw`Multiline\nstring`;
console.log(message1); // "Multiline
					   // string"
console.log(message2); // "Multiline\nstring"
複製程式碼

4. 正規表示式的改動

  1. 正規表示式u標識：你可以使用正規表示式來完成字串的很多通用操作。但要記住，正規表示式假定單個字元使用一個 16 位的碼元來表示。為了解決這個問題， ES6 為正規表示式定義了用於處理Unicode 的 u 標誌。當一個正規表示式設定了 u標誌時，它的工作模式將切換到針對字元，而不是針對碼元。

  2. 正則表達的y標誌： y 標誌影響正規表示式搜尋時的粘連（ sticky ） 屬性，它表示從正規表示式的 lastIndex 屬性值的位置開始檢索字串中的匹配字元。如果在該位置沒有匹配成功，那麼正規表示式將停止檢索；

  3. 複製正規表示式：使用RegExp構造器時允許使用第二個引數，並且讓它覆蓋第一個引數中的標誌；

  4. flag屬性：ES6 新增了 flags 屬性用於配合 source 屬性，讓標誌的獲取變得更容易。例如：

     var re = /ab/g;
 console.log(re.source); // ab
 console.log(re.flags); // g
複製程式碼

    本例查詢了 re 的所有標誌並將其列印到控制檯，所用的程式碼量要比 toString() 方式少得多。同時使用 source 和 flags 允許你直接提取正規表示式的組成部分，而不必將正規表示式轉換為字串。

相關文章