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)

Share this postShare on FacebookDigg thisShare on Google+Share on LinkedInShare on RedditTweet about this on Twitter
  • Guilherme Natal de Mello

    Thanks @brunanataloshiro:disqus. Yes, you can use “var” instead of “let” without problem, but if you are already using ES6, why not to use “let”?