JasperValero.com

JavaScript

An Intro To The Delightful JavaScript ES6 String Templates

Posted on .

An Intro To The Delightful JavaScript ES6 String Templates

Introduction

Finally, JavaScript is getting some much-needed improvements. It offers a new feature that will help you create templates from strings. In this post, I’ll provide a super quick introduction to ES6 string templates so you can start using them immediately. I’ll also tell you why they’re one of my favorite new features. One of the best motivators to learning something new is seeing how it will improve your workflow. Get ready to sigh in delight!

Facerolling With ES5 String Concatenation

In ES5, templating with strings isn’t much fun at all. You can follow best practices and make life a little bit easier. There isn’t much to get excited about though.

Facerolling Without ES6 String Templates

Basic String Concatenation In ES5

To concatenate strings in the current version of JavaScript, you have to do something like:

It is a bit annoying how many s and +s you have to use just to form such a short sentence. It doesn’t make your code very readable. There are a lot of extra characters just to output a simple string. The issue only compounds the longer the string is that you want to build.

Multi-line String Concatenation In ES5

If you have a long string you want to concatenate in ES5 then you must use the \ like so:

This method is as close as you get to something like PHP’s heredoc syntax. It still falls short, and you still have to use the and + along with your \. Ugh! It looks and feels so nasty.

Hackery With array.join()

Another trick I’ve used in the past when creating strings for use with templating engines is the array.join( ‘\n’ ) method:

With this method, every new line is an element within in an array. You then join them all together to form one string. The above example uses Underscore.js template variables to pass in the dynamic values.

All those methods are less than ideal. You’re forced to use JavaScript’s extreme flavor lacking string concatenation. The alternative is to use hackery to try and make things a bit easier for yourself. The great news is that all that is going away with ES6 string templates.

New ES6 String Templates Are Sweet

Concatenation and templating are a whole lot easier with ES6 string templates.

ES6 String Templates Are So Sweet

The first thing to realize is that string templates aren’t actual JavaScript strings. They are brand new to JavaScript. They are almost the same as strings, but when you use them you have a lot more firepower at your disposal. Allow me to explain how you use them.

Creating An ES6 String Template

To create a string template all you have to do is wrap it in backticks (`):

Easy right? The hardest part is not mistaking the backtick for a single quote. Perhaps overcoming muscle memory from wrapping strings with single quotes for years will take a few days as well. Now let’s get into the good stuff you can do with them.

New Lines And Whitespace Are Free With ES6 String Templates

With ES6 string templates, you don’t have to worry about managing new lines or whitespace. They are both respected within the templates with any extra work. You can even use tabs.

Interpolation With ES6 String Templates

What would templates be without an easy way to pass in dynamic data? ES6 string templates support interpolation of variables for outputting dynamic values into your templates. This feature is one of my favorite parts.

Remember the greetUser() function above in the first code example?

We can rewrite it like so:

No more +s and s. You get the same output and t is much easier to envision the final result of the string. Code readability levels up!

Conclusion

Now that you see what ES6 string templates have to offer you should be itching to try them out. Writing templates for your JavaScript applications will never be the same. Say goodbye to linebreak hell and array joins forever!

Don’t wait. Go find some of your existing JavaScript templates and try converting them over to ES6 string templates. I’m sure you’ll be glad you did. Refer to this post as a reference. Post a comment if you get stuck, and I’ll try to point you in the right direction.

I hope you found this post useful. If you’re looking to learn more about ES6, then make sure to check out my earlier posts: You Need To Know That ES6 Has Arrived, and Why JavaScript ES6 Arrow Functions Will Make You Happy. You should also subscribe to my mailing list and check back often as I’ll be continuing to write about ES6 over the next few weeks.

profile

Jasper Valero

http://jaspervalero.com

Rockstar engineer working hard to dent the universe.

Navigation