美文网首页
ES6字符串扩展

ES6字符串扩展

作者: 易路先登 | 来源:发表于2019-06-17 08:32 被阅读0次
    1.加强了对 Unicode 的支持

    ES6允许用以下两种方式表示一个字符:
    (1)"\u0061",这种方式只能表示unicode码点小于0xFFFF的字符,超出则必须用两个双字节的形式表示。

    console.log('a','\u0061');//a
    console.log('a','\uD842\uDFB7');//𠮷
    

    (2)"\u{61}",这种方式可以表示unicode码点大于0xFFFF的字符。

    console.log('\u{20BB7}');//𠮷
    
    2.新增Unicode码值api

    ES5中获取字符串长度、对应字符、对应字符码值用法如下:

    var str = '𠮷';
    //str.length 获取字符串长度
    console.log(str.length);//2 因'𠮷'字默认编码是'\uD842\uDFB7',所以长度为2
    //str.charAt(num) 获取字符串中对应下标num位置的字符
    console.log(str.charAt(0));//�乱码
    //str.charCodeAt(num) 获取字符串中对应下标num位置的字符的Unicode编码
    console.log(str.charCodeAt(0));//55362
    

    ES6中获取字符串长度、对应字符、对应字符码值用法如下:
    新增获取对应字符码值api str.codePointAt()

    let str = '𠮷';
    //str.length 获取字符串长度
    console.log(str.length);//2 因'𠮷'字默认编码是'\uD842\uDFB7',所以长度为2
    //str.charAt(num) 获取字符串中对应下标num位置的字符
    console.log(str.charAt(0));//�乱码
    //str.charCodeAt(num) 获取字符串中对应下标num位置的字符的Unicode编码
    console.log(str.codePointAt(0));//134071 
    console.log(str.codePointAt(0).toString(16));//20bb7
    

    需要注意的是,如果长度超过2的单字符使用codePointAt方法获取第一个位置的码值时即可返回整个字符的完整码值,取第二个位置的字符码值则如ES5处理方式相同,以'𠮷'字为例,代码如下:

    let str = '𠮷';
    console.log(str.codePointAt(0));//134071 
    console.log(str.codePointAt(0).toString(16));//20bb7
    //在es5中'𠮷'字的unicode编码是'\uD842\uDFB7' 取下标为1的字符的码值,
    //则结果为'\uD842\uDFB7'的后一个,即DFB7
    console.log(str.codePointAt(1));//57271 
    console.log(str.codePointAt(1).toString(16));//DFB7
    

    新增码值转换为字符api String.fromCodePoint()
    以'𠮷'字为例代码如下:
    ES5中使用的是String.fromCharCode()api,不能正确处理码值超过0xFFFF的字符

    console.log(String.fromCharCode('0x20bb7'));//乱码
    

    ES6中是使用的是String.fromCodePoint() api

    console.log(String.fromCodePoint('0x20bb7'));//𠮷
    
    3新增字符串遍历方法

    let...of
    代码如下:

    let str = '𠮷abc';
    for(let item of str){
      console.log(item);
    }
    //𠮷
    //a
    //b
    //c
    
    4其他常用api

    includes(*)判断是否包含字符*
    startsWith(**)判断是否以**为起始
    endsWith(**)判断是否以**为结束
    repeat(num)复制字符串num次
    padStart(length,'padstr')在字符串追加padstr,将字符串补全为length长度的新字符串
    padEnd(length,'padstr')在字符串追加padstr,将字符串补全为length长度的新字符串
    代码如下:

    let str = '𠮷abc';
    console.log(str.includes('a'));//true
    console.log(str.startsWith('𠮷'));//true
    console.log(str.endsWith('c'));//true
    console.log(str.padStart(6,'0'));//𠮷abc0
    console.log(str.padStart(6,'0'));//0𠮷abc
    
    5模板字符串

    使用两个反引号``将字符串包裹,可任意换行并能引用变量,代码如下:

    let num = 5;
    let str = `𠮷a
    b${num}c`;
    console.log(str);
    /*输出结果为:
    𠮷a
                b5c
    */
    
    
    6标签模板

    就是给模板字符串加个标签函数(函数名任意命名),代码如下

    let name = 'qiang';
    let comp = 'bc';
    let newStr = abc`i am ${name},${comp}`;
    function abc(arr,...variable){
        let rstr = '';
            for(let i = 0;i < arr.length-1;i++){
                rstr += arr[i]+variable[i]
            }
        return rstr ;
    }
    console.log(newStr);//i am qiang,bc
    
    

    需要说明的是,标签函数abc的参数arr为这个字符串i am ${name},from ${comp}以变量为分隔符分割所得的数组,得['i am',',','']。variable为字符串模板中变量所组成的数组,为['qiang','bc'],标签函数abc的返回值即为标签模板的最终计算结果,为i am qiang,bc
    欢迎您了解贝程教育
    ES6总篇--目录

    相关文章

      网友评论

          本文标题:ES6字符串扩展

          本文链接:https://www.haomeiwen.com/subject/garvfctx.html