Διαδρομές
/
JavaScript
JavaScript
/
Ασκήσεις
/
Προσαρμοσμένες πινακίδες
Προσαρμοσμένες πινακίδες

Προσαρμοσμένες πινακίδες

Άσκηση εκμάθησης

Εισαγωγή

Στη JavaScript, οι συμβολοσειρές προτύπων επιτρέπουν την ενσωμάτωση εκφράσεων μέσα σε συμβολοσειρές, κάτι που αναφέρεται και ως παρεμβολή συμβολοσειρών. Αυτή η λειτουργικότητα επεκτείνει τη λειτουργικότητα του ενσωματωμένου καθολικού αντικειμένου String.

Μπορείς να δημιουργήσεις συμβολοσειρές προτύπων στη JavaScript τυλίγοντας κείμενο σε backticks (βαρείες). Δεν επιτρέπουν μόνο στο κείμενο να περιλαμβάνει αλλαγές γραμμής και άλλους ειδικούς χαρακτήρες, αλλά μπορείς επίσης να ενσωματώσεις μεταβλητές και άλλες εκφράσεις.

const num1 = 1;
const num2 = 2;

`Adding ${num1} and ${num2} gives ${num1 + num2}.`;
// => Adding 1 and 2 gives 3.

Στο παραπάνω παράδειγμα, τα backticks - (``) - χρησιμοποιούνται για να αναπαραστήσουν μια συμβολοσειρά προτύπου. Το ${...} είναι ο υποκαταστάτης που χρησιμοποιείται για την αντικατάσταση. Οποιοιδήποτε τύποι δεν είναι συμβολοσειρές μετατρέπονται σιωπηρά σε συμβολοσειρές. Αυτό το θέμα καλύπτεται στην έννοια της μετατροπής τύπων. Με τις συμβολοσειρές προτύπων μπορούν να χρησιμοποιηθούν όλοι οι τύποι εκφράσεων.

const track = 'JavaScript';

`This track on exercism.org is ${track.toUpperCase()}.`;
// => This track on exercism.org is JAVASCRIPT.

Όταν χρειάζεται να μορφοποιήσεις συμβολοσειρές σε πολλές γραμμές:

`This is an example of using template
strings to accomplish multiple
lines`;

Με τις διαθέσιμες δυνατότητες αντικατάστασης, μπορείς επίσης να εισάγεις λογική στη διαδικασία για να καθορίσεις ποια θα πρέπει να είναι η συμβολοσειρά εξόδου.

Ένα παράδειγμα αυτού είναι η ενσωμάτωση ενός τριμερούς τελεστή. Αυτός ο τελεστής είναι μια σύντομη μορφή για τη γραφή μιας εντολής if/else. Η σύνταξη είναι condition ? consequent-expression : alternative-expression. Αν η συνθήκη είναι truthy, θα επιστραφεί ο τελεστέος στην αριστερή πλευρά της άνω και κάτω τελείας. Διαφορετικά, το αποτέλεσμα της τριμερούς έκφρασης είναι ο τελεστέος στη δεξιά πλευρά της άνω και κάτω τελείας.

const grade = 95;

`You have ${grade > 90 ? 'passed' : 'failed'} the exam.`;
// => You have passed the exam.

Οδηγίες

Σε αυτή την άσκηση θα γράφεις κώδικα για να βοηθήσεις μια εταιρεία πινακίδων να δημιουργεί προσαρμοσμένα μηνύματα για τις πινακίδες της.

1. Φτιάξε μια πινακίδα περίστασης

Υλοποίησε τη συνάρτηση buildSign(occasion, name) που δέχεται μια συμβολοσειρά ως παράμετρο occasion και μια συμβολοσειρά που περιέχει το όνομα κάποιου ως παράμετρο name. Οι δύο παράμετροι θα ενσωματωθούν σε ένα template string για να παραχθεί το μήνυμα της πινακίδας.

buildSign('Birthday', 'Rob');
// => "Happy Birthday Rob!"

2. Φτιάξε μια πινακίδα γενεθλίων

Υλοποίησε τη συνάρτηση buildBirthdaySign(age) που δέχεται μια ηλικία και, με βάση την ηλικία, θα καθορίσει μέρος του μηνύματος της πινακίδας. Αν η ηλικία είναι 50 ή μεγαλύτερη, η πινακίδα θα αναφέρεται στον χρήστη ως mature, αλλιώς θα αναφέρεται σε αυτόν ως young. Το ακριβές αναμενόμενο αποτέλεσμα φαίνεται παρακάτω:

buildBirthdaySign(50);
// => "Happy Birthday! What a mature fellow you are."

buildBirthdaySign(45);
// => "Happy Birthday! What a young fellow you are."

3. Φτιάξε μια πινακίδα αποφοίτησης

Υλοποίησε τη συνάρτηση graduationFor(name, year) που παίρνει ένα όνομα ως παράμετρο συμβολοσειράς και ένα έτος ως αριθμητική παράμετρο και χρησιμοποιεί παρεμβολή συμβολοσειρών για να δημιουργήσει μια φράση για μια πινακίδα που χρησιμοποιεί μια αλλαγή γραμμής για να χωρίσει τις δύο γραμμές του μηνύματος.

graduationFor('Hannah', 2022);
/* => "Congratulations Hannah!
       Class of 2022"
*/

4. Υπολόγισε το κόστος μιας πινακίδας

Υλοποίησε τη συνάρτηση costOf(sign, currency) που παίρνει μια συμβολοσειρά που περιέχει το περιεχόμενο της πινακίδας και μια συμβολοσειρά που αντιπροσωπεύει το νόμισμα. Η πινακίδα έχει βασική τιμή 20 στο νόμισμα που δίνεται. Επιπλέον, κάθε γράμμα κοστίζει 2. (Τα κενά περιλαμβάνονται στον υπολογισμό.) Η φράση που επιστρέφεται περιλαμβάνει το κόστος κατασκευής της πινακίδας, γραμμένο με δύο ψηφία μετά την υποδιαστολή, ακολουθούμενο από τη συμβολοσειρά του νομίσματος.

costOf('Happy Birthday Rob!', 'dollars');
// => "Your sign costs 58.00 dollars."
Επεξεργασία μέσω GitHub Ο σύνδεσμος ανοίγει σε νέο παράθυρο ή καρτέλα
JavaScript Exercism

Έτοιμος να ξεκινήσεις την άσκηση Προσαρμοσμένες πινακίδες;

Γράψου στο Exercism για να μάθεις και να κατακτήσεις JavaScript με 37 έννοιες159 ασκήσεις και πραγματική καθοδήγηση από ανθρώπους, όλα δωρεάν.