Boost Your JavaScript with ES6: Templates, Multiline Strings, Defaults, and Destructuring

ES6 (ECMAScript 2015) was released last year, bringing many useful features compared to the older ES5 standard from 2009.

1 Template literals

Instead of concatenating strings, ES6 allows embedding variables directly using back‑ticks.

var param = 'b';
var str = `a ${param} c`;

2 Multiline strings

Long HTML fragments can be written clearly without plus signs and quotes.

var html = `
<div>
  <span>test</span>
</div>
`;

3 Default parameters

Functions can declare default values for parameters, eliminating manual checks.

function foo(width = 600, height = 300) {
  // ...
}

4 Destructuring assignment

Object properties can be extracted into variables in a single statement.

var data = {name: 'dys', age: 1};
var {name, age} = data;

Other notable ES6 improvements include arrow functions, Promises, and classes.

Using ES6 with Babel

Because browser compatibility can be an issue, Babel can transpile ES6 code to ES5.

Install the required tools:

$ npm install -g babel-cli
$ npm install gulp
$ npm install --save-dev gulp-babel
$ npm install --save-dev babel-preset-es2015

Create a test file a.js: var str = `hi ${name}`; Set up gulpfile.js to run Babel:

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("a.js")
    .pipe(babel({presets: ['es2015']}))
    .pipe(gulp.dest("dist"));
});

Run the compilation with: $ gulp After execution, the transpiled file appears in the dist directory.