ES6

ES6学习笔记5:字符串的新面貌

Posted by mieruko on 2016-12-09

前言

ES6中的字符串要登场啦！！
这一篇会写的有点杂，因为我想把字符串一锅端哈哈哈哈哈哈～～

新增字符串方法

查找

以前我们如果想要在字符串里面找一个字母，我们这样做: 

1
console.log("yo".indexOf("Y") !== -1);

我们用indexOf方法，如果可以返回一个非-1索引，那么就存在,否则不存在。
在ES6中，有了一个更好的办法： 

1
console.log("yo".includes("Y"));

字符串对象多了一个includes方法，直接返回布尔值，当我们只想知道它是否存在，而不care
它存在于哪里时，就可以这样啦！

开始和结束

直接看代码：

startsWith方法

1
console.log("yo".startsWith("a"));

返回的是一个布尔值，判断字符串是否是由某个字母开始的。

endsWith方法: 

1
console.log("yo".endsWith("a"));

返回一个布尔值，判断字符串是否是由某个字母结束的。

重复

很厉害的一个方法: 

1
console.log("yo".repeat(300));

楼上这个repeat方法返回一个字符串对象，这个对象的内容就是把yo重复了300次哈哈哈哈哈。

新的字符串概念————模版字符串

曾经我们想要在html里面嵌套js变量的时候: 

1
var tpl = "<div>" + "<span>" + title + "</span>" + "</div>";

巨丑，而且写的如果很长的话，读起来特别困难。
在ES6中如果想要这样做，会舒服很多： 

1
2
3
4
5
let tpl = `
<div>
   <span>${title}</span>
</div>
`

注意中间的那个写法，是${}中间填变量名，这样就行了。很好看，少写了很多代码。
我们所有的缩进都会以我们输入的那种形式输出。

值得一提的是，我们可以往模版字符串里面再写一个模版字符串。 

1
2
3
4
5
6
7
let tpl2 = `
<div>
   <span>${title + `
      <span>${1234}</span>
    `}</span>
</div>
`

结语

ES6让字符串变得更强了！！

FEATURED TAGS
ES6