ES6入門之字符串的擴展

1. 字符的 Unicode 表示法

Javascript 中容許採用 \uxxxx的形式表示一個字符，其中xxxx表示字符的Unicode碼點。以下

"\u0061"
複製代碼

這種 表示有區間 只能在 0000 ~ FFFF之間，若是超出則須要用雙字節的的形式表示

"\u20BB7\uDFB1"
複製代碼

在ES6中，對字符串的寫法作出了改變。改成將碼點放入大括號中，就能正確讀取該字符，以下：

"\u{20BB7}" // 吉
複製代碼

2. codePointAt()

Javascript內部，字符以 UTF-16的格式存儲，每一個字符固定爲2個字節。對於須要4個字節儲存的字符，JavaScript會認爲它們是兩個字符。以下：

var s = "吉"

s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271
複製代碼

上面代碼中漢字吉 須要4個字節存儲，可是JavaScript不能正確處理，字符串長度誤判爲2，並且charAt 方法沒法讀取字符，charCodeAt 只能返回前面兩個字節和後面兩個字節的值，ES6 提供了 codePointAt 方法可以正確處理4個字節存儲的字符，返回一個字符的碼點，以下：

let s = '吉a'；

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271
複製代碼

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

3. String.fromCodePoint()

ES5 提供了 String.fromCharCode 方法 用於從碼點返回對應字符，可是不能識別32位的UTR-16字符，ES6提供了 Sring.fromCodePoint() 方法 能夠識別大於32位的。若是有多個參數則將合併。以下：

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

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

4. 字符串的遍歷器接口

ES6爲字符串添加了遍歷器接口，字符串能夠被for of 遍歷

5. normalize()

用來將字符的不一樣表示方法統一爲一樣的形式，

6. includes(), startsWith(), endsWith()

傳統上，JavaScript 只有indexOf方法，能夠用來肯定一個字符串是否包含在另外一個字符串中。ES6 又提供了三種新方法。

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

7. repeat()

用來返回一個新字符串，表示將原字符串重複N次

'x'.repeat(2) // 'xx'
'cx'.repeat(3) // 'cxcxcx'

參數NaN等同於 0。
'na'.repeat(NaN) // ""

若是repeat的參數是字符串，則會先轉換成數字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
複製代碼

8. padStart()，padEnd()

用於字符串的補全，接受兩個參數，第一個字符串補全生效的最大長度，第二個是用來補全的字符串，以下：

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

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

注意：
若是原字符串的長度等於或大於最大長度，則補全不生效，返回原字符串

若是補全字符串和原字符串，二者長度超過最大長度，則截取超出位數的補全字符串
複製代碼

9. matchAll()

matchAll方法返回一個正則表達式在當前字符串的全部匹配

10. 模板字符串

用來簡化以前模板的寫法，寫法以下：

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);
上面這種寫法至關繁瑣不方便，ES6 引入了模板字符串解決這個問題。

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



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

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"
複製代碼

11. 模板編譯

使用<%...%>放置 JavaScript 代碼，使用<%= ... %>輸出 JavaScript 表達式，以下：

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;
複製代碼

12. 標籤模板

模板字符串能夠跟在一個函數名後面，該函數將被調用來處理這個模板字符串，這被稱爲 標籤模板。 以下：

alert(123)
alert`123`
複製代碼

標籤模板其實不是模板，而是函數的一種特殊形式。「標籤」就是函數，跟在後面的模板字符串就變成了它的參數。可是若是模板字符串裏面有變量，就會將模板字符串先處理成多個參數，再調用函數。以下：

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同於
tag(['Hello ', ' world ', ''], 15, 50);
複製代碼

13. String.raw()

ES6 爲原生 String 對象，提供了一個raw方法。用來充當模板字符串的處理函數，返回一個斜槓都被轉義的字符串，對應於替換變量後的模板字符串。以下：

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

String.raw`Hi\u000A!`;
// 返回 "Hi\\u000A!"
複製代碼

14. 模板字符串的限制

模板字符串默認會將字符串轉義，致使沒法嵌入其餘語言。爲了解決這個問題，ES2018 放鬆了對標籤模板裏面的字符串轉義的限制。若是遇到不合法的字符串轉義，就返回undefined，而不是報錯，而且從raw屬性上面能夠獲得原始字符串。

歡迎關注 公衆號【小夭同窗】

ES6入門系列

ES6入門之let、cont

ES6入門之變量的解構賦值

Git教程

前端Git基礎教程