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)
}
))唉))
