es6学习笔记-字符串的扩展_v1.0_byKL
es6學習筆記-字符串的擴展_v1.0
字符的Unicode表示法
JavaScript 允許使用uxxxx的形式表示一個字符，但在 ES6 之前，單個碼點僅支持u0000到uFFFF，超出該范圍的必須用雙字節形式表示，否則會解析錯誤。ES6對這一點做出了改進，只要將碼點放入大括號，就能正確解讀該字符，不受限于4位。例如下面的寫法就是合法的，能夠被正確解析：
//在es6后才可以,在es5的時候不行 "\u{20BB7}" // "?"codePointAt()
JavaScript內部，字符以UTF-16的格式儲存，每個字符固定為2個字節。
對于那些需要4個字節儲存的字符（Unicode碼點大于0xFFFF的字符），JavaScript會認為它們是兩個字符。
codePointAt方法，能夠正確處理4個字節儲存的字符，返回一個字符的碼點。
codePointAt方法會正確返回32位的UTF-16字符的碼點。
注意例子是?,漢字“?”（注意，這個字不是”吉祥“的”吉“）的碼點是0x20BB7，UTF-16編碼為0xD842 0xDFB7（十進制為55362 57271），需要4個字節儲存。
var s = '?a';console.log(s.length); //3,?使用了2個字節來存儲,a使用了一個字節存儲 console.log(s.codePointAt(0)); // 134071 console.log(s.codePointAt(1)); // 57271 console.log(s.codePointAt(2)); // 97codePointAt方法是測試一個字符由兩個字節還是由四個字節組成的最簡單方法。
function is32Bit(c) {//超過2個字節組成的字符串的第一位碼點都是大于0xFFFFreturn c.codePointAt(0) > 0xFFFF; }console.log(is32Bit("?")) // true console.log(is32Bit("a")) // falseES6 提供了 codePointAt()，能夠正確處理4個字節存儲的字符，返回一個字符的碼點。
但需要注意的是，這并沒有改變 JavaScript 將2個字節視為1個字符的事實，只是自動識別出了這是個4字節的字符并返回了正確的碼點而已
對于單個4字節的字符(例如'?')來說，charPointAt(0)返回完整字符的十進制碼點，charPointAt(1)返回這個字符的后2個字節的十進制碼點，效果等同于charCodeAt(1)。
參考
編碼格式的檢測:
專家給每種格式和字節序規定了一些特殊的編碼，這些編碼在unicode 中是沒有使用的，所以不用擔心會沖突。這個叫做BOM（Byte Order Mark）頭。意思是字節序標志頭。通過它基本能確定編碼格式和字節序。 UTF編碼 ║ Byte Order Mark UTF-8 ║ EF BB BF UTF-16LE ║ FF FE UTF-16BE ║ FE FF UTF-32LE ║ FF FE 00 00 UTF-32BE ║ 00 00 FE FF 所以通過檢測文件前面的BOM頭，基本能確定編碼格式和字節序。但是這個BOM頭只是建議添加，不是強制的，所以不少軟件和系統沒有添加這個BOM頭（所以有些軟件格式中有帶BOM頭和NoBOM頭的選擇)UTF-16長度相對固定，只要不處理大于U200000范圍的字符，每個Unicode代碼點使用16位即2字節表示，超出部分使用兩個UTF-16即4字節表示。按照高低位字節順序，又分為UTF-16BE/UTF-16LE。參考
String.fromCodePoint()
String.fromCodePoint()就是和codePointAt()做相反的操作了。例如：
console.log(String.fromCodePoint(134071)); // "?"字符串的遍歷器接口
這個遍歷器最大的優點是可以識別大于0xFFFF的碼點
for (let codePoint of 'foo') {console.log(codePoint) } // "f" // "o" // "o"//能識別大于0xFFFF的碼點 var text = String.fromCodePoint(0x20BB7);//用for不行 for (let i = 0; i < text.length; i++) {console.log(text[i]); } // " " // " "//用遍歷器可以 for (let i of text) {console.log(i); } // "?"includes(), startsWith(), endsWith()
傳統上，JavaScript只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6又提供了三種新方法。
includes()：返回布爾值，表示是否找到了參數字符串。
startsWith()：返回布爾值，表示參數字符串是否在源字符串的頭部。
endsWith()：返回布爾值，表示參數字符串是否在源字符串的尾部。
repeat()
repeat方法返回一個新字符串，表示將原字符串重復n次。
console.log('x'.repeat(3)) // "xxx" console.log('na'.repeat(0)) // "" console.log('na'.repeat(2.9)) // "nana" 'na'.repeat(Infinity)// RangeError 'na'.repeat(-1)// RangeErrorpadStart()，padEnd()
ES2017(es6是es2016) 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用于頭部補全，padEnd()用于尾部補全。
padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串。
//主要用于補全 console.log('1'.padStart(10, '0')); // "0000000001" console.log('12'.padStart(10, '0'))// "0000000012" console.log('123456'.padStart(10, '0')) // "0000123456"node 6.95還不支持,現在是用babel-node來測試的
模板字符串
使用反引號,反引號代替以前的單引號或者雙引號
使用大括號支持任意的JavaScript表達式，可以進行運算，以及引用對象屬性和函數
傳統寫法vs新寫法
//傳統寫法 $('#result').append('There are <b>' + basket.count + '</b> ' + //不斷用+號連接'items in your basket, ' +'<em>' + basket.onSale +'</em> are on sale!' ); //新寫法 $('#result').append(` //一個反引號括起來,然后直接寫,用大括號包括變量There are <b>${basket.count}</b> itemsin your basket, <em>${basket.onSale}</em>are on sale! `);//模板字符串中嵌入變量，需要將變量名寫在${}之中。 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}.`);} }模板嵌套
map() 方法創建一個新數組，其結果是該數組中的每個元素調用一個提供的函數。
如果需要引用模板字符串本身，在需要時執行，可以像下面這樣寫。
// 寫法一 let str = 'return ' + '`Hello ${name}!`';//將模板本身保存起來為變量 let func = new Function('name', str); //作為functionBody使用 func('Jack') // "Hello Jack!"// 寫法二 let str = '(name) => `Hello ${name}!`'; let func = eval.call(null, str); //不建議使用eval func('Jack') // "Hello Jack!"new Function ([arg1[, arg2[, ...argN]],] functionBody)
參數arg1, arg2, ... argN:被函數使用的參數的名稱必須是合法命名的。
functionBody:一個含有包括函數定義的JavaScript語句的字符串。
參考引用:
es6字符串擴展
每天一點ES6(5)：字符串的擴展
總結
以上是生活随笔為你收集整理的es6学习笔记-字符串的扩展_v1.0_byKL的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LeetCode 之Two Sum
- 下一篇： Java中的Map