es6学习笔记整理（三）字符串扩展

字符串新增特征：

1、Unicode表示法

        //常规表示法
        console.log('1:',`\u0061`); //a
        //当Unicode编码大于0xFFFF,添加{}，
        console.log('2:',`\u20BB7`); //₻7 当做两个字节读取
        console.log('3:',`\u{20BB7}`);//𠮷

        //es5中
        var s = '𠮷';
        console.log('length', s.length);//2
        console.log('0', s.charAt(0));//乱码、无法识别
        console.log('1', s.charAt(1));//乱码、无法识别
        console.log('at0', s.charCodeAt(0));// 55362 charCodeAt自动识别两个字节
        console.log('at1', s.charCodeAt(1));// 27271

        //es6中
        /*codePointAt字符取码值*/
        var  s1 = '𠮷a';
        console.log('length:',s1.length);//3
        console.log('code0:',s1.codePointAt(0));//134071codePointAt自动识别四个字节
        console.log('code0:',s1.codePointAt(0).toString(16));//20bbf
        console.log('code1:',s1.codePointAt(1));//57271 识别𠮷的后两个字节
        console.log('code2:',s1.codePointAt(2));//97 a

        /*es5：fromCharCode码值转字符
        * es6: fromCodePoint码值转字符,可以转大于0xFFFF即大于两个字节的字符
        * */
        console.log(String.fromCharCode("0x20bb7"));//ஷ
        console.log(String.fromCodePoint("0x20bb7"));//𠮷

2、遍历接口

    {
        /*字符串的遍历器接口*/
        let str= '\u{20bb7}abc';
        for(let i = 0; i < str.length; i++){
            //还是按照两个字符读取
            console.log('es5:',str[i]);//� � a b c
        }

        for(let code of str){
            //直接会将Unicode编码转换为字符
            console.log('es6:', code);//𠮷 a b c
        }
    }

3、模板字符串

• 数据和模板拼接成带结果的字符串
• ``加变量的时候需要加${}

        let str1 = 'hello';
        let str2 = 'world';
        let str3 = `this is ${str1} ${str2}`;
        console.log(str3);//this is hello world

4、标签模板

        /*标签模板
        * 作用：
        * 1、过滤HTML字符串的时候（防止XSS攻击的时候），用这个处理
        * 2、处理多语言转换，比如中文、英文等等*/
        let user = {
            first: "lyly",
            last: 'han'
        };
        console.log(fun`i am 123 ${user.first} 789 ${user.last} 456`);

        function fun (a,b,c) {
            console.log(a);
            console.log(b);
            console.log(c);
            return a+b+c;
        }

执行结果：

image.png

5、新增方法
includes、 startsWith、endsWith

• 判断字符串中是不是包含某些字符
• 或者是不是以某些字符串起始地或者截止的

        let str = 'string';
        console.log('includes:',str.includes('in'));//true 判断是否包含
        console.log('start:',str.startsWith('st'));//true 判断是否以st开头
        console.log('end:',str.endsWith('ng'));//true 判断是否以ng结尾

repeat 重复
str.repeat(重复次数)

        let str = 'haha';
        console.log(str.repeat(3));//hahahahahaha

String.raw()

• raw api对所有的斜杠转义了，即在斜杠之前又加了一个斜杠
• 所以像\n等都不起作用

        console.log(String.raw`abc\n${1+2}`);//abc\n3
        console.log(`abc\n${1+2}`);
        //abc
        //3

padStart

        /*es7的草案
        * 添加兼容库babel-polyfill后，也可以在es6中使用
        * padStart 向前补白
        * str.padStart(字符串长度，需要补白的字符串)
        * padEnd 向后补白
        * str.padEnd(字符串长度，需要补白的字符串)*/

        console.log('1'.padStart(3, '0'));//001
        console.log('1'.padEnd(3, '0'));//100