Video Title: JavaScript Template Literals
In the last lecture you learned that backslash n adds a newline to a string now what I don’t like about this approach is that it doesn’t allow us to visualize what the output looks like in other words if we log message on the console you can see this is what the
Output looks like so on the first line we have this is my and on the second line we have first message but when writing code our string looks different now if you want to make this string similar to what the output looks like we have to do something like this so we
Break this string into two parts and concatenate them like this and then we add the second part and a newline we can also put the first part on a new line and now this kind of looks similar to what we have in the output but we still
Have this backslash n getting in the way creating some noise in the code to make the matter worse if you want to surround first with single quotes will have to escape the single code character like this again this is very very ugly let’s lock this one more time very very
Ugly and noisy that’s where template literals come in the picture so so far you have learned about different kinds of literals in JavaScript so we have object literals which are indicated by curly braces we have boolean literals which are true or false we have string literals which are indicated by single or double
Quotes now starting from es6 we have template literals which are indicated by the backtick character this backtick character is the character before number 1 on your keyboard so let’s see how template literals help us read cleaner code I’m gonna define another constant but this time I’m gonna use a template
Literal instead of a string literal so we add the backtick character this is my now to add a new line we don’t need backslash in here we can simply add a line break and then type first message so we can format our string the way we want it to look like
So now let’s log message and another see what we have in code looks very similar to what we have and the output that we can also put this on a new line now if you want to surround first with single codes we can simply add them here there is no need to escape
Them because we have used a different character to define our string so save the changes one more time message another they look identical but compare this code with the former code this is particularly useful if you want to send out email messages in your application for example let’s say you want to send
An email to the user like this hi John thank you for joining my mailing list regards mush so we can format our string exactly the way we want it to look like there is no need for any of these plus or backslash n characters so let me delete all this stuff now another
Benefit of using template literals is that here we can add placeholders so let’s say we want to add the name dynamically with a regular string we’ll have to do something like this so message we set it to high then you have to concatenate this with some variable
Or constant let me define name here set it to John now we’ll have to concatenate this message with name then add a comma then backslash n this is really really ugly let me show you a better way with template literals we can add a placeholder using a dollar sign and
Curly braces now inside these curly braces we add an expression we can pass the name of a variable or a constant now save the changes let’s take a look at another you can see we’ve got John here dynamically so this is a placeholder for our name constant now here we can add
Any kind of expression we can also add a simple mathematical expression like this let’s log this one more time so hi John five so technically we can add any expression that produces a value in between the curly braces we can also call a function that returns a value and
That’s perfectly valid so these are the benefits of using template literals hi guys thank you for watching my javascript tutorial this tutorial is part of my JavaScript course where you learn all the essential JavaScript features that every web and mobile application developer must know if you’re an absolute beginner or have some
Experience in JavaScript and are looking for a fun and in-depth course that teaches you the fundamentals of JavaScript this course is for you this course is also packed with tons of exercises that help you master what you learned in the course in fact many of these exercises are questions that come
Up in technical programming interviews so if you’re pursuing a job as a front-end or a back-end developer or if you simply want to have a more in-depth understanding of JavaScript I highly encourage you to enroll in the course for a limited time you can get this
Course with a discount using the link in the video description click the link to find out more about the course and enroll
-
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
This was a professional explicit explanation!
Thank you so much very helpful🙏
Apt.
Thank you so much, lifsaver bor due man
Very clear and straight to the point! Thank you!
Thank you for having the ad at the end. A lot less disrupting!!
What is the next video that he references at the end of this video?
straight to the point ,appreciate it
Thank you for posting this
Man im literally lost rn we are discussing this one and I don't have prior language of JS. Feels like an alien talking in front of me. Thanks for saving me understood this one easily.
So clear and concise, thank you!
This was a great video. It was straight to the point.
Dear Mosh can you make course on Rust
this is amazing!! I've seen this quite often never thought that it was just this simple thank you!
You broke this down hte best! and in short and not in coder language. I needed it to be dumbed down into regular language and perspective first, before coder lang. Much obliged.
Fcc made it sound like rocket science, you've made it so easy with real life examples. Thanks
How do you open the console view on the right?
coming to the rescue again.
Many thanks to you sir
which color theme of vs code did you use in this tutorial?? That is awsome! I wanna use this!
Very detailed, thanks!
super clear. thx!
it's also called string interpolation ?
great vid man.
💲
very easy to understand, thank you!
Realy good start . Thankyou.
Thank you very much. I've been studying by myself for a while and this lesson helped me a lot.
Can I use elements inside of ${} ?
Sir i enjoy and understand your tutorials alot, thanks for putting more effort to teach with such an amazing skills, Sir if i subscribe to the monthly plan will i be able to download the courses offline? or it's just online? pls reply…..
Thanks and God bless you more 🙏
thanks mosh
great info. mosh
Thank You SIr
Excellent explanation. Thank you.
Thanks for explaining template literals
Wow backtickle is so interesting and useful. Thank you
Thanks for making it more straightforward to understand.
|
BTW, What is the name of VS Code Theme you're using in this tutorial.
So good tutorial
wonderful, i wish they thought us in class and broke our mind using an for if loop just to write a sentence, i know it was to teach the principt but this way with “ is so much easier
You explained something very nice
Is this template literals work in IE11? If not how to fix?
Today I realised why you have more than 1.5m subscriber Your deserve that Man
Excellent explanation. Thank you.
How to I make my browser a cool console like that? I like how you can avoid typing console.log();.
thank you , for help my JS study . really thax
thank you
Genuinely the best tutorial i've seen on this subject. Just so clear and straight to the point. Really great teaching!!
wow, a lot ton of things can be done if used in a code generator, i.e. if i generate JS from Rust i can use this to reduce the complexity at the Rust side.
🙂