ES6 对String做的常用升级优化

ES6

1.let有什么用，为什么有了var还要使用let

在ES6之前，声明变量只能用var，var声明变量有很多不合理的点，准确的说是因为ES5中没有块级作用域是很不合理的，甚至可以说是一门语言级别的bug（这也是很多C++，java人员看不懂、瞧不起JavaScript语言的原因之一）。

java语言是sun公司创建作者是詹姆斯·高斯林，在当年非常火。

sun高层不懂技术，要求下属创建另外像java一样火爆的语言，于是Brendan Eich 用了两周时间（10天）创建了JavaScript，实际上JavaScript根java毫无关系，也是由于时间紧促，所以js存在很多不合理的地方。

 

没有块级作用域会带来很多难以解释的问题，比如for循环var变量泄露，变量覆盖问题，let声明的变量拥有自己的块级作用域，且修复了var声明带来的变量提升问题。

console.log（a）//报错

let a

//let不存在变量提示，var存在

console.log（a）//undefined

var a

　

2.ES6对String字符串类型做的常用升级优化

（1）优化部分

ES6新增了字符串模板，在拼接大段字符串时，用反引号(`)取代以往的字符串相加的形式,能保留所有空格和换行，使得字符串看起来更加直观、优雅。

var x=100
​
div1.style.width=x+'px'
​
//用ES6模板字符串
​
div1.style.width=`${x}px`
​
//传统写法，不允许换行，读写性差
​
 li.innerHTML= '<div class="topPipe" style="height: '+topHeight+'px"><img src="img/up_pipe.png" alt=""></div> <div class="bottomPipe" style="height: '+bottomHeight+'px"> <img src="img/down_pipe.png" alt=""> </div>'

　　

　　//ES6模板字符串，允许换行和空格，读写性强

 li.innerHTML = 
​
 `<div class="topPipe" style="height: ${topHeight}px">    <img src="../public/img/up_pipe.png" alt="">    </div>    <div class="bottomPipe" style="height: ${bottomHeight}px">    <img src="../public/img/down_pipe.png" alt="">    </div>`
​
  <div class="topPipe" style="height: ${topHeight}px">
  <img src="../public/img/up_pipe.png" alt="">
  </div>
  <div class="bottomPipe" style="height: ${bottomHeight}px">
  <img src="../public/img/down_pipe.png" alt="">
  </div>
`

　　

（2）升级部分

ES6在String原型上新增了includes（）方法，用于取代传统只能用indexOf查找包含字符串的方法（indexOf返回-1表示没查到，不如includes（）返回false更明确，语义更清晰），此外还新增了startsWith（）、endsWith（）、padStarts（）、padEnd（）、repeat（）等方法，可更加方便的用于查找、补全字符串。

let str='Hello,world!'

//console.log(str.indexOf('m'))// -1

//console.log(str.includes('o'))//true

//startsWith判断是否以某字符串开始
console.log(str.startsWith('Hello'))//true
//正则方式判断是否某字符串开头
console.log(/^Hello/.test(str))//true


//endsWith判断是否以某字符串结束
console.log(str.endsWith('!'))//true
//正则方式判断是否某字符串结尾
console.log(/!$/.test(str))//true

//endStart是前面填充
const arr=[]
for(let i=1;i<=12345;i++){
	arr.push((i+'').padStart(5,'0'))
	//padStart(位数，填充物)
}
console.log(arr)

//padend是后面填充，与上述类似

//repeat()
//将字符串自我复制n次

console.log(str.repeat(4))
//Hello,world!Hello,world!Hello,world!Hello,world!

　　

​