Javascript String Concatenation | Javascript Tutorial For Beginners | ES6 Tutorial

why hello hello beautiful people welcome back all right I'm really happy today just because we are a bit of Sun which is awesome I love Sun it's my best friend and in a few days I'm moving back to my home country which means really great internet that means more videos so who because right now it takes me three four hours to upload one video it's crazy the internet here is so bad that I want to I just want to curl up in bed and cry okay so what are we doing today we're gonna learn about string concatenation fancy word for something that's pretty pretty simple so don't worry and I'm gonna show you how we used to do things and then I'm gonna show you how I recommend you to do it now and why we do it now also I got some messages back on my previous video with the functions and when we should use arrow functions or when we should use normal functions I'm gonna cover it a bit later on so you know exactly when to use what I'm gonna cover up cover arrow functions a bit more in depth so don't worry don't worry we're getting there okay so what we learned so far is if we add the plus symbols it's gonna add it together so when it comes to numbers so if we have Const I'm just gonna create a variable called my age and my age is 24 and let's say it calls your age is 21 and what we can do is if we console.log and we just add my age plus your age well that's just gonna add them together age Iggy your Iggy what's your Iggy well look we're gonna have 45 so it just adds everything together now what happens if we use it with strings so I'm gonna delete these two and I'm gonna just gonna do it with strings so I'm gonna add hello my name is plus edy well that is string concatenation it just takes both of the strings and adds them together and makes it one long string so if we take a look we're gonna have hello my name is Edie like so but these are a bit too close together and I'm pretty sure you're not in a relationship so why are these so close together well one problem that we have is we need to add the space in here because this ends with is like so there's no space in here and it just adds it with this together so as you can see there's no space here at the start either so what you can do is just add these space here or here and then it's gonna add the space and there everything is gonna look okay so yeah so that's one issue we have with this and and with the plus because you have to keep in mind the spaces another issue that we have with strings in general is what if we wanna do I'm gonna add single quotes here and this is a question that I know a lot of people wonder and I came when should they use double quotes for a single course it doesn't really matter it's the same thing javascript is gonna read it as a string anyway but there are a few few annoyances here and there again we're gonna do the modern way and it's gonna solve every issue that you have so don't worry so one issue with this is if we say hello it's me add and as you can see we have an issue here because we use the single quote here well to write this correctly right it's is with a single quote above but this breaks alright and it breaks because our quotation starts here and a javascript is like oh okay so we have a string and it ends here because we're closing it here so this doesn't make any sense anymore because we just have one quote here which doesn't close this is an issue how do we solve this well one way to solve this which I don't like but I'm gonna show you is to add a backslash like so so what this does is it basically JavaScript is gonna be like oh okay so you don't actually mean to close the string there you just mean to say it's and it's a form of just writing your text so this if you put it before your single quote it's it's called escaping it and everything is gonna work fine and if I if I save this my code the prettier that we installed is automatically gonna put double quotes but trust me this is gonna work now another way to solve this is well we can have double quotes here so then you will not have any any issues with the single quote all right so if we save this then we won't have any issues so this is another thing that I really don't like and I really don't want you to worry about using either single quotes or double quotes so my rule of thumb is hey when you create a variable like you want to create a string just use single quotes okay so cons name equals e D or headsman that's me that's my name alright even though prettier now how to correct them that's double yeah you shouldn't really worry about this just make sure if you use single or double at least stay consistent with it so if I use another one here just don't use single quotes here just either keep it both with single or or both with double alright so in this case all right I'm gonna use double but when you want to concatenate things so when we want to put together things then we're gonna use something else so let's see I want to console.log and I want to say hello it's me Edwyn all right so rather than using single quotes or double quotes we're gonna use something called backticks which is next to your one so above your tab hit that key and you're gonna have these backticks make sure to use this because otherwise it's not gonna work so what we can do now is just write normal string here and what we can do is say my name is or hello it's me as you can see we don't have any issues with this it's me and my name is now do we use plus here again or outside here no we don't need to do that anymore we can just add a and this kind of looks weird I know but once you get used to it you're only gonna use this I promise so you're gonna use hit dollar sign and curly braces and here you can put in any variable you want name or you can use 20 40 so you can just write normal JavaScript here it's not it's not gonna be a string so we can use name and when we hit save everything is just going to work super nicely we have the single quote there we have the spaces we don't have to worry about this being closed and adding single spaces like this and the great thing is is it's gonna make our lives easier when we want to concatenate a lot of things so by that I mean let's say you want to have so we have a name and we have an age like cell 24 and we're gonna say age and we're gonna console.log so normally you would do something like this hello it's me and then you would leave a space you would add a plus name hello it's me Edwin all right it's gonna get the name variable you would have to add the plus again double quotes and we're gonna say space because we need to leave a space here we're gonna say and my age is enough space here plus outside age variable we're gonna add the hello my name and my age is 24 so we're gonna add the space and 24 plus and I am getting old like so alright so this is how everything looks if you want to concatenate multiple things and I don't know about you but yeah this works fine but I don't really like the way this looks so how can we change this with the new way we learn things and make this a bit more concise so rather than doing this we can remove everything here like so we can add the backticks and we can say hello it's me dollar sign brackets name and my age is age like so look at this this looks a hundred times cleaner than adding a bunch of double quotes pluses space double quotes and this is gonna work just fine like so so this is it this is string concatenation and by the way if you add a number here in this this is gonna be converted into a string all right so even if you add the age so if you're concatenate a string with the number so this is the last example I want to show you so I want to combine these two together so I'm gonna say I'm gonna just create a new variable call it combined and we're gonna say name I'm gonna say name plus age all right so I'm gonna combine the string with the number what's gonna happen now well let's console.log combined it's safe and we are gonna get edwin 24 now what is this well when we concatenate a string and a number against since they are not both numbers it cannot add them together like 20 + 20 40 and since they're not strings both of them strings and JavaScript is gonna be like okay so we have a string and a number I'm just gonna take the number here and I'm gonna make it a string so this whole thing so the combined is actually gonna be a string all right so this result is all a string because it cannot add them together so just gonna make them a string and a cool way you can check that if you're unsure what you can do here is when you cancel logged you can write the type of like so actually we don't need to wrap it we can just write type of combined and that's gonna return this string how cool is that so maybe I want to know what what is this datatype so type of age that's gonna give us number all right so that's cool way you can also visualize what type of data you have in your variables so that's it that's string concatenation definitely if you don't use them so much or you just learned it try to get used to them because it's gonna make your life wait wait easier thank you so much for watching grab a subscribe and I'll see you in the next [Music]

Channel: Dev Ed

Views: 53,668

Rating: 4.9711475 out of 5

Keywords: template strings, ecmascript 6 tutorial, es6, es6 tutorial, javascript tutorial, javascript strings, javascript strings and numbers, javascript tutorials, js tutorials, javascript lessons, js lessons, javascript for beginners, String Concatenation, Javascript String Concatenation, string methods, js tutorials for beginners, javascript tutorials for beginners

Id: 9Q8BAZffbz8

Length: 11min 54sec (714 seconds)

Published: Sat Jan 26 2019