- Read Tutorial
- Watch Guide Video
In this guide I'm going to talk about how to use string interpolation. Now if you have never heard of the word string interpolation or it sounds a little bit fuzzy to you the way it works is you can imagine that you have a long message filled with text just like this. ”A long message filled with text” but let's say that somewhere in the middle of it or at the end or anything like that you want to actually slide some content in. So what if we had the message and you wanted to say a long message to and then play you know someone's name right here. ”A long message to ‘someone’s name’ filled with text” you obviously you want to grab that from a variable or get it from the user or something like that. JavaScript has a couple ways of doing that. So we want the ability to slide code that will be rendered inside of this text copy. So you know what there are two ways to do it. One is a standard way and then the other one is going to be more of a typescript kind of way.
Concatenation
So let me show you exactly how to do one version of this. So one is to concatenate them by using the plus sign and I can create a variable some create a variable called message. Make it of type string and I'm going to say just my name inside. Now to get this to print out one I need to put it in a console log statement but a semi-colon at the end. And then right in the middle here I can call the variable message. Now if I run this.
var msg : string = “Jordan”; console.log(“A long message to “ + msg + “ filled with text”);
And run node 006_5_string_interpolation you can see that this prints out and says along Ness's to Jordan filled with text. So that is definitely one-way of doing it. However typescript has another way that we can use that you'll see especially in angular development is a very popular way of doing it.
TypeScript Interpolation
And the way that you can do it is get rid of the quotation marks and I'm going to get rid of the ones here in the beginning and the end and I'm going to replace it with a single back tick. Now if you've never used a back tick before it is the character that is on the top left hand side of your screen right below the escape button. And so you're going to place one at the beginning one at the end. Now what you can do is use this syntax where you say $ and then curly braces and then anything inside of here you can fill with variables you can fill with regular function anything like that and it will be interpreted and will print out the exact same way. So let's run this code and you can see that both of those worked perfectly.
var msg : string = “Jordan”;
console.log(“A long message to “ + msg + “ filled with text”);
console.log(`A long message to ${msg} filled with text`);
So these are a couple different ways of how to use JavaScript interpellation and specifically how to use typescript based string interpellation. You'll see me use this first version quite a bit through the course part of that is because I've been using JavaScript for so many years I'm just very used to using this syntax and it's kind of a default habit that I'd fall into. However in typescript programs especially the ones used in Angular, this format is when you're going to be seen a lot.
So I definitely recommend become familiar with both. Remember that any valid JavaScript will can be processed in typescript. So using this format would work perfectly fine in a typescript program but I want you to be familiar with both options and definitely feel free to experiment with them see which one you prefer the most. And that's how you can use string interpolation in typescript in JavaScript programs.