ECMA Script 6_字符串_擴展_字符 是4字節仍是2字節？_模板字符串

ES6 字符串擴展

ES6 增強了對 Unicode 的支持，而且擴展了字符串對象

• 字符 的 Unicode 表示法

容許採用 \uxxxx 形式表示一個字符，

其中 xxxx 表示字符的 Unicode 碼點

 

• 這種表示法只限於碼點在 \u0000 ~ \uFFFF 之間的字符。
• "\u0061"    // "a"
  
• 超出這個範圍的字符，必須用兩個雙字節的形式表示
• "\uD842\uDFB7"    // "𠮷"
• \u 後面的碼點 超過0xFFFF的數值（好比\u20BB7），JavaScript 會理解成\u20BB+7。
• 因爲 \u20BB 是一個不可打印字符，因此只會顯示一個空格，後面跟着一個 7
• "\u20BB7"    // " 7"
• ES6 對這一點作出了改進，只要將碼點放入大括號，就能正確解讀該字符，而無須雙字節

• "\u{20BB7}" // "𠮷"
• "\u{41}\u{42}\u{43}" // "ABC"
• let hello = 123;
• hell\u{6F} // 123
• console.log('\u{1F680}' === '\uD83D\uDE80'); // true
• 因此，在 ES6 中，共有 6 中方式表示一個字符

• console.log('\z' === 'z');    // true
  console.log('\172' === 'z');    // true
  console.log('\x7A' === 'z');    // true
  console.log('\u007A' === 'z');    // true
  console.log('\u{7A}' === 'z');    // true

• ES6 提供了 codePointAt 方法，可以正確處理 4 個字節儲存的字符，返回一個字符的碼點

• let s = '𠮷a';
  
  s.codePointAt(0);    // 134071
  s.codePointAt(1);    // 57271
  
  s.codePointAt(2);    // 97

總之，codePointAt 方法會正確返回 32 位的 UTF-16 字符的碼點。

對於那些兩個字節儲存的常規字符，它的返回結果與 charCodeAt 方法相同

• codePointAt 方法返回的是碼點的十進制值，若是想要十六進制的值，可使用 toString 方法轉換一下

• let s = '𠮷a';
  
  s.codePointAt(0).toString(16);    // "20bb7"
  s.codePointAt(2).toString(16);    // "61"

• 測試一個字符由兩個字節仍是由四個字節組成的
  

• function is32Bit(c) {
      return c.codePointAt(0) > 0xFFFF;
  }
  
  is32Bit("𠮷");    // true
  is32Bit("a");    // false

• ES6 提供了 String.fromCodePoint() 方法，能夠識別大於 0xFFFF 的字符，彌補了 String.fromCharCode 方法的不足

• String.fromCodePoint(0x20BB7);    // "𠮷"
  console.log(String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y');    // true

• ES6 對數組擴展了 對字符串包含問題的 API

• let str = 'Hello world!';
  
  str.startsWith('Hello');    // true 是否以 'Hello' 開頭
  str.endsWith('!');    // true 是否以 '!' 結尾
  str.includes('o');    // true 是否包含 'o'

支持 兩個參數

• let str = 'Hello World!';
  
  str.startsWith('world', 6);    // true 從第 n 個開始，以後字符串 是否以 world' 開頭
  str.endsWith('Hello', 5);    // true 從第 n 個開始，以前的字符串 是否以 'Hello' 結尾
  str.includes('Hello', 6);    // false 從第 n 個開始，以後的字符串 是否包含 'Hello'

• str.repeat(2);    // ES6 擴展 API，將 str 重複 2 次返回新字符串，而不影響 原字符串 str

若是傳入參數爲小數，則向下取整

• 'na'.repeat(2.9);    // "nana"    等同於 'na'.repeat(2)
  
  // 負數， 或者 infinity 會報錯
  'na'.repeat(Infinity);    // RangeError
  'na'.repeat(-1);    // RangeError

若是是字符串，則轉換爲 Number 類型

• 'na'.repeat('na');    // ""
  'na'.repeat('3');    // "nanana"
  
  'na'.repeat(NaN);    // "" 至關於 0
  'na'.repeat(-0.9);    // "" -1 到 0 之間，至關於 0

• ES6 引入字符串補全長度的功能，從頭補全 str.padStart()，或者從尾補全 str.padEnd()

第一個參數 指定最大字符串長度，第二個參數用於補全的字符串

• 'x'.padStart(5, 'ab');    // 'ababx'
  'x'.padStart(4, 'ab');    // 'abax'
  
  'x'.padEnd(5, 'ab');    // 'xabab'
  'x'.padEnd(4, 'ab');    // 'xaba'

若是 最大長度 大於 原字符串，則補全不生效，返回原字符串

• 'abc'.padStart(2, 'ab');    // 'abc'
  'ccc'.padEnd(2, 'ab');    // 'ccc'

若是省略第二個用於補全的字符串，則 默認以空格補全

• 'a'.padStart(4);    // '   a'
  'b'.padEnd(4);    // 'b   '

• 應用：
• 爲數值補全指定位數。下面代碼生成 10 位的數值字符串

• '1'.padStart(10, '0');    // "0000000001"
  '12'.padStart(10, '0');    // "0000000012"
  '123456'.padStart(10, '0');    // "0000123456"

• 生成 字符串格式。

• '12'.padStart(10, 'YYYY-MM-DD');    // "YYYY-MM-12"
  '09-12'.padStart(10, 'YYYY-MM-DD');    // "YYYY-09-12"

• ES6 引入了模板字符串

模板字符串（template string）是加強版的字符串，用反引號（`）標識。

它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量

模板字符串的大括號內部，就是執行 JavaScript 代碼，所以若是大括號內部是一個字符串，將會原樣輸出

• // 普通字符串
  `In JavaScript '\n' is a line-feed.`
  
  // 多行字符串
  `In JavaScript this is
   not legal.`
  
  console.log(`string text line 1
  string text line 2`);
  
  // 字符串中嵌入變量
  let name = "Bob", time = "today";
  `Hello ${name}, how are you ${time}?`    // 變量必須寫在 `${}` 裏面

若是在模板字符串中須要使用反引號，則前面要用反斜槓轉義

• let greeting = `\`Yo\` World!`;

模板字符串表示多行字符串，全部的空格和縮進都會被保留在輸出之中

• $('#list').html(`
  <ul>
      <li>first</li>
      <li>second</li>
  </ul>
  `);

花括號內 能夠放入表達式，進行計算

• let x = 1;
  let y = 2;
  
  console.log(`${x} + ${y} = ${x + y}`);     // "1 + 2 = 3"
  
  console.log(`${x} + ${y * 2} = ${x + y * 2}`);    // "1 + 4 = 5"
  
  let obj = {x: 1, y: 2};
  console.log(`${obj.x + obj.y}`);    // "3"

模板字符串之中還能調用函數

• function fn() {
      return "Hello World";
  }
  
  console.log(`foo ${fn()} bar`);    // foo Hello World bar

• 標籤模板： 特別的函數調用方式

•     let a = 5;
      let b = 10;
  
      function tag(s, v1, v2) {
          console.log(s[0]);
          console.log(s[1]);
          console.log(s[2]);
          console.log(s[3]);
          console.log(v1);
          console.log(v2);
  
          return "OK";
      }
  
      console.log(tag`Hello ${ a + b } world ${ a * b}RyenToretto`);
      // "Hello "
      // " world "
      // RyenToretto"
      // ""
  
      // 15
      // 50
  
      // "OK"

應用：

• 就是過濾 HTML 字符串，防止用戶輸入惡意內容

• let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
  
  function SaferHTML(templateData) {
      let s = templateData[0];
      
      for (let i = 1; i < arguments.length; i++) {
          let arg = String(arguments[i]);
          
          // Escape special characters in the substitution.
          s += arg.replace(/&/g, "&amp;")
                  .replace(/</g, "&lt;")
                  .replace(/>/g, "&gt;");
          
          // Don't escape special characters in the template.
          s += templateData[i];
      };
      
      return s;
  };

ES6 還爲原生的 String 對象，提供了一個 raw 方法——模板字符串的處理函數

將全部變量替換，並且對斜槓進行轉義，方便下一步做爲字符串來使用

• 返回一個斜槓都被轉義（即斜槓前面再加一個斜槓）的字符串

• String.raw`Hi\n${2+3}!`;    // 返回 "Hi\\n5!"
  
  String.raw`Hi\u000A!`;    // 返回 "Hi\\u000A!"

即便 原字符串的斜槓已經轉義，String.raw() 仍是會進行再次轉義