ES6入門之字串的擴充套件

故事膠片發表於2019-04-19

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基礎教程

相關文章