ES6-14【Unicode表示法、字符串方法、模板字符串】

一.Unicode表示法

(1).字符串拓展

四位以上解析

log("\u{20BB7}")

编码解析

log("\u{41}\u{42}\u{43}")//ABC
log('\uD842\uDFB7' === '\u{20BB7}')//TRUE

(2).编码方法

es5中涉及到编码的

var s = "𠮷
"
console.log(s.length);//通过四个字节的方式解析打印2
console.log(s.charAt(0));//� 通过charAt打印第一个字符
console.log(s.charAt(1));//�

单独拿出来没有办法正确的表示一个字符

打印对应字符的码点

var s = "𠮷
"
log(s.charCodeAt(0))//55362 返回的是10进制的码点不是16进制，但是可以用方法转换
log(s.charCodeAt(1))//57271
log(Number.prototype.toString.call(55362,16));//d842
log(Number.prototype.toString.call(57271,16));//dfb7

es6对应优化方法

codePointArt

var s = "𠮷
"
log(s.codePointAt(0));//134071 输出10进制
log(Number.prototype.toString.call(134071 ,16));//20bb7

length

var s = "𠮷
a"
log(s.length);//3这样就会存在第一位的问题
log(s.codePointAt(0));//134071 
log(s.codePointAt(1));//57271
log(s.codePointAt(2));//97
log(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('吉'))//true
log(0xffff); //655535 比对的时候直接转为10进制比较

fromCharCode es5的方式

超出码点的范围

log(String.fromCharCode(0x20bb7));

处理方式是舍弃2 最高位

log(String.fromCharCode(0x20bb7) === String.fromCharCode(0x0bb7));//true

formCodePoint 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 true

repeat

字符复制

log('x'.repeat(3));//xxx
log('x'.repeat(2.9));//xx
log('x'.repeat(NaN));// 空
log('x'.repeat(0));// 空
log('x'.repeat("3"));// 会有隐式转换 //xxx

padStart/padEnd

填充

log('x'.padStart(5,"ab"));//ababx
log('x'.padStart(4,"ab"));//abax
log('x'.padEnd(4,"ab"));//xaba
log('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);//