歡迎光臨
每天分享高質量文章

ECMAScript 6 中的 String 新特性

這篇部落格介紹了ECMAScript 6(ES6)中字串的新特性。

Unicode 程式碼點轉義

Unicode 字元(程式碼點/code point)21位長 [2]。JavaScript 字串(大約)16位字元序列,編碼為utf-16。因此,超出第一個16位程式碼點範圍(基本的多語種窗格,BMP)的程式碼點是由兩個JavaScript字元表示。直到現在,如果你想透過數字指定這樣的程式碼點,你需要兩個所謂的Unicode轉義。作為一個例子,下麵的陳述句在大部分控制檯輸出一個rocket(程式碼點0x1f680):

console.log(‘uD83DuDE80’);

在ECMAScript 6中,有一種新的Unicode轉義,允許您指定任何程式碼點:

console.log(‘u{1F680}’);

字串插值,多行字串和原始字串字面值

模板字串 [3]有三個有趣的特性。

首先,模板字串支援字串插值:

let first = ‘Jane’;

let last = ‘Doe’;

console.log(`Hello ${first} ${last}!`);

// Hello Jane Doe!

第二,模板字串可以包含多行:

let multiLine = `

This is

a string

with multiple

lines`;

第三,如果你用 String.raw 標記字串字首,則模板字串是“原始“的,反斜槓將不是特殊字元,轉義符比如 n並不被解釋:

let raw = String.raw`Not a newline: n`;

console.log(raw === ‘Not a newline: n’);

// true

遍歷字串

字串可以迭代[4],這意味著您可以使用for-of來迭代他們:

for (let ch of ‘abc’) {

console.log(ch);

}

// Output:

// a

// b

// c

您可以使用 spread 運運算元 (…) 將字串轉化為陣列:

let chars = […’abc’];

// [‘a’, ‘b’, ‘c’]

處理Unicode程式碼點

字串迭代器從程式碼點的邊界分割字串,這意味著它傳回的字串包含一個或兩個字元:

for (let ch of ‘xuD83DuDE80y’) {

console.log(ch.length);

}

// Output:

// 1

// 2

// 1

下麵是一個快速計算一個字串的 Unicode 程式碼點長度的方法:

>[…’xuD83DuDE80y’].length

3

它還幫助反轉包含 non-BMP 程式碼點的字串:

let str = ‘x\uD83D\uDE80y’;

// ES5: \uD83D\uDE80 are (incorrectly) reversed

console.log(str.split(”).reverse().join(”));

// ‘y\uDE80\uD83Dx’

// ES6: order of \uD83D\uDE80 is preserved

console.log([…str].reverse().join(”));

// ‘y\uD83D\uDE80x’

新方法 codePointAt() 傳回 [字串給定索引的程式碼點的數值]:程式碼點的數值

let str = ‘xuD83DuDE80y’;

console.log(str.codePointAt(0).toString(16));

// 78

console.log(str.codePointAt(1).toString(16));

// 1f680

console.log(str.codePointAt(3).toString(16));

// 79

該方法在迭代字串時工作得很好:

for (let ch of ‘xuD83DuDE80y’) {

console.log(ch.codePointAt(0).toString(16));

}

// Output:

// 78

// 1f680

// 79

codePointAt() 的反方法是 String.fromCodePoint():

> String.fromCodePoint(0x78, 0x1f680, 0x79) === ‘x\uD83D\uDE80y’

true

檢查包含和重覆字串

檢查一個字串是否在另一個字串中存在,有 3 種方法:

> ‘hello’.startsWith(‘hell’)

true

> ‘hello’.endsWith(‘ello’)

true

> ‘hello’.includes(‘ell’)

true

每一個方法都有一個可選的第二個引數,它指定搜尋字串的開始或者結束位置:

> ‘hello’.startsWith(‘ello’, 1)

true

> ‘hello’.endsWith(‘hell’, 4)

true

> ‘hello’.includes(‘ell’, 1)

true

> ‘hello’.includes(‘ell’, 2)

false

repeat()方法重覆字串:

> ‘doo ‘.repeat(3)

‘doo doo doo ‘

所有的新方法

模板字串:

  • 模板字串標記為“raw”的內容(反斜槓不轉義)。

Unicode 和程式碼點:

  • 將表示Unicode程式碼點的數值轉化為一個字串。

  • 傳回開始位置為pos的程式碼點的數值(包括一個或兩個JavaScript“字元”)。

  • 程式碼點的不同的組合可能看起來是一樣的。 Unicode normalization 把它們都轉換成相同的值,即所謂的標準表示(canonical representation)。幫助比較與搜尋字串。‘NFC’格式被推薦用於普通文字。

查詢字串:

  • 字串以searchString開始嗎 position引數允許您指定的字串檢查的開始位置。

  • 字串以searchString結束嗎 endPosition引數允許您指定的字串檢查的結束位置。

  • 字串包含searchString嗎 position允許您指定字串搜尋的開始位置。

重覆字串:

傳回重覆count次後的字串。

進一步閱讀

  1. Using ECMAScript 6 today [an early draft of my book on ECMAScript 6]

  2. Chapter 24, “Unicode and JavaScript” of “Speaking JavaScript”; includes an introduction to Unicode.

  3. Template strings: embedded DSLs in ECMAScript 6

  4. Iterators and generators in ECMAScript 6

原文出處:www.2ality.com

譯文出處:伯樂線上 – cucr

連結:http://web.jobbole.com/82481


贊(0)

分享創造快樂