字符串的擴展 · 前端筆記

[TOC] ## Unicode表示法 JavaScript允許用\uxxx表示字符，但只限于\u0000到\uFFFF之間的字符，超出這個范圍的必須用雙字節的形式表示。 ES6對這一點做出了改進，只要將碼點放入大括號就行。 ``` "\u{20BB7}" // "??" ``` 至此，JavaScrpt一共有6種方法可以表示一個字符 ``` '\z' === 'z' '\172' === 'z' '\x7A' === 'z' '\u007A' === 'z' '\u{7A}' === 'z' ``` ## codePointAt Javascript中字符串以UTF-16的格式存儲，每個字符為2個字節。對于需要4個字節存儲的字符（Unicode碼點大于0xFFFF）JavaScript會認為它們是2個字符。 ``` var s = '??' s.length // 2 s.charAt (0) // '' s.charAt (1) // '' s.charCodeAt (1) // 55362 s.charCodeAt (1) // 57271 ``` 漢字“??”的碼點為0x20BB7 ，UTF-16的編碼為0xD842 0xDFB7（十進制為55326 57271），需要4個字節存儲。這種字符JavaScript不能正確識別。 ES6提供了codePointAt方法，返回一個字符的碼點。 ``` var s = '?? a' s.charPointAt (0) // 134071 s.charPointAt (1) // 57271 s.charCodeAt(2) // 97 ``` 測試一個字符是2個字節還是4個字節組成 ``` function is32Bit(c) { return c.codePointAt(0) > 0xFFFF } ``` ## String.fromCodePoint ES5提供了String.fromCodeCharCode方法，用于從碼點返回對應字符串，但不能識別32位的UTF-16字符。 E66提供的String.fromCodePoint方法彌補了它的不足。 ``` String.fromCodePoint(0x20BB7) // '??' ``` ## 字符串的遍歷接口 ES6位字符串提供了添加了遍歷器接口，使字符串可以由for ... of 循環遍歷。 ``` for (let codePoint of 'foo') { console.log(codePoint) } // 'f' // 'o' // 'o' ``` 除了遍歷字符串，這個遍歷器最大的優點是可以識別大于0xFFFF的碼點，傳統的for循環無法識別。 ``` var text = String.fromCodePoint(0x2BB7) for(var i = 0; i < text.length; i++) { console.log(text[i]) } // ' ' // ' ' ``` ## at ES5對字符串提供了charAt方法，返回給定位置的字符該方法不能識別碼點大于0xFFFF的字符。 ES7位字符串提供實力提供了at方法可以識別Unicode編碼大于0xFFFF的字符。 ``` 'abc'.at(0) // 'a' '??'.at(0) // '??' ``` ## normailize 用來將字符串的不同表示方統一為同樣的形式，稱為Unicode正規化。 ## includes，startsWith，endsWith 以前JavaScript只有indexOf方法確定一個字符串是否包含在另一個字符串中。ES6又提供了3種方法。 includes：返回布爾值，表示是否找到參數字符串。 startsWith：返回布爾值，表示參數字符串是否在源字符串的頭部。 endsWith：返回布爾值，表示參數字符串是否在源字符串的尾部。 ``` var s = 'hello world' s.startsWith('hello') // true s.endsWith('d') // true s.includes('o') // true ``` 這三個方法都支持第2個參數，表示開始搜索的位置。endsWidth的行為與其他兩個方法不同，它針對前n個字符，其他兩個方法針對從第n個位置知道字符串結束的字符 ## repeat repeat方法返回一個新字符串，表示將原字符串重復n次。 ``` 'x'.repeat(3) // 'xxx' ``` ## padStart，padEnd ES7推出了字符串補全長度的功能。如果某個字符串未達到指定長度，padStart會在頭部補全，padEnd在尾部。它們分別接受兩個參數，第一個參數指定字符串的最小長度，第二個參數是用來補全的字符串。如果省略第二個參數，會用空格補全。 ``` 'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba' ``` ## 模板字符串模板字符串可以當做普通字符串、多行字符串或嵌入變量來使用，用反引號（\`）標識。如果使用模板字符串表示多行字符串，所以空格和縮進都會被保留。代碼中使用了反引號需要加反斜杠轉義。嵌入變量，需要將變量名放在${}中。 {}中可以放入任意JavaScript表達式，進行運算，引用對象屬性和調用函數。 `In Javascript this is not legal` var x = 1, y = 2 `${x} + ${y} = ${x+y}` var obj = {x:1, y:2} $(obj.x + obj.y) ## 標簽字符串模板字符串可與跟在一個函數后，這個函數將被用來處理這個模板字符串，被稱為標簽模板功能。整個表達式的返回值，就是tag函數處理模板字符串后的返回值。 tag函數的第一個參數是數組，它的成員是模板字符串哪些沒有變量替換的部分。其他參數是各個變量被替換的值。 var a = 5 var b = 2 function tag(s, v1, v2) { console.log(s[0]) console.log(s[1]) console.log(s[2]) console.log(v1) console.log(v2) } tag`Hello ${a + b} world ${a * b}` //Hello // world // //7 //10 ## String.raw String.raw方法往往用來充電字符串模板的處理函數，返回一個反斜杠（反斜線前再加一個反斜線）的字符串，對應于替換變量后的模板字符串。如果原字符串的反斜杠已轉義，String.raw不會做處理。 String.raw`Hi\n${2+3}` // "Hi\\n5"