ES6-字符串扩展

(1)
for···of循环。ps：可以使用break，找到合适的值后不再执行后面的循环，若想获得下标，可使用for(let v of arr.keys())

for (let i of 'foo') {
  console.log(i) 
}
//f
//o
//o

for...of循环不会循环对象的key，只会循环出数组的value，因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in
如果实在想用for...of来遍历普通对象的属性的话，可以通过和Object.keys()搭配使用，先获取对象的所有key的数组然后遍历：

var student={
    name:'zhangsan',
    age:20,
    address:{
        country:'china',
        city:'shenzhen',
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}

(2)
includes() 返回布尔值，表示是否找到了参数字符串。
startsWith() 返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith() 返回布尔值，表示参数字符串是否在源字符串的尾部。

var str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
str.includes('o') // true

这三个方法都支持第二个参数，表示搜索的位置。endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

str.endsWith('Hello', 5) // true
str.includes('Hello', 6) // false

(3)
repeat() 返回一个新字符串，表示将原字符串重复n次。参数如果是小数，会被取整（取小）。

str.repeat(n)

(4)
padStart() 用于头部补全
padEnd() 用于尾部补全

'abc'.padEnd(5,'x') //abcxx

var year = new Date().getFullYear();
var month = (new Date().getMonth() + 1)>9?(new Date().getMonth() + 1) : '0'+(new Date().getMonth() + 1);
var day = new Date().getDay()>9?new Date().getDay() : '0'+new Date().getDay();
console.log('2'.padStart(10,year+'-'+month+'-'+day));          //2017-06-02
console.log('2-24'.padStart(10,year+'-'+month+'-'+day));       //2017-02-24
console.log('09-16'.padStart(10,year+'-'+month+'-'+day));      //2017-09-16
console.log('17-09-16'.padStart(10,year+'-'+month+'-'+day));   //2017-09-16

(5)模板字符串

var name = "乐美";
document.getElementById('wrap1').innerHTML = `<div>${name}，知道吗，这样就不用
<span style="color:red;">引号和加号</span>了
</div>`;

document.getElementById('wrap2').innerHTML = (`
<ul>
<li>li1</li>
<li>li2</li>
</ul>`.trim());//.trim()去掉换行

function fn(){
    return 'hellow'
}
console.log(`${fn()} world`)

(6) 模板编译（实例）

function compile(template){
  var evalExpr = /<%=(.+?)%>/g;
  var expr = /<%([\s\S]+?)%>/g;
// .(点)查找单个字符，除了换行和行结束符。
// \s（小写s）是指空白，包括空格、换行、tab缩进等所有的空白，而\S（大写S）刚好相反。[\s\S]这样一正一反，表示所有的字符，完全的，一字不漏的。
// ?（问号）表示懒惰模式，只找到一个就停下来。其实上面的正则evalExpr 只要带上‘?’，就可以直接换成用[\s\S]匹配，没必要用‘.+’，因为他只要找到第一个‘%>’就会停下来。

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');//$1 表示正则里面 第一个小括号里面的内容，类似还有$2,$3

  template = 'echo(`' + template + '`);';
  var script =
  `(function parse(data){
    var output = "";
    function echo(html){
      output += html;
    }
    ${ template }
    return output;
  })`;
  return script;
}

var template = (`<ul>
    <% for(var i=0;i<data.supplies.length;i++){ %>
        <li><%= data.supplies[i] %></li>
    <% } %>
</ul>`)
var parse = eval(compile(template));
document.getElementById('wrap3').innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });