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.
Basic String Concatenation In ES5
To concatenate strings in the current version of JavaScript, you have to do something like:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function greetUser( prefix, firstName, lastName ) { | |
| var greeting = 'Hello ' + prefix + ' ' + firstName + ' ' + lastName + '!'; | |
| return greeting; | |
| } | |
| console.log( greetUser( 'Mr.', 'Tony', 'Stark' ) ); // Hello Mr. Tony Stark! |
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function messageUser( prefix, firstName, lastName ) { | |
| var message = 'I hope you can read my mind and understand how terrible \ | |
| concatenating strings are in the current version of \ | |
| JavaScript ' + prefix + ' ' + firstName + ' \ | |
| ' + lastName + '. There nothing fun about it. Just a \ | |
| whole lot of pain and yawn mode'; | |
| return message; | |
| } | |
| messageUser( 'Prof.', 'Charles', 'Xavier' ); |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var message = [ | |
| 'I hope you can read my mind and understand how terrible', | |
| 'concatenating strings are in the current version of', | |
| 'JavaScript <%= prefix %> <%= firstName %> ', | |
| '<%= lastName %> There nothing fun about it. Just a', | |
| 'whole lot of pain and yawn mode' | |
| ].join( '\n' ); | |
| console.log( message ); |
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.
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 (`):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var template = `Simply use backticks to create a string template.`; | |
| console.log( template ); |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var template = `You can type some text on the first line. | |
| Then jump down to the next line. | |
| You can even use tabs right inside the templates.`; |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function greetUser( prefix, firstName, lastName ) { | |
| var greeting = `Hello ${ prefix } ${ firstName } ${ lastName }!`; | |
| return greeting; | |
| } | |
| console.log( greetUser( 'Mr.', 'Tony', 'Stark' ) ); // Hello Mr. Tony Stark! |
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.
Leave a Reply