相信很多人也和我一樣，不喜歡這樣循規蹈矩的逐條去學習語法，很枯燥乏味。主要是這樣學完一遍之後，沒過一段時間就忘到九霄雲外了。不如實際用到的時候研究它記得牢靠，所以我就整理成筆記，加深記憶的同時便於復習查看。

在這樣不斷的學習過程中，也提高了自己的總結能力：)

1.字符串的遍歷器接口

ES5，數組和對象可以進行遍歷，使用for() 和 for...in,還有jq中的each()方法進行遍歷。

ES6為我們提供了字符串遍歷器 for...of 循環遍歷

優點：可以識別大於0xFFFF的碼點，傳統的for循環是無法識別的。

 for(let i of ‘hello‘){
    console.log(i);  //
 
依次輸出‘h’ 、‘e’、‘l’、‘l’、‘o’
 }

2.at()方法

ES5中字符串有charAt()方法，返回字符串給定位置的字符，該方法不能識別碼點大於0xFFFF的字符。

‘lemon‘.charAt(0); //‘l‘
‘??‘.charAt(0) // "\uD842"

字符串實例的at方法，可以識別Unicode編號大於0xFFFF的字符，返回正確的字符。

‘lemon‘.at(0); //‘l‘
‘??‘.at(0) // "??"

3.includes()、startsWith()、endsWith()

ES5，有indexOf()方法，確定某個字符串是否包含在另外一個字符串中。

ES6，又提供三種新的方法：

• includes(str,[place])：返回布爾值，表示是否找到了參數字符串。
• startsWith(str,[place])：返回布爾值，表示參數字符串是否在源字符串的頭部。
• endsWith(str,[place])：返回布爾值，表示參數字符串是否在源字符串的尾部。

這三個方法都支持第二個參數，表示開始搜索的位置。

註意：使用第二個參數n 時，endsWith的行為與其他兩個方法有所不同。它針對前n個字符，而其他兩個方法針對從第n個位置直到字符串結束。

 var
 
 s1 = ‘Hello world!‘;

 s1.startsWith(‘Hello‘) // true
 s1.endsWith(‘!‘) // true
 s1.includes(‘o‘) // true
//-------------------------------
var s2 = ‘happy day!‘;

  console.log(s2.startsWith(‘day‘, 6)); // true，表示從第0個字符開始
  console.log(s2.includes(‘day‘, 6)); // true，表示從第0個字符開始

  console.log(s2.endsWith(‘happy‘, 5)); // true,表示前5個字符

  console.log(s2.includes(‘happy‘, 0)); // true，表示從第0個字符開始

4.repeat()方法

該方法返回一個新字符串，表示將原字符串重復n次。

根據其參數類型分為以下幾種：

（1）參數是正整數；

（2）參數是小數，會被取整；

（3）參數是負數或Infinity會報錯，如果參數是0到-1之間的小數，則等同於0；

（4）參數是NAN 等同於0;

（5）參數是字符串，則會先轉換成數字；

  //1.參數是正整數
  console.log(‘hello‘.repeat(2)) // "hellohello"
  console.log(‘na‘.repeat(0)) // ""
  //2.參數是小數
  console.log(‘na‘.repeat(2.9)) // "nana"
  //3. 參數是Inifinity
  console.log(‘na‘.repeat(Infinity))
  //4. 參數是負數
  // RangeError
  console.log(‘na‘.repeat(-1))
  // RangeError
  //5. 參數是0~-1之間的小數
  console.log(‘na‘.repeat(-0.9)) // ""
  //6. 參數是NAN
  console.log(‘na‘.repeat(NaN)) // ""
  //7. 參數是字符串
  console.log(‘na‘.repeat(‘na‘)) // ""
  console.log(‘na‘.repeat(‘3‘)) // "nanana"

5.padStart()、padEnd()字符串補全長度方法

padStart()用於頭部補全，padEnd()用於尾部補全。

padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串。

這裏我們也根據其參數分為以下幾種類型：

（1）若原字符串的長度，等於或大於指定的最小長度，則返回原字符串。

（2）若用來補全的字符串與原字符串，兩者的長度之和超過了指定的最小長度，則會截去超出位數的補全字符串。

（3）如果省略第二個參數，默認使用空格補全長度。

  //1.正常情況
  console.log(‘x‘.padStart(4, ‘ab‘) )// ‘abax‘
  console.log(‘x‘.padEnd(5, ‘ab‘)) // ‘xabab‘

  // 2.原字符串的長度，等於或大於指定的最小長度
  console.log(‘xxx‘.padStart(2, ‘ab‘)) // ‘xxx‘
  console.log(‘xxx‘.padEnd(2, ‘ab‘)) // ‘xxx‘
  // 3.補全的字符串與原字符串，兩者的長度之和超過了指定的最小長度
  console.log(‘abc‘.padStart(10, ‘0123456789‘))// ‘0123456abc‘
  // 4.省略第二個參數
  console.log(‘x‘.padStart(4)) // ‘   x‘
  console.log(‘x‘.padEnd(4)) // ‘x   ‘

padStart的常見用途：

（1）為數值補全指定位數。下面代碼生成10位的數值字符串。

（2）提示字符串格式。

//為數值補全指定位數
‘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"

6.模板字符串

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

它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

如果在模板字符串中需要使用反引號，則前面要用反斜杠轉義。如下：

 var string = `\`Hello\` World!`;
 console.log(string);//`Hello` World!

如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。若不想要這個換行，可以使用trim方法消除它。

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

模板字符串中嵌入變量，需要將變量名寫在${}之中。

大括號內部可以放入任意的JavaScript表達式，可以進行運算，以及引用對象屬性。

var x = 1, y = 2,obj = {x: 1, y: 2};

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

  console.log(`${obj.x + obj.y}`);// 3

模板字符串之中還能調用函數。如下：

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`// foo Hello World bar

模板字符串甚至還能嵌套。

7.標簽模板

8.String.raw()方法

ES6還為原生的String對象，提供了一個raw方法。

用來充當模板字符串的處理函數，返回一個斜杠都被轉義（即斜杠前面再加一個斜杠）的字符串，對應於替換變量後的模板字符串。

如果原字符串的斜杠已經轉義，那麽String.raw不會做任何處理。

String.raw方法可以作為處理模板字符串的基本方法，它會將所有變量替換，而且對斜杠進行轉義，方便下一步作為字符串來使用。

String.raw方法也可以作為正常的函數使用。這時，它的第一個參數，應該是一個具有raw屬性的對象，且raw屬性的值應該是一個數組。

String.raw({ raw: ‘test‘ }, 0, 1, 2);
// ‘t0e1s2t‘

// 等同於
String.raw({ raw: [‘t‘,‘e‘,‘s‘,‘t‘] }, 0, 1, 2);

9.模板字符串的限制