Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Modernized strings in ES6 JavaScript

Friday, April 14th, 2017 by Servage

ES6ECMAScript 6 (ES6) has brought a lot of great features to JavaScript over the years and continues to do so as the specification is being developed. One of the new features is called template strings, which is often used in for example modern Angular or React development. It allows developers to use strings in more advanced and easier ways. This includes a new way to use multi-line strings, using strings inside variables and more with a cleaner syntax.

Multi-line Strings

You have likely used the concatenation operator (+) or a backslash (\) to make multi-line strings in the past. While this works fine, the syntax is is not very clean and makes the code hard to read. Thanks to template strings in ES6, the backtick character (`) can now be used to write multi-line strings without using any additional characters. Instead of using the normal single or double quotes, wrap your strings with backticks to achieve this.

String Substitution

Quite often you have a sentence with dynamic values inside, such as “You have $14.25 on your account.”. You could print a string like this as follows: console.log(‘You have ‘ + accountBalance + ‘ on your account). Once again, this works fine but it’s not that easy to read.

With ES6, you can use templates. Here is what the above sentence would look like in ES6: console.log(`You have ${accountBalance} on your account`). This not only makes the code shorter but also easier to type and read.

Tagged Templates

This is a little more advanced feature but will definitely be useful in some scenarios. Tagged templates work in a similar fashion compared to string substitution since they also substitute values inside strings. The difference is that with tagged templates you can call functions that modify the embedded values inside your strings.

Let’s say you have a function that that converts every other letter in a word to uppercase and the function is convertCase(word). You could use the function like this: console.log(`foo ${convertCase `foobar`} bar`). This returns “FoObAr”.

These ES6 features should make working with strings both easier and more pleasant. You will certainly find multi-line strings and string substitution being used in modern JavaScript applications, so it is good to know how they work. These are the recommended ways to work with strings in ES6 so if you are working with React, Angular or using other tools for modern JavaScript development, you should go ahead and give these features a try in your own projects.

Modernized strings in ES6 JavaScript, 5.0 out of 5 based on 3 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.