Cory Rylan

My name is . Google Developer Expert, speaker, and Software Developer at VMware Clarity Design System.

Follow @coryrylan
JavaScript

JavaScript ES6 Template Strings

Cory Rylan

- 1 minute

The ES2015 or also known as ES6 version of JavaScript introduces many new syntax features to the language. One of the new features added are Template Strings. Template Strings add new functionality and syntactic sugar to our code. Let look at a traditional way of creating and building a multi line strings in JavaScript prior to ES6.

// Use +
var heading = 'All about JS';
var content = 'Stuff about JS';
var htmlTemplate =
'<div>' + '<h3>' + heading + '</h3>' + '<p>' + content + '</p>' + '</div>';

// Or Use arrays
var htmlTemplate2 = [
'<div>',
'<h3>',
heading,
'</h3>',
'<p>',
content,
'</p>',
'</div>'
].join('');

Prior to ES6 building templates or strings natively the + operator was one of the only choices. This made creating dynamic strings ugly and not very fun to work with. Now lets look at an example that uses ES6 Template strings.

// Use Template Strings
var heading = 'All about JS';
var content = 'Stuff about JS';
var htmlTemplate = `<div>
<h3>
${heading}</h3>
<p>
${content}
</p>
</div>
`
;

Using Template strings we get multi line string support along with object templates. Notice the syntax differences between the ES5 and ES6 versions. In our ES6 Template String we use a back tic ` instead of a quote. This tells the JavaScript engine that this line is a template string instead of a standard string. The second part it the ${} syntax. This allows us to insert variables into our strings without the need of concatenation operations. Together this creates a much cleaner and easier syntax to work with. The Template String is treated as an expression so we can also have operations in our ${} syntax.

// Use Template Strings
var htmlTemplate = `<div>
<p>
output:
${2 + 2}
</p>
</div>
`
;
console.log(htmlTemplate); // output: 4

ES6 Template strings adds a nice syntactic sugar to JavaScript improving the overall development experience. To start using ES6 today check out the ES6 transpiler Babel.js.

 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

JavaScript

Use JavaScript Date Objects with the HTML5 Date Picker

Learn how to easily use both the native HTML5 datepicker and JavaScript Date objects together.

Read Article
Web Performance

Design System Performance with Clarity Core Web Components

Learn how to build high performance UI and Design Systems on the Web using Clarity Core.

Read Article
Web Components

State of Web Components in 2020

Learn a brief overview on Web Components and the latest tech available to build and distribute components across the Web.

Read Article