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));//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));//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));//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));//xxxlog('x'.repeat(2.9));//xxlog('x'.repeat(NaN));// 空log('x'.repeat(0));// 空log('x'.repeat("3"));// 会有隐式转换 //xxx

padStart/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);//

来源：https://www.icode9.com/content-4-770101.html