学习ES2015 Part 2
Learn New Features in ES 2015 Part 2
String
ES2015中加入了Template String的概念,当我们想要把变量值拼接到字符串中间时,不再需要不停地的使用+
了,这也是我觉得可以欢呼的地方。
具体是这样操作的:JS里普通那个的字符串依旧是用单引号或者双引号包围,但是Template String则用反引号包围(感觉在Markdown里打个反引号真要命)。
过去:
let fullName = firstName + ' ' + lastName;
现在:
let fullName = `${firstName} ${lastName}`
其中我们使用${}
将变量包围起来(怎么总觉得包围这个词怪怪的)。
使用这种这种方式,我们也可以构造多行的长字符串:
let userName = 'Same';
let admin = { fullName: 'Hegwin Wang' }
let aLongText = `Hi ${userName}
This is a very
loooooooooog text.
Regards,
${admin.full_name}
`;
Class
Class 语法
ES2015增加了class的语法,不过据我所知,这只是增加了一个类似语法糖的东西,JS实现OO的本质还是和原先一样。上代码,举个例子:
class TagWidget {
constructor(name,url) {
this.url = url;
//...
}
render() {
let link = this._buildLink(this.url)
// ...
}
_buildLink() {
// ...
}
}
在这一段代码里,我们用class
关键字去声明一个类,然后用大括号包围起来,里面有若干个方法,方法之间不需要用逗号或者分号分隔。
每当我们用new去新建一个实例时,
constructor
中的代码都会被执行,类似Ruby的initialize
。this
访问的内容,是实例属性,或者实例方法。以下划线开头的方法,比如例子中的
_buildLink
,是私有方法。
对于上面声明好的类,我们可以这样调用:
let tagWidget = new TagWidget(name, url);
tagWidget.render();
类继承
假设我们有Widget
这么一个类,打算用作所有widget的父类:
class Widget {
constructor() {
this.bassCSS = 'widget';
}
parse(value) {
// ...
}
}
新的语法中,允许使用extends
用来指定父类,假设TagWidget
现在继承于Widget
类:
class TagWidget extends Widget {
constructor(name, url) {
super();
// ...
}
parse() {
let parseName = super.parse(this.name);
return `Tag: ${parsedName}`;
}
render() {
// ...
}
}
这其中super
可以用来调用父类的方法; 另外TagWidget
中parse的返回值,也是使用上面说的Template String的方法。