es6 字符串的擴展

es6字符串添加了不少新功能，固然也有不少關於字符串編碼的一些學習性東西，在這裏我們就很少作介紹，
介紹一下經常使用的一些方法

字符串的遍歷接口

es6中字符串擴展了遍歷器接口

for(let i of 'abcdef'){
    console.log(i) // a,b,c,d,e,f
}

其實看起來和其餘的遍歷長的挺像的，那咱們來看看它是否除了能遍歷字符串以外，還可否遍歷其它類型呢

那咱們來試一下數組類型,會像咱們預想的那樣會獲得遍歷的值

for(let i of [1,2,3]){
    console.log(i) // 1,2,3
}

看一下對象的類型的遍歷
for(let i of {a:1,b:2}){
    console.log(i) // 報錯
}

上面遍歷對象是會報錯的，由於for of 是不能直接枚舉普通對象的，除非這個對象有Iterator接口才能使用，Iterator接口在這裏就很少說了，之後的文章會對它進行講解的

for of 循環遍歷器還能夠配合break(直接跳出) continue（跳出繼續執行） return （在函數內使用）配合使用跳出循環
for (let a of '123456') {
    if (a ==='1') {
        break
    }
    console.log(a) // 1
}

有時間的話你們不妨能夠試一下

字符串includes（），startsWith（），endsWith（）方法

es5中提供了indexOf方法來肯定查找的字符串是否在其中，如今又多了三個，是否是很開心！！！

1. includes方法返回布爾值，是否在字符串其中

   let str = 'this is es6'
      str.includes('es6')// true
      這個方法還支持第二個參數，那就是選擇位置搜索，從0開始算，空格也會算位置,是從當前位置日後搜索，也算當前的位置
      let str = 'this is es6'
      str.includes('i'， 5) // true
      搜索多個也是能夠的，固然若是位置超過es6的真實位置會查找不到
      str.includes('es6', 5) // true

2. startsWith方法返回布爾值，是否在字符串的頭部

   let str = 'is heard'
      str.startsWith('is') // true
      
      str.startsWith('i') // true
      
      str.startsWith('is heard') // true
      
      str.startsWith('h') // false
      
      上邊的第三個爲何也算頭部，在我看來由於把is heaed 看作了總體因此都算頭部，而最後一個false是由於在is heard查找h因此h不算是頭部
      
      這個方法也是有第二個參數的
      str.startsWith('i'， 0) // true
      str.startsWith('is'， 0) // true
      str.startsWith('is'， 1) // false

3. endsWith方法返回布爾值，是否在字符串的尾部

   let str = 'is last'
      str.endsWith('t') //true
      str.endsWith('st') //true，
      str.endsWith('s') //false

   其實這個和上邊的方法startsWith差很少少只不過這個是查找的尾部，那個是查找的頭部

repeat 重複返回一個新的字符串，重複多少次取決於你的參數

參數是 0 到-1 之間的小數，則等同於 0，-0也算0
abc.repeat(3)// abcabcabc

由於不能小於-1，纔會報錯
'abc154789'.repeat(-1) //報錯

大於-1的話會被取整爲0，因此會是空的字符串
'abc154789'.repeat(-0.9999999999) //「」

NaN也會被當作爲0處理
'NaN'.repeat(NaN) // ""

參數也能夠爲字符串,可是也是空由於下面的字符串會被轉爲NaN
'hhh'.repeat('cc') // ''

padStart()，padEnd()Es7的字符串自動補全功能

padStart 咱們來先說一下頭部補全

'aa'.padStart(5, 'xc') // xcxaa
'啊！'.padStart(4, '你好') // "你好啊！"
'好看'.padStart(4, '你長得真') // "你長好看"
'好看'.padStart(4) // "   看"
上面的例子是第一個參數是5，表示要5個字符，第二個參數是補全的參數，從頭部補全xcx,’aa‘是不會變的，固然倒數第二個第一個參數也算限制了文字，因此會從左到右選取剩餘的長度，最後一個的話沒有第二個參數會按四個空格

咱們來看看從後面補全，其實機制和從頭部補全差很少，看一下例子
'aa'.padEnd(5, 'xc') // aaxcx
'啊！'.padEnd(4, '你好') // "啊！你好"

模板字符串

咱們先來看一下什麼是字符串模板,注意不要用單雙引號，要用··，對就是那個

1. 普通的字符串模板
   ·this is 啊啊啊啊·
2. 多行文本的字符串模板
   ·哈哈哈，你好啊
   我是哈哈·
3. 變量的模板字符串
   let a = '你好'
   ${a}啊 // 你好啊

   let str = 'this is'
   ${str}模板 // this is 模板

4. 還可使用函數，可是得把你須要的return出來
   function add () {

   return 123

   }
   ${add()}456 // 123456

5. 模板編譯
   let a = `
   <ul>

   <% for(let i=0; i < 3; i++) { %>
      <li><%= i %></li>
    <% } %>

   </ul>`

   上面會被輸出爲
   <ul>

   <li>0</li>
      <li>1</li>
      <li>2</li>

   </ul>

   咱們再來看看下面這個,大家猜函數會執行嗎
   let html = `
   <div>

   <h5 @click=${add()}>5</h5>
      <h4>4</h4>
      <h3>3</h3>
      <h2>2</h2>

   </div>
   `
   function add() {

   alert(123)

   }

String.raw字符串的模板

let s1 = 'qwe', s2 = '123'
 String.raw`${ s1 + s2 }` // qwe123
 
 下面這種是左邊的參數會被分爲['h','e','l','l','o'],而後就是左邊一個參數逗號右邊一個開始補
 String.raw（{raw: 'hello'}, 123）// h123ello
 
 第二個參數爲對象的話是不會被分解的哦
 String.raw({ raw: 'hello' }, {aa: 'ooo'});"h[object Object]ello"