es6-字符串扩展

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/grapelove01/article/details/82721406

字符串新增特性

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

babel-polifill 兼容 es7

unicode表示法

{
  console.log('a',`\u0061`); // a a
  console.log('s',`\u20BB7`); // s ₻7，当成了两个字符
  console.log('s',`\u{20BB7}`); // s ��
}

遍历接口

codePointAt()

取码值

es5 时

{
  let s='��';
  console.log('length',s.length); // 2，码值大于两个字节，处理成4个字节，每两个字节为一个长度
  console.log('0',s.charAt(0)); // 0 �，乱码，位置0的字符
  console.log('1',s.charAt(1)); // 1 �，乱码，位置1的字符
  console.log('at0',s.charCodeAt(0)); // at0 55362，unicode码值可以取出来
  console.log('at1',s.charCodeAt(1)); // at1 57271
}

es6

{
  let s1='��a';
  console.log('length',s1.length); // 3
  console.log('code0',s1.codePointAt(0)); // 134071，第一个字符
  console.log('code0',s1.codePointAt(0).toString(16)); // 20bb7，十六进制的第一个字符，这里取了4个字节
  console.log('code1',s1.codePointAt(1)); // 57271，这里取的是长度是2的字符的后两个字节，这样后面处理不会乱
  console.log('code2',s1.codePointAt(2)); // 97，对应 a
}

fromCodePoint()

根据码值取字符

// 根据码值取字符
{
  // es5
  console.log(String.fromCharCode("0x20bb7")); // ஷ，乱码
  // es6，处理大于两个字节的 unicode 字符
  console.log(String.fromCodePoint("0x20bb7")); // ��
}

字符串遍历器接口

let of

// 字符串编译器接口
{
  let str='\u{20bb7}abc';
  for(let i=0;i<str.length;i++){
    console.log('es5',str[i]); // � � a b c，前两个是乱码
  }
  // 通过字符串遍历器接口，处理字符串中包含unicode编码大于0xFFFF的情况
  for(let code of str){
    console.log('es6',code); // �� a b c
  }
}

模板字符串

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

其他 api

判断是否包含

{
  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'，字符串复制
}

字符串补白

应用场景：日期补白，彩票补白。

注意：es7的未定稿方法，编译需要引入 polifill 包，npm 对应是 babel-polyfill。

{
  // 向前补白
  console.log('1'.padStart(2,'0')); // 01，参数1为长度设置，参数2为补白内容
  // 向后补白
  console.log('1'.padEnd(2,'0')); // 10
}

标签模板

应用场景：

• 过滤 html 字符串时，如防止 xss 攻击时
• 处理多语言转换时，通过函数返回不同的结果

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

字符串不换行

{
  console.log(String.raw`Hi\n${1+2}`); // Hi\n3，不换行
  console.log(`Hi\n${1+2}`); // Hi换行3，换行
}