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