字符串扩展

字符串新增特性

  • Unicode表示法
  • 遍历接口
  • 模板字符串
  • 新增方法10种

注意一些方法是ES7的提案,如果不打补丁,不处理兼容性的话,这些方法在ES6编译中是没办法通过的,所以需要安装一个补丁库,处理兼容的,这些方法经常用到,安装babel-ployfill 在文件中引入兼容库 import 'babel-ployfil'; ES7提案方法就可以正常使用了

  • Unicode表示法
{
    //正确的表示了a
    console.log('a',`\u0061`);
    //当unicode大于0xFFFF的时候回事什么情况呢,字符串不会当做一个字符来处理,而是两个,20BB不是Unicode编码,与7都当做两个字节去解析,故显示 口7
    console.log('s',`\u20BB7`);
    
    //怎么处理这种编码呢,打上括号
    console.log('s',`\u{20BB7}`);//𠮷
}

{
  // charCodeAt
  // es5中处理,因为unicode码大于0xFFFF,大于两个字节,即当做四个字节处理,计算长度的时候,每两个字节就算是一个长度
  let s='𠮷';
  console.log('length',s.length);// 2
  //取第一个位置的字符
  console.log('0',s.charAt(0));// 乱码
  console.log('1',s.charAt(1));// 乱码
  //取第一个字符的unicode编码
  console.log('at0',s.charCodeAt(0));// 55362
  console.log('at1',s.charCodeAt(1));// 57271
  //es5中对unicode码处理不到位

  // es6中处理   codePointAt
  let s1='𠮷a';
  console.log('length',s1.length);// 3
  //取第一个字符的unicode编码
  console.log('code0',s1.codePointAt(0));// 134071
  //码值对应的字符,自动计算四个字节的码值
  console.log('code0',s1.codePointAt(0).toString(16)); // 20bb7 𠮷
  
  //取第二个字符的unicode编码,获取的是四个字节的后两个字节的码值
  console.log('code1',s1.codePointAt(1));// 57271
  console.log('code2',s1.codePointAt(2));// 97 即是a
}

{
  // String.fromCharCode
  console.log(String.fromCharCode("0x20bb7")); // 乱码
  console.log(String.fromCodePoint("0x20bb7")); // 𠮷

}

{
    // 字符串遍历,在es5中还是被当成两个字节去处理了,所以会乱码
    let str='\u{20bb7}abc';
    for(let i=0;i<str.length;i++){
     console.log('es5',str[i]);
    }
    //结果是 乱码 乱码 a b c
    
    // 通过 es6 中for---of---就可以正确处理
    for(let code of str){
     console.log('es6',code);
    }
    //结果是 𠮷 a b c
}

{
  let str="string";
  // 包含某个字符
  console.log('includes',str.includes("c"));  // false
  // 以什么字符开始
  console.log('start',str.startsWith('str')); // true
  //以什么字符结尾
  console.log('end',str.endsWith('ng'));//true
}

{
    // 重复次数,字符串复制功能
    let str="abc";
    console.log(str.repeat(2)); // abcabc
}

{
    // 模板字符串,${name} 包起来
    let name="list";
    let info="hello world";
    let m=`i am ${name},${info}`;
    console.log(m);// i am list,hello world
}

{
  // 处理日期,还有某些补缺问题相当有效,但是注意es7,需要添加补丁库
  // 补白作用,在1的前边加上0,总长度是2
  console.log('1'.padStart(2,'0'));// 01
  // 在1的后边加上0,总长度是2
  console.log('1'.padEnd(2,'0'));// 10
}

{
    // 过滤html字符串,防止xss攻击的时候,用这个特别好,还有就是处理多语言,通过不同的return,返回不同的结果
    //标签模板,怎么用,用在哪儿
    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
    }
}

{
  // \n换行符没有生效,所以结果就是Hi\n3
  // raw对\n进行了转义,成了 \\n
  console.log(String.raw`Hi\n${1+2}`);
  
  //结果是换行生效
  //Hi
  //3
  console.log(`Hi\n${1+2}`);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115