ES6: Template strings

template strings

Quick post about template strings. If you are learning Ecmascript 6, you should read this post. This is the new way to embed variables in texts.


Template strings are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.

Template strings are enclosed by the back-tick (` `). So if you don’t have been using the back-tick, you should find it now on your keyboard, it will be very used from now.

To embed a variable in a text, you need to indicate it by the Dollar sign and curly braces (${expression}).



'use strict';

let age = 23;

console.log('I am ' + age + ' years old.'); // normal strings

console.log(`I am ${age} years old.`); // template strings

Multi-line strings

'use strict';

// normal strings

console.log("my text line 1\n" + 
"my text line 2\n" + 
"my text line 3\n" + 
"my text line 4\n");

// template strings

console.log(`my text line 1
my text line 2
my text line 3
my text line 4`);


'use strict';

let a = 13;
let b = 10;

// normal strings

console.log("I am " + (a + b) + " years old and not " + (2 * a + b) + ".");

// template strings

console.log(`I am ${a + b} years old and not ${2 * a + b}.`);


Template strings are already being used and will be used more and more. So if you’re not used to it, get used to!
For you who is studying Ecmascript 6, take a look: (Airbnb JavaScript Style Guide)

Javascript Hoisting


In the previous post, I wrote about strict mode in Javascript and how it is beneficial and helps you to write a better code. For example, to do not forget to declare a variable.

But, did you know that in Javascript you can declare a variable after accessing it?


In JavaScript, functions and variables are hoisted. Hoisting is JavaScript’s behavior of moving declarations to the top of a scope (the global scope or the current function scope).



'use strict';

x = 'Declaring a variable after using it.'; // It works!

var x;


myFunction(10); // It works!

function myFunction(x) {

Cool. You’ve just seen that you can declare variables and functions after accessing them.

Ecmascript 6

Everybody is talking about Ecmascript 6, right? What about changing the example above from var to let and also make an example with class? It should work, right? Let’s see!


'use strict';

x = 'Declaring a variable after using it.'; // ReferenceError

let x;

As you can see, let does not hoist the variable to the top of the block. You need to declare before using it.


var a = new myClass(1, 2); // ReferenceError

class myClass {
    constructor(x, y){
        this.x = x;
        this.y = y;

Class declarations are not hoisted too. You first need to declare and then access it, otherwise code will throw a ReferenceError.


Hoisting is an unknown or overlooked behavior of JavaScript (to many developers). All you need to do to avoid bugs is always declare all variables at the beginning of every scope. Of course, always using the javascript strict mode. If you didn’t see my post about strict mode, check it out:

JavaScript Use Strict


If you’re starting to encode javascript or you are already a javascript programmer and have never seen the strict mode before, check out this post.

About strict mode

I always recommend coding javascript in strict mode. Strict mode makes changes to normal javascript semantics. An important aspect is that the strict mode eliminates silent errors, forcing you to write a better code and don’t make mistakes.

Invoking strict mode

To invoke the strict mode, you just need to write ‘use strict'; in your javascript file, for example.

'use strict';

Now that you already know how to invoke strict mode, let’s see a quick example.

Quick example

'use strict';
foo = 'Guilherme'; // ReferenceError

You need to declare the variable.

'use strict';
var foo = 'Guilherme'; // It works!

Now it works!


As you can see, strict mode can help you a lot to write a better javascript code. If you wanna see more examples and know more how it exactly works, take a look: