es字符串扩展学习和加深使用场景

字符串扩展

字符串新特性

1. Unicode表示法
2. 遍历接口
3. 模板字符串
4. 新增方法（10种）

{
    console.log('a',`\u0061`);
    console.log('s',`\u20BB7`);
    
    console.log('s',`\u{20BB7}`);
    
}

es5

{
    let s='a'
    console.log('length',s.length)
    //chartAt(0) 取字符的第一个值
    console.log('a',s.chartAt(0))
    console.log('a',s.chartAt(1))
    //chartCodeAt(0) 取字符编码的第一个值
    console.log('at0',s.chartCodeAt(0))
    console.log('at0',s.chartCodeAt(1))
}

es6

codePointAt

es5

fromChatCode

es6

fromCodePoint

遍历接口

es6 可以处理大于Unicode的字符串

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

增加了字符串的查找功能

判断字符串中包含某些字符， 判断某些字符为起止的

ES6直接用includes就可以判断，不再返回索引值

{
    let str="string";
    console.log('includes',str.includes('s'))
    console.log('start',str.startWidth('str'))
    console.log('end',str.endWidth('ng'))
}

str.startWidth 判断开头是否存在 str.endWidth 判断结尾是否存在

复制字符串

{
    let str='abc';
    console.log(str.repeat(2));
}

模板字符串

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

补白

日期默认得到2017/6/10 转换成2017/06/10

{
    console.log('1',padStart(2,'0')) //01
    console.log('1',padEnd(2,'0')) //10
}

标签模板

怎么用，在哪里用

作用

1. 过滤html字符串
2. 多语言转换

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

String.row 字符串/换行符不生效作用

使用场景不常见

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