ECMAScript6--5.字符串扩展

2017-10-18 本文已影响25人飞菲fly

1.字符串新增特性

Unicode表示法
遍历接口
模板字符串

新增方法（10种）

eg:
1.Unicode表示法

{
 console.log('a','\u0061');//a a
 
 //码值大于(0xFFFF)两个字节的最大编码的时候会怎么样呢？
 console.log('s','\u20BB7');
//输出：s []7(当成了两个字符，第一个不是unicode编码所以没有对应的字符没有正常显示出来)

 //在ES6中怎么处理unicode编码大于0xFFFF这么一个编码呢？
  --用{}把unicode编码包起来就可以了；
 console.log('s-1','\u{20BB7}'); //s-1  吉   
}

2.codePointAt--取字符的码值

 {
 //'吉'的unicode编码\u{20BB7}大于0xFFFF，当成了两个字符；
 /*它的码值是大于两个字节的，这个时候就把它处理成4个字节了，计算长度的时候
 每两个字节是一个长度，所以这个地方长度是2；*/
 let s='吉'; 
 let a = 'a';
 
 //ES5:
 console.log('length',s.length, a.length); //length 2  1

 //ES5：取编码的时候的方法：charAt();--对unicode处理是不到位的；
 //charCodeAt只取两个字节；
 consle.log('0',s.charAt(0)); //取第一个位置的字符 结果：乱码
 consle.log('1',s.charAt(1)); //取第二个位置的字符 结果：乱码
 console.log('at0',s.charCodeAt(0)); //取第一个字符unicode编码的码值  at0 55362
 console.log('at1',s.charCodeAt(1)); //取第二个字符unicode编码的码值  at1 57271


 //ES6:取字符的码值codePointAt()
  let s1='吉a'; 
  console.log('length',s1.length); // length  3
  
  //取第一个字符的码值：code0 134071（十进制的）
  //(第一个字符是用4个字节存储的，取第一个字符位置的时候codePointAt会计算四个字节的码值)
  console.log('code0',s1.codePointAt(0));
  
  //看码值对应的是什么字符（转换成16进制）code0 20bb7
  console.log('code0',s1.codePointAt(0).toString(16));
  
  //code1  57271(取1的时候就是只取那个字符的后两个字节)
  console.log('code1',s1.codePointAt(1));
  
  //就会明白了取1的时候取了两个字节，而不是从第4个字节之后去取
  console.log('code2',s1.codePointAt(2)); // code2 97  (a)
  
 }

3.formCharCode--根据码值给出对应的字符

    {
        //ES5和ES6最大的区别就是能不能处理unicode字符
        （大于0xFFFF--大于两个字节的unicode字符）；
        
        //ES5:
        console.log(String.formCharCode("0x20bb7")); //乱码
   
        //ES6:
        console.log(String.fromCodePoint("0x20bb7")); //吉
   
    }

4.字符串遍历器接口:let of 遍历器

通过字符串的遍历器接口可以正常处理字符串中包含unicode编码大于0xFFFF的情况；

    {
        let str ='\u{20bb7}abc';
        
        //ES5:遍历
        for(let i=0;i<str.length;i++){
            console.log('ES5',str[i]); //乱码 乱码 a b c
        }
        
        //ES6:
        for(let code of str){
            console.log('ES6:',code); //吉 a b c
        }
    }

5.includes && startsWith && endsWith

1.includes:判断字符串中是否包含某些字符
2.startsWith &&endswith：判断一个字符串是不是以某些字符为起始或截止

   {
    //判断字符串中是否包含某些字符
    //判断字符串中是不是包含r字符
    let str ="string";
    console.log('includes:',str.includes("r")); // includes true
    
    //一个字符串是不是以某些字符为起始或截止
    //判断是不是以str开始的
    console.log('start',str.startsWith('str')); //start true
    
    //判断是不是以ng截止的
    console.log('end',str.endsWith('ng')); //end  true
    }
    
    {
        //重复--字符串的复制功能
        let str = 'abc';
        
        //ES6:repeat(数字)  数字：指定重复的次数
        console.log(str.repeat(2)); //abcabc
    }

6.模板字符串--把数据和模板最后拼成一个带结果的字符串

    {
        let name ="list";
        let info = "Hello world!"
        
        let m =`i am ${name},${info}`;//(`键盘数字1左边的按键)
        console.log(m); //i am list,hello world!
    }

7.padStart && padEnd

ES6没有实现，ES7的一个草案，加了babel--polyfill这个库的话也是可以在ES6中使用的；
padStart：补白的作用--向前补；
padEnd：补白的作用--向后补；

    {
        //padStart 补白的作用--向前补；(例如：日期小于10的01-09可以用这个)
            API返回的最终结果就是要求第一个参数是长度
           （api返回的字符串必须满足第一个参数指定的长度），如果长度不够第二个参数要补什么
        console.log('1'.padStart(2,'0')); //01
        
        //padEnd 向后补白；
        console.log('1'.padEnd(2,'0')); //10
        
    }

8.标签模板

作用：
1.在过滤html字符串的时候（在防止xss攻击的时候用这个处理）
2.处理多语言转换的时候；

{
 let user ={
      name:'list',
      info:'hello world'
  };
        
 console.log(abc`i am ${user.name},${user.info}`);//输出：i am ,,,listhello world
 function abc(s,v1,v2){
      //["i am",",","",raw:Array[3]] "list" "hello world"
      console.log(s,v1,v2); 
      return s+v1+v2;
   }
    
 }

9.raw

raw对所有的斜杠进行了转义，斜杠之前加了斜杠，斜杠是不生效的；

    {  
        console.log(string.raw'Hi\n${1+2}'); //Hi\n3(\n换行符并没有生效)
        console.log('Hi\n${1+2}'); // Hi   3
    }

ECMAScript6--5.字符串扩展

猜你喜欢

热点阅读