es6-字串擴充套件

littlebirdflying發表於2018-09-16
字串套件

字串新增特性

  • 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，換行
}
複製程式碼

相關文章