ES6-字符串的擴展的學習筆記

1. 字符的 Unicode 表示法

JavaScript 容許採用\uxxxx形式表示一個字符，其中xxxx表示字符的 Unicode 碼點。可是，這種表示法只限於碼點在\u0000~\uFFFF之間的字符。（僅限於一個字符兩個字節）

對於一個字符由四個字節表示的：ES6 對這一點作出了改進，只要將碼點放入大括號，就能正確解讀該字符。

如："\u{20BB7}" // "𠮷"

"\u{41}\u{42}\u{43}" // "ABC"

有了這種表示法以後，JavaScript 共有 6 種方法能夠表示一個字符。

'\z' === 'z'  // true '\172' === 'z' // true '\x7A' === 'z' // true '\u007A' === 'z' // true '\u{7A}' === 'z' // true

2. codePointAt() 

JavaScript 內部，字符以 UTF-16 的格式儲存，每一個字符固定爲2個字節。對於那些須要4個字節儲存的字符（Unicode 碼點大於0xFFFF的字符），JavaScript 會認爲它們是兩個字符。

 

ES6 提供了codePointAt方法，可以正確處理 4 個字節儲存的字符，返回一個字符的碼點。

let s = '𠮷a'; s.codePointAt(0) // 134071 s.codePointAt(1) // 57271 s.codePointAt(2) // 97

方法是測試一個字符由兩個字節仍是由四個字節組成的最簡單方法。let s = '𠮷a'; for (let ch of s) { console.log(ch.codePointAt(0).toString(16)); }codePointAt

function is32Bit(c) { return c.codePointAt(0) > 0xFFFF; } is32Bit("𠮷") // true is32Bit("a") // false

3.　String.fromCodePoint() 

ES6 提供了String.fromCodePoint方法，能夠識別大於0xFFFF的字符，彌補了String.fromCharCode方法的不足。在做用上，正好與codePointAt方法相反。

String.fromCodePoint(0x20BB7) // "𠮷" String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true 

上面代碼中，若是String.fromCodePoint方法有多個參數，則它們會被合併成一個字符串返回。

注意，fromCodePoint方法定義在String對象上，而codePointAt方法定義在字符串的實例對象上。

 

4.　at() 

識別unicode碼點大於oxFFFF的，單字符由四個字節組成的

'abc'.charAt(0) // "a" '𠮷'.charAt(0) // "\uD842"

'abc'.at(0) // "a" '𠮷'.at(0) // "𠮷"

5.　　normalize() 

ES6 提供字符串實例的normalize()方法，用來將字符的不一樣表示方法統一爲一樣的形式，這稱爲 Unicode 正規化。

判斷是不是同一個字符（4字節組成）。


'\u01D1'.normalize() === '\u004F\u030C'.normalize()

6. ES6 又提供了三種新方法。之前JavaScript 只有indexOf方法

• includes()：返回布爾值，表示是否找到了參數字符串。
• startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
• endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。

7. 方法返回一個新字符串，表示將原字符串重複次。repeatn

repeat方法返回一個新字符串，表示將原字符串重複n次。

'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // "" 

參數若是是小數，會被取整。

'na'.repeat(2.9) // "nana" 

若是repeat的參數是負數或者Infinity，會報錯。

'na'.repeat(Infinity) // RangeError 'na'.repeat(-1) // RangeError

可是，若是參數是 0 到-1 之間的小數，則等同於 0，這是由於會先進行取整運算。0 到-1 之間的小數，取整之後等於-0，repeat視同爲 0。

'na'.repeat(-0.9) // "" 

參數NaN等同於 0。

'na'.repeat(NaN) // "" 

若是repeat的參數是字符串，則會先轉換成數字。

'na'.repeat('na') // "" 'na'.repeat('3') // "nanana"

可是，若是參數是 0 到-1 之間的小數，則等同於 0，這是由於會先進行取整運算。0 到-1 之間的小數，取整之後等於-0，repeat視同爲 0。

'na'.repeat(-0.9) // "" 

參數NaN等同於 0。

'na'.repeat(NaN) // "" 

若是repeat的參數是字符串，則會先轉換成數字。

'na'.repeat('na') // "" 'na'.repeat('3') // "nanana"

10. padStart()，padEnd() 

ES2017 引入了字符串補全長度的功能。若是某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。

'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'

若是原字符串的長度，等於或大於指定的最小長度，則返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx' 'xxx'.padEnd(2, 'ab') // 'xxx' 

若是用來補全的字符串與原字符串，二者的長度之和超過了指定的最小長度，則會截去超出位數的補全字符串。

'abc'.padStart(10, '0123456789') // '0123456abc' 

若是省略第二個參數，默認使用空格補全長度。

'x'.padStart(4) // ' x' 'x'.padEnd(4) // 'x ' 

padStart的常見用途是爲數值補全指定位數。下面代碼生成 10 位的數值字符串。

'1'.padStart(10, '0') // "0000000001" '12'.padStart(10, '0') // "0000000012" '123456'.padStart(10, '0') // "0000123456" 

另外一個用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

11. 模板字符串

傳統的 JavaScript 語言，輸出模板一般是這樣寫的。

上面這種寫法至關繁瑣不方便，ES6 引入了模板字符串解決這個問題。

$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' );

模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

$('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `);

上面代碼中的模板字符串，都是用反引號表示。若是在模板字符串中須要使用反引號，則前面要用反斜槓轉義。// 普通字符串 `In JavaScript '\n' is a line-feed.`  // 多行字符串 `In JavaScript this is not legal.` console.log(`string text line 1 string text line 2`);  // 字符串中嵌入變量 let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`

let greeting = `\`Yo\` World!`;

若是使用模板字符串表示多行字符串，全部的空格和縮進都會被保留在輸出之中。

$('#list').html(` <ul> <li>first</li> <li>second</li> </ul> `); 

上面代碼中，全部模板字符串的空格和換行，都是被保留的，好比<ul>標籤前面會有一個換行。若是你不想要這個換行，可使用trim方法消除它。

模板字符串中嵌入變量，須要將變量名寫在之中。

$('#list').html(` <ul> <li>first</li> <li>second</li> </ul> `.trim());${}

大括號內部能夠放入任意的 JavaScript 表達式，能夠進行運算，以及引用對象屬性。

function authorize(user, action) { if (!user.hasPrivilege(action)) { throw new Error(  // 傳統寫法爲  // 'User '  // + user.name  // + ' is not authorized to do '  // + action  // + '.' `User ${user.name} is not authorized to do ${action}.`); } }

模板字符串之中還能調用函數。let x = 1; let y = 2; `${x} + ${y} = ${x + y}` // "1 + 2 = 3" `${x} + ${y * 2} = ${x + y * 2}` // "1 + 4 = 5" let obj = {x: 1, y: 2}; `${obj.x + obj.y}` // "3"

function fn() { return "Hello World"; } `foo ${fn()} bar` // foo Hello World bar 

 

若是大括號中的值不是字符串，將按照通常的規則轉爲字符串。好比，大括號中是一個對象，將默認調用對象的toString方法。

若是模板字符串中的變量沒有聲明，將報錯。

// 變量place沒有聲明 let msg = `Hello, ${place}`; // 報錯 

因爲模板字符串的大括號內部，就是執行 JavaScript 代碼，所以若是大括號內部是一個字符串，將會原樣輸出。

`Hello ${'World'}` // "Hello World"

模板字符串甚至還能嵌套。

const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join('')} </table> `;

若是須要引用模板字符串自己，在須要時執行，能夠像下面這樣寫。

// 寫法一 let str = 'return ' + '`Hello ${name}!`'; let func = new Function('name', str); func('Jack') // "Hello Jack!"  // 寫法二 let str = '(name) => `Hello ${name}!`'; let func = eval.call(null, str); func('Jack') // "Hello Jack!"

標籤模板

模板字符串的功能，不單單是上面這些。它能夠緊跟在一個函數名後面，該函數將被調用來處理這個模板字符串。這被稱爲「標籤模板」功能（tagged template）。

alert`123` // 等同於 alert(123) 

標籤模板其實不是模板，而是函數調用的一種特殊形式。「標籤」指的就是函數，緊跟在後面的模板字符串就是它的參數。

可是，若是模板字符裏面有變量，就不是簡單的調用了，而是會將模板字符串先處理成多個參數，再調用函數。

let a = 5; let b = 10; tag`Hello ${ a + b } world ${ a * b }`; // 等同於 tag(['Hello ', ' world ', ''], 15, 50); 

上面代碼中，模板字符串前面有一個標識名tag，它是一個函數。整個表達式的返回值，就是tag函數處理模板字符串後的返回值。

函數tag依次會接收到多個參數。

 

 

「標籤模板」的一個重要應用，就是過濾 HTML 字符串，防止用戶輸入惡意內容。

 

標籤模板的另外一個應用，就是多語言轉換（國際化處理）。

 

14.　String.raw()

ES6 還爲原生的 String 對象，提供了一個raw方法。

String.raw方法，每每用來充當模板字符串的處理函數，返回一個斜槓都被轉義（即斜槓前面再加一個斜槓）的字符串，對應於替換變量後的模板字符串。

String.raw`Hi\n${2+3}!`; // 返回 "Hi\\n5!" String.raw`Hi\u000A!`; // 返回 "Hi\\u000A!" 

若是原字符串的斜槓已經轉義，那麼String.raw會進行再次轉義。

String.raw`Hi\\n` // 返回 "Hi\\\\n"