Javascript String Concatenation | Javascript Tutorial For Beginners | ES6 Tutorial
- January 13, 2024
- Posted by: MainInstructor
- Category: JavaScript
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
2:16 Me when my crush interacts with other boys
why making age a constant? age is something variable……..
Your way of explaining is profoundly amazing and you have a very sweet sense of humor.
by the way the ${name} only possible with these “ quotes in es6 not with regular '' u should find them below of the esc keyword and it can also type with alt+96 Thankyou
that energy. I feel much more motivated to build my code
Much appreciated Ed
Cool cool, thanks
wow! great video Ed! i love to see the excitement all over your face when you explain stuff xD you are awesome ! keep up the good work. i do online school here in norway now and this video link is syllabus from noroff. that's gonna get you some views !
where is your home town?
Vanakam da mapla Tamilnadu la irudhu♥️
You make me laugh as I learn
This was trash…..
who's sun ? JSON ?
const thanks = "Thank you"
const name = "Dev Ed"
function log(toLog) {
console.log(toLog)
}
toLog(thanks + name)
Output = Thank you Dev Ed
I am trying to learn JS . I really enjoy your enthusiasm . Keep doing what you're doing because it helps a lot of people . Thank you so much .
u know that u r fuckng awesome right . explaining in different examples even the simplest things. Wow man Wow
Thanks for dooing this great tutorial. An important part is in 06:16 – 06:20 make sure you use the Backtick ´ . cheers Ch
I have learn c++ in High School , And my Teacher had said that you can learn any language easily if you learnt a language very properly. And now I can really find similarities with it
I Hate Programming
Now I realize the "ed" is in even in your name.
Thank you Dev Ed
Having learned the basics in Java, Python etc. before this I find it kind of weird to use const as often as you do. How does const in javascript differ from java/python where you would never ever make e.g. an age a constant variable? Thanks for great content.
who are the nine people that disliked this video
"The internet here is so bad that I just want to curl up in bed and cry"
Hey Dev Ed Can you please upload a video on that responsive nav bar again but with content as when I try to add images in the body the images overlap on the nav bar which slides out in mobile view. So please if you can please help. Thank you for your content 🙂
one of the best tutorials man!! love the way you explain.
$ doesnt work Why??? I understand why. I used ' ' instead of “….(edited)
Thank you 🙂 You are awsome!!! love when you say Don't worry… not many kind people out there. Lots and lots of good wishes to you 🙂
1:40 Your a-Gee is 21
This guy is awesome ❤
Big brain time be watching this at 1.25 speed to lean all of JS in <60 minutes
Hello Ed 🙂 Thank you so much for all this content. I appreciate what you do, and i find your Videos very Educational and Motivational. All the best to you! 🙂
Man you are superb!!!!!!!
Would this course on completion allow a learner to build small apps as it quite short compare to other online tutorial
Hey! Can you please tell me your VS Code Theme? I really like it!
Wow Ed…just watched my 1st tut and its great! Keep up the tremendous work mate!!
Hello, Edwin. My name is Edwin 😀
You are great man…
Thanks for the amazing tutorials, and it really helps when there is a bit comedy in teaching as it makes learning fun. Other channels tutorials are pretty boring.
You are the best thank you💙
Great video! How to run the code in Terminal when Save ? +1 Subscriber !
Amazing THAKS !!!
i love your tutorials sir !
the only person i disable ublock for 🙂