Меняем CoffeeScript на ES6

Последнее время я смотрел в сторону спецификации ES6, это следующая версия JavaScript, и наконец мне представилась возможность использовать её в проекте. За недолгое время использования я понял, что она решает множество проблем, которые пытается решить CoffeeScript, но без радикальных изменений синтаксиса.

ES6 сегодня

Вы можете начать писать на ES6 прямо сейчас, используя транслятор в ES5 6to5. 6to5 поддерживает достаточно много инструментов сборки, в их числе: Broccoli, Grunt, Gulp и Sprockets. У меня всё прекрасно работало со sprockets-es6, а 4.x Sprockets будут поддерживать 6to5 из коробки. Также вы можете попробовать ES6 прямо в браузере в 6to5 REPL.

autocmd BufRead,BufNewFile *.es6 setfiletype javascript 

Классы

В ES6, как и в Coffee, есть поддержка классов. Сравним один и тот же класс написанный на Coffee и на ES6.

CoffeeScript даёт нам такие преимущества как задание переменных экземпляра из параметров, интерполяция строк и вызов функций без скобок:

class Person   constructor: (@firstName, @lastName) ->    name: ->     "#{@first_name} #{@last_name}"    setName: (name) ->     names = name.split " "      @firstName = names[0]     @lastName = names[1]  blake = new Person "Blake", "Williams" blake.setName("Blake Anderson") console.log blake.name() 

В ES6 классам можно определить сеттеры и геттеры:

class Person {   constructor(firstName, lastName) {     this.firstName = firstName;     this.lastName = lastName;   }    get name() {     return this.firstName + " " + this.lastName;   }    set name(name) {     var names = name.split(" ");      this.firstName = names[0];     this.lastName = names[1];   } }  var blake = new Person("Blake", "Williams"); blake.name = "Blake Anderson" console.log(blake.name); 

Если вы пользовались библитеками или фреймворками дополняющими JavaScript классами, вы уже обратили внимание что синтаксис ES6 имеет небольшие различия:

• Нет точки с запятой в конце определения функции
• Нет ключевого слова function
• Нет запятых после каждого определения

Плюс сеттеры и геттеры, которые позволяют использовать функцию name в качестве атрибута.

Интерполяция

Я всегда хотел более мощный синтакс строк в JavaScript. К счатстью ES6 предоставляет, так называемые, шаблоны строк. Сравним строки Coffee и JS с шаблонами строк ES6.

CoffeScript:

"CoffeeScript allows multi-line strings with interpolation like 1 + 1 = #{1 + 1} " 

JavaScript:

"JavaScript strings can only span a single line " +   "and interpolation isn't possible" 

ES6:

`Template strings allow strings to span multiple lines and allow interpolation like 1 + 1 = ${1 + 1} ` 

Можно воспользоваться шаблонами строк в предыдущем примере определения класса изменив геттер name на:

get name() {   return `${this.firstName} ${this.lastName}`; } 

В отличи от конкатенации этот код гораздо чище.

Толстые стрелки

Еще одна фича, делающая Coffee таким привлекательным, — толстые стрелки — есть в ES6. Толстые стрелки позволяют байндить функцию к this. Для начала, посмотрим как мы справлялись без толстых стрелок.

В ES5 мы вынуждены ссылаться на this определяя функцию:

var self = this;  $("buttob").on("click", function() {   // do something with self }); 

Coffee позволяет обходиться без аргументов и скобок вовсе:

$("button").on "click", =>   # do something with this }); 

В ES6 скобки требуется вне зависимости от наличия параметров:

$("button").on("click", () => {   // do something with this }); 

Другие фичи

В ES6 есть и другие возможности о которых стоит упомянуть.

Аргументы по умолчанию

CoffeeScript:

hello = (name = "guest") ->   alert(name) 

ES6:

var hello = function(name = "guest") {   alert(name); } 

Splats

Функции Variadic, “splats” в терминологии Coffee, позволющие принимать N аргументов определив только один. В ES6 они называются “остальные аргументы”.
CoffeeScript:

awards = (first, second, others...) ->   gold = first   silver = second   honorable_mention = others 

ES6:

var awards = function(first, second, ...others) {   var gold = first;   var silver = second;   var honorableMention = others; } 

Деструктурирование

Деструктурирование позволяет сопоставлять массивы и объекты с шаблоном для извлечения конкретных значений.

CoffeeScript:

[first, _, last] = [1, 2, 3] 

ES6:

var [first, , last] = [1, 2, 3] 

Деструктурирование можно использовать в сеттерах, как в предыдущем примере с сеттером name, чтобы сделать код более лаконичным:

set name(name) {   [this.firstName, this.lastName] = name.split(" "); } 

Заключение

Трансляторы ES6 активно разрабатываются и приближаются к CoffeScript по функциональности. Этот пост рассказывает лишь о небольшом количестве возможностей, которые ES6 дает JavaScript. Узнать больше вы можете здесь.

Попробуйте ES6 в своём следующем проекте!

Источник