es6语法-字符串扩展

字符串新增特性

Unicode表示法、遍历接口、模板字符串、新增方法(10种)。

1、Unicode表示法

{
    console.log('a','\u0061');
}   

输出：a a

当unicode的编码大于0xFFFF(码值大于2个字节编码)时，会如何？

{
    console.log('s','\u20BB7');
}   

输出：s ₻7

很明显没有按一个字符来处理。因为该值已超过了0xFFFF。

在es6中如何处理大于0xFFFF的编码呢？

☞用“{}”将unicode编码包起来即可。

{
    console.log('s','\u{20BB7}');
}

输出：

接下来，说一下API：

{
    let s = 'a';
    console.log('length',s.length);
}   

输出：length 1

输出：length 2

发现：第1个字符和第2个字符是乱码，而它们的码值都能取出来。在es5中对unicode的处理是不到位的。

在es6中是如何处理这个值？

☞codePointAt()–>取字符的码值(es6新增的方法)

codePointAt()☞会自动计算4个字节的码值

charCodeAt()☞取2个字节

处理方式：1只取后2个字节。

给出码值如何找对应的字符？

常用的和字符串结合的遍历器：

{
    let str = '\u{20bb7}abc';
    for (let i = 0; i < str.length; i++) {
        console.log('es5',str[i]);
    }
}

es5的做法☞前2个出现乱码

{
    let str = '\u{20bb7}abc';
    for (let code of str) {
        console.log('es6',code);
    }       
}   

这里未用i的循环，而是用了for of这么一个遍历器。

通过字符串的遍历器接口，就可正常的处理字符串中包含unicode的编码大于0xFFFFF的处理情况☞使用频率较高！！

实用方法

如：判断字符串中是否包含某些字符，或判断一个字符串是否以某些字符为起始的或截止的。

字符串中是否包含r字符：

{
    let str = "string";
    console.log('includes',str.includes("r"));
}   

输出：includes true

如代码如下：

{
    let str = "string";
    console.log('includes',str.includes("c"));
}   

输出：includes false

判断字符是否以哪些字符为起始：

{
    let str = "string";
    console.log('start',str.startsWith("str"));
}   

输出：start true

判断字符是否以哪些字符为截止：

{
    let str = "string";
    console.log('end',str.endsWith("ng"));
}

输出：end true

这3个方法使用频率较高！！

还有一个API是经常使用的：

☞字符串的复制–repeat(次数)，也可用“+=”，但es6的处理方式更简便，只需改个参数即可。

{
    let str = "string";
    console.log(str.repeat(2));
}   

输出：stringstring

重要概念☞模板字符串

==>把数据和模板最终拼成一个带结果的字符串

注意：
1、模板必须由数字1按键左边的符号包起来““”(非单引号也非双引号)；
2、数据项需通过“${}”包起来。

{
    let name = "list";
    let info = "hello";
    let a = `i am ${name},${info}`;
    console.log(a);
}   

输出：i am list,hello

ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart用于头部补全，padEnd用于尾部补全。

{
    console.log('1'.padStart(2,'0'));
}   

输出：01

{
    console.log('1'.padEnd(2,'0'));
}

输出：10

☞标签模板

{
    let user={
        name:'list',
        info:'hello'
    };
    abc`i am ${user.name},${user.info}`;
    function abc(s,v1,v2){
        console.log(s,v1,v2);
    }   
}   

这种写法就叫做标签模板。（加了一个abc且abc又是一个函数）

运行结果：

{
    let user={
        name:'list',
        info:'hello'
    };
    abc`i am ${user.name},${user.info}`;
    function abc(s,v1,v2){
        console.log(s,v1,v2);
        return s+v1+v2;
    }   
}   

发现加了return也没有变化。

{
    let user={
        name:'list',
        info:'hello'
    };
    console.log(abc`i am ${user.name},${user.info}`);
    function abc(s,v1,v2){
        console.log(s,v1,v2);
        return s+v1+v2;
    }   
}   

运行结果：i am ,,,listhello

把字符串数组转化成字符串。

标签模板的作用：

1、过滤html字符串时，防止xss攻击；
2、处理多语言转换–如中文、英文、德文，用一套模板，通过不同的return返回不同的结果。

如上，函数abc()的结果即为return返回的最后结果，拿到的v1，v2变量、原生的字符串模板，就可处理任何你想要的逻辑。

字符串中还有一个API☞☞.raw“：

{
    console.log(String.raw`Hi\n${1+2}`);
    console.log(`Hi\n${1+2}`);
}

.raw“对所有的斜杠“\”进行了转义，从而使得斜杠不生效。