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"