Advertisement
728x90
The nesting template is a feature supported within template literals syntax to allow inner backticks inside a placeholder ${ } within the template. For example, the below nesting template is used to display the icons based on user permissions whereas outer template checks for platform type,
javascript
1const iconStyles = `icon ${
2 isMobilePlatform()
3 ? ""
4 : `icon-${user.isAuthorized ? "submit" : "disabled"}`
5 }`;You can write the above use case without nesting template features as well. However, the nesting template feature is more compact and readable.
javascript
1//Without nesting templates
2
3const iconStyles = `icon ${
4 isMobilePlatform()
5 ? ""
6 : user.isAuthorized
7 ? "icon-submit"
8 : "icon-disabled"
9}`;Advertisement
Responsive Ad
🎯 Practice NowRelated Challenge
JavaScript Coding Exercise 55
Test your knowledge with this interactive coding challenge.
Start CodingAdvertisement
728x90
312of476