What are template strings, or template text strings, an alternative Javascript syntax available in ES6 for creating strings with variable interpolation.
In this article we are going to talk about one of the improvements of ES6 applied to the Javascript language, the “Template Strings”, which help us sweeten the syntax in the creation of strings where we want to embed variable content. It is one of the novelties of EcmaScript 2015, of the many that it offers us and that we are reviewing in the .
The template strings, or template text strings, are one of the ES6 tools for working with character strings that can come in very handy to produce clearer Javascript code. Using them is therefore a recommendation since it will facilitate the maintenance of the programs, thanks to the fact that their reading will be easier with a simple glance of the human eye.
The syntax is very simple and very easy to understand, as we will see in this article.
Variable interpolation in strings with traditional Javascript
In a program made in Javascript, and in any programming language in general, it is normal to create strings in which we have to join the content of string literals with the values taken from the variables. We call that interpolation.
var website = “WebDevelopment.com”; var message=”Welcome to ” + website;
That’s very easy to read, but as the code gets more complicated and we have to interpolate the contents of several variables in a string, the code starts to get more convoluted.
var name=”Miguel Angel”; var surname=”Alvarez” var profession = ‘developer’; var profile=”” + first name + ‘ ‘ + last name + ‘ is ‘ + profession;
Maybe you are used to seeing this like this. The code is fine and doesn’t have any problems, but it could be much nicer if you use the template strings.
Create a template string
To create a template string you simply have to use a different character as the opening and closing character of the string. It is the symbol of the grave accent.
var string = `This is a template String`;
Note: The grave accent is not used in Spanish but it is used in other languages such as Catalan or Portuguese. It is an accent that is opposite to the traditional Spanish accent, which is acute.
Uses of template strings
Template strings have several interesting features that, as we said, make the syntax easier. We will see below some of them with example code.
value interpolation
I think the most interesting is the case of interpolation that generates an unclear code so far. Take a look at the code below that would do the same thing as the one we’ve seen above for the profile.
var name=”Miguel Angel”; var surname=”Alvarez” var profession = ‘developer’; var profile = `${firstname} ${lastname} is ${profession}`;
As you can see, within a template string it is possible to place expressions enclosed in braces and preceded by a “$” symbol. Something like ${ expression }.
In the expressions we can place code that we want to dump, once evaluated, inside the string. We generally use them to place variable values, but they would also be used to place mathematical operations, for example.
var sum = `45 + 832 = ${45 + 832}`;
Or something like this:
var operand1 = 7; var operand2 = 98; var multiplication = `The multiplication between ${operand1} and ${operand2} equals ${operand1 * operand2}`;
Line breaks within strings
Until now, if we wanted to make a string with a newline we had to use the “backslash n” escape character.
var longText = “this is a text\nwith several lines”;
With a template string we have the alternative of placing the line break as it is in the code and it will not produce any problem.
var longText = `this is multi-line text`;
conclusion
This is the basics of template strings, which you should use right now in your code, as they allow much improved syntax for common string operations.
Note that there are still some other interesting, more advanced but also useful things that could be done with template strings, which we haven’t covered in this article, but will review later.
Facebook Comments
Disqus