Unicode表示法

• 本身能正常識別的，加{}也能識別，花括號內的內容表示碼點

parseInt('0061',16) // 十進制的97，97在ASCII碼中對應a console.log('\u0061') // a console.log('\u{0061}') // a console.log('\u{61}') // a

原型上方法

codePointAt(十進制)

• 字符串的長度是字符的長度，需要4個字節表示的字符，長度為2
• charCodeAt返回的也是碼點
• 凡是超過oxffff的，用codePointAt更方便

console.log('\u{1f42a}'.length) // 2 🐪 // 該字符需要4個字節表示，分開打印時，每個都是亂碼 console.log('\u{1f42a}'.charAt(0)) // � console.log('\u{1f42a}'.charAt(1)) // �

• 注意：和charCodeAt一樣

'🐪'.codePointAt(0) // 128042 '🐪'.charCodeAt(0) // 55357 '🐪'.charCodeAt(1) // 56362 (55357).toString('16') // "d83d" (56362).toString('16') // "dc2a" (128042).toString('16') // "1f42a" console.log('\u{d83d}\u{dc2a}' === '\u{1f42a}') // true '🐪7'.codePointAt(0) // 128042 '🐪7'.codePointAt(1) // 56362 注意：和charCodeAt一樣 '🐪7'.codePointAt(2) // 55 7的ASCII碼 '🐪7'.length // 3 '語文'.length // 2 'yw'.length // 2

有迭代器接口

• 迭代器的底層和length不同，能正確識別字符
• 對于4字節字符，for循環遍歷出來的是亂碼，for…of能正確識別
  
  

includes/startsWith/endsWith

'Hello World'.startsWith('h') // false 'Hello World'.startsWith('H') // true 'Hello World'.endsWith('d') // true 'Hello World'.includes('d') // true

repeat

• 返回字符串，將原本的字符串重復n次，入參是重復次數
• 會對入參隱式轉換，數字只取整數位

'X'.repeat(3) // "XXX" 'X'.repeat(2.9) // "XX" 'X'.repeat(NaN) // "" 'X'.repeat(null) // ""；、7 'X'.repeat(undefined) // "" 'X'.repeat(false) // "" 'X'.repeat('') // ""

padStart(len,str)/padEnd

• 填充指定字符str后，長度為len

'ps'.padStart('0', 6) // "ps" 'ps!'.padStart(7, 'o') // "oooops!" 'ps!'.padStart(0, 'o') // "ps!" 'ps!'.padStart(-1, 'o') // "ps!" 'ps!'.padStart(5.5, 'o') // "oops!" 最后還是5位

判斷是否4字節

• 十六進制和十進制可以直接比較大小

const str = '🐪12' function is32Bit(str) {return str.codePointAt(0) > 0xffff } console.log(is32Bit(str)) // true console.log(is32Bit('名')) // false

構造器上方法

• ES5不能正確識別4字節字符(fromCharCode)，會舍棄最高位
  
• 傳入的碼點可以是任意進制

String.fromCharCode('128042') // "?" String.fromCodePoint('128042') // "🐪" String.fromCodePoint('0x1f42a') // "🐪" String.fromCharCode('0x1f42a') === String.fromCharCode('0xf42a') // true

模板字符串 ``

• 模板內放表達式可以做算數運算、函數執行、數組，(調用toString)
• 在模板內使用未聲明的變量依然會報錯
• ${}內使用字符串（有點多此一舉）

function test() {return [1, 2, 3] } console.log(`${test()}`) // 1,2,3 console.log(`hello ${'world'}`) // hello world const data = [{ lastName: '黃', firstName: '藥師' },{ lastName: '張', firstName: '無忌' },{ lastName: '周', firstName: '伯通' }, ] const temp = data => `<table>${data.map(item => `<tr><td>${item.lastName + item.firstName}</td></tr>`).join('')}</table> ` document.getElementById('app').innerHTML = temp(data)

• 如何注入腳本

<div id="app"></div><script>(function () {const data = [{ lastName: "<script>console.log(123)<\/script>" },];const temp = data => `${data.map(item => `${item.lastName}`).join('')} `;document.getElementById('app').innerHTML = temp(data);})();</script>

標簽模板

• 變量作為分隔點（split）
• 防止惡意輸入 腳本注入

test`hello ${1 + 2} world ${3 * 4}` // 這么寫就是函數調用了 function test($, $1, $2) {console.log($, $1, $2) }

總結

以上是生活随笔為你收集整理的ES6-14 Unicode表示法、字符串方法、模板字符串的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。