ES6-14【Unicode表示法、字符串方法、模板字符串】
一.Unicode表示法
(1).字符串拓展
四位以上解析
log("\u{20BB7}")编码解析
log("\u{41}\u{42}\u{43}")//ABClog('\uD842\uDFB7' === '\u{20BB7}')//TRUE(2).编码方法
es5中涉及到编码的
var s = "𠮷"console.log(s.length);//通过四个字节的方式解析打印2console.log(s.charAt(0));//� 通过charAt打印第一个字符console.log(s.charAt(1));//�单独拿出来没有办法正确的表示一个字符
打印对应字符的码点
var s = "𠮷"log(s.charCodeAt(0))//55362 返回的是10进制的码点不是16进制，但是可以用方法转换log(s.charCodeAt(1))//57271log(Number.prototype.toString.call(55362,16));//d842log(Number.prototype.toString.call(57271,16));//dfb7es6对应优化方法
codePointArt
var s = "𠮷"log(s.codePointAt(0));//134071 输出10进制log(Number.prototype.toString.call(134071 ,16));//20bb7length
var s = "𠮷a"log(s.length);//3这样就会存在第一位的问题log(s.codePointAt(0));//134071 log(s.codePointAt(1));//57271log(s.codePointAt(2));//97log(Number.prototype.toString.call(97,16));//61 log('\u{61}')//a有Symbol迭代器接口，所以是可以for of的
证明了es6不是通过长度来迭代的，超过字符限制也可正确打印
var s = "𠮷a"for(let value of s){ log(value)}//𠮷a"一个字节占8个byte判断是否超过最大编码
function is32Bit(c){ return c.codePointAt(0) > 0xffff}log(is32Bit('吉'))//truelog(0xffff); //655535 比对的时候直接转为10进制比较fromCharCode es5的方式
超出码点的范围
log(String.fromCharCode(0x20bb7));
处理方式是舍弃2 最高位
log(String.fromCharCode(0x20bb7) === String.fromCharCode(0x0bb7));//trueformCodePoint es6的方式
将编码转换为字符
弥补字符超出极限的问题
String.fromCodePoint(0x20BB7)//吉for of就能正确处理超过长度的字符
String.fromCodePoint(0x20BB7)//吉for(let i = 0; i < str.length; i ){ console.log(str[i])}//两个乱码for(let i of str){ console.log(i)}//吉二.字符串方法
includes/startWith/endsWith
包含什么
以什么开始
以什么结束，
统统返回布尔值
let s = "Hello world!";log(s.startsWith('Hello'));log(s.endsWith('!'));log(s.includes("o"));//true true truerepeat
字符复制
log('x'.repeat(3));//xxxlog('x'.repeat(2.9));//xxlog('x'.repeat(NaN));// 空log('x'.repeat(0));// 空log('x'.repeat("3"));// 会有隐式转换 //xxxpadStart/padEnd
填充
log('x'.padStart(5,"ab"));//ababxlog('x'.padStart(4,"ab"));//abaxlog('x'.padEnd(4,"ab"));//xabalog('x'.padEnd(5,"ab"));//xabab三.模板字符串
(1).基本用法
let name = 'web'let info = 'developer'let m = `I am a${name} ${info}`;log(m);//I am a web developer(2).进阶用法
表达式是可以运算的
let x = 1;let y = 2;log(`${x} ${y}=${x y}`)//1 2 = 3调用对象
let obj = {x:1,y:2};log(`${obj.x obj.y}`) //3调用函数且会隐式转换为字符串
function fn(){ return [1,2,3,4];}log(`foo${fn()}bar`)//foo1,2,3bar模板字符串嵌套
let msg = `Hello,${'place'}`;console.log(msg)//Hello,place模板渲染方法
const temp = arr1 => <table> ${ arr1.map(addr => <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> ) } </table>const data = [ {first:"zhang",last:"san"}, {first:"li",last:"si"},] 会出现有,的问题所以将将数组分割
${ arr1.map(addr => <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> ).join('') }会有注入的问题
const data = [ {first:"zhang",last:"<script>alert('abc')</script>"}, {first:"li",last:"si"},] 标签模板
解决注入问题
标签模板传参解析
第一个参数是包含了字符串字面量(即那些没有变量替换的值)的数组
后面的参数是已经替换后的变量值
tag `Hello ${a b} world${a*b}`; function tag($,$1,$2){ log($,$1,$2) } //['Hello ',' world','']13 50书写方式
function SaferHTML(tempData){ let s = tempData; for(let i = 1; i < arguments.length;i ){ let arg = String(arguments[i]); s = arg.replace(/</g,"#lt")//#==&有道云不合适 .replace(/>/g,"#gt"); s = tempData[i] } return s;}let sender = '<script>alert('abc')</script>'let message = SaferHTML `<p>${sender} has set you message`log(message);// 赞 (0)