camelCase vs snake_case vs kebab-case: Ποιο να διαλέξεις

Το camelCase vs snake_case vs kebab-case είναι κυρίως θέμα του πού ζει το όνομα. Η JavaScript και η Java χρησιμοποιούν camelCase (firstName), η Python, η Ruby και η SQL χρησιμοποιούν snake_case (first_name), ενώ η CSS, τα χαρακτηριστικά HTML και τα URL χρησιμοποιούν kebab-case (first-name). Ακολούθησε τη σύμβαση της γλώσσας και τον οδηγό στυλ της ομάδας σου. Για να μετατρέψεις κείμενο ανάμεσα σε πεζά και κεφαλαία, ο δωρεάν μετατροπέας πεζών και κεφαλαίων και η δωρεάν γεννήτρια slug για URL καλύπτουν τα περισσότερα στον browser σου.

camelCase vs snake_case vs kebab-case με μια ματιά

Στυλ	Παράδειγμα	Πού το βλέπεις
camelCase	userFirstName	Μεταβλητές και συναρτήσεις στη JavaScript και την TypeScript, μέθοδοι Java, JSON από πολλά web API
PascalCase	UserFirstName	Ονόματα κλάσεων στις περισσότερες γλώσσες, React components, μέθοδοι C#
snake_case	user_first_name	Μεταβλητές και συναρτήσεις Python, Ruby, ονόματα στηλών SQL, πολλά JSON API
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	Σταθερές σε πολλές γλώσσες, μεταβλητές περιβάλλοντος
kebab-case	user-first-name	Ιδιότητες και ονόματα κλάσεων CSS, χαρακτηριστικά HTML, URL, ονόματα αρχείων, σημαίες CLI

Τα ονόματα προέρχονται από τα σχήματα: το camelCase έχει καμπούρες από κεφαλαία γράμματα, το snake_case απλώνεται επίπεδο πάνω σε κάτω παύλες, και οι λέξεις του kebab-case είναι περασμένες σε σούβλα με παύλες.

Γλώσσα προς γλώσσα

JavaScript και TypeScript. Οι μεταβλητές και οι συναρτήσεις είναι camelCase (getUserName), οι κλάσεις και τα React components είναι PascalCase (UserCard), και οι σταθερές είναι συχνά SCREAMING_SNAKE_CASE (MAX_RETRIES). Το ίδιο ισχύει και για τις ενσωματωμένες συναρτήσεις της γλώσσας, όπως getElementById και toLowerCase.

Python. Το PEP 8, ο οδηγός στυλ της Python, χρησιμοποιεί snake_case για συναρτήσεις, μεταβλητές και ονόματα modules, CapWords (PascalCase) για κλάσεις και κεφαλαία με κάτω παύλες για σταθερές. Το να γράψεις getUserName στην Python λειτουργεί, αλλά θα φαίνεται ξένο σε κάθε προγραμματιστή Python που το διαβάζει.

CSS και HTML. Οι ιδιότητες CSS είναι kebab-case (background-color, font-size), και τα περισσότερα συστήματα ονομασίας κλάσεων ακολουθούν (.nav-item, .card-title). Τα χαρακτηριστικά data- στο HTML είναι επίσης kebab-case, και οι browsers τα μετατρέπουν για την JavaScript: το data-user-id γίνεται element.dataset.userId. Αυτή η μία γραμμή συνοψίζει γιατί υπάρχουν και οι δύο συμβάσεις.

SQL και βάσεις δεδομένων. Τα ονόματα στηλών και πινάκων είναι συνήθως snake_case (created_at, order_items). Πολλές βάσεις μετατρέπουν τα χωρίς εισαγωγικά ονόματα σε ένα μόνο πεζό ή κεφαλαίο, οπότε το createdAt μπορεί αθόρυβα να γίνει createdat, εκτός αν το βάζεις σε εισαγωγικά κάθε φορά. Το snake_case το αποφεύγει αυτό.

URL και ονόματα αρχείων. Χρησιμοποίησε kebab-case. Ο οδηγός της Google για τη δομή των URL συνιστά παύλες αντί για κάτω παύλες για να χωρίζονται οι λέξεις, γιατί οι παύλες δείχνουν καθαρά τα όρια των λέξεων. Τα πεζά γράμματα επίσης αποφεύγουν σπασμένους συνδέσμους σε servers που θεωρούν το About.html και το about.html ως διαφορετικά αρχεία. Δες τι είναι το URL slug και τις βέλτιστες πρακτικές για URL slug.

JSON και API. Δεν υπάρχει ένας κανόνας. Πολλά API με κέντρο την JavaScript χρησιμοποιούν camelCase, και πολλά back end σε Python ή Ruby επιστρέφουν snake_case. Διάλεξε ένα ανά API και μην τα αναμιγνύεις στην ίδια απάντηση.

Ποιο είναι πιο εύκολο να διαβαστεί;

Και τα τρία είναι ευανάγνωστα όταν τα συνηθίσεις. Μερικές πρακτικές διαφορές:

• Το snake_case και το kebab-case κρατούν σαφές κενό ανάμεσα στις λέξεις, κάτι που βοηθά με μεγάλα ονόματα και ακρωνύμια (html_parser vs htmlParser vs HTMLParser).
• Το camelCase είναι πιο σύντομο και δεν χρειάζεται επιπλέον χαρακτήρες.
• Το kebab-case δεν μπορεί να χρησιμοποιηθεί για ονόματα μεταβλητών στις περισσότερες γλώσσες, γιατί το user-name διαβάζεται ως user minus name.
• Το διπλό κλικ επιλέγει ολόκληρο όνομα snake_case ή camelCase στους περισσότερους επεξεργαστές, αλλά συνήθως σταματά στις παύλες στο kebab-case.

Ο πραγματικός κανόνας είναι η συνέπεια. Ένα αρχείο που αναμιγνύει userName, user_name και UserName είναι πιο δύσκολο να διαβαστεί από οποιοδήποτε ένα στυλ που χρησιμοποιείται παντού.

Μετατροπή ανάμεσα σε στυλ

Θα χρειαστείς μετατροπή όταν μεταφέρεις δεδομένα ανάμεσα σε επίπεδα: το created_at ενός Python API να γίνει createdAt στη JavaScript, ένας τίτλος σελίδας να γίνει URL, ή ένα όνομα ρύθμισης να γίνει μεταβλητή περιβάλλοντος.

Σε kebab-case ή snake_case: χρησιμοποίησε τη γεννήτρια slug. Επικόλλησε τις λέξεις, μία ανά γραμμή, και διάλεξε Παύλες (-) για kebab-case ή Κάτω παύλες (_) για snake_case. Μετατρέπει τα πάντα σε πεζά, κάνει τους τονούμενους χαρακτήρες απλά γράμματα και αφαιρεί τα σύμβολα. Αντιμετωπίζει κάθε σύμβολο ως διαχωριστικό λέξεων, οπότε το user_first_name γίνεται user-first-name και ξανά πίσω. Δεν χωρίζει όμως το camelCase: το userFirstName βγαίνει ως userfirstname. Βάλε πρώτα κενά ανάμεσα στις λέξεις.

Σε SCREAMING_SNAKE_CASE. Φτιάξε πρώτα την έκδοση snake_case στη γεννήτρια slug, μετά επικόλλησέ την στον δωρεάν μετατροπέα πεζών και κεφαλαίων και πάτα ΚΕΦΑΛΑΙΑ. Αντίστροφα, το πεζά μετατρέπει το MAX_RETRIES σε max_retries.

Σε camelCase ή PascalCase. Δεν υπάρχει κουμπί με ένα κλικ. Ο πιο γρήγορος δρόμος: γράψε τις λέξεις με κενά, πάτα Κεφαλαίο αρχικό γράμμα κάθε λέξης στον μετατροπέα (το user first name γίνεται User First Name), μετά αφαίρεσε τα κενά για PascalCase ή κάνε πεζό το πρώτο γράμμα για camelCase.

Πολλά ονόματα μαζί, μέσα σε κώδικα. Για μεγάλη μετονομασία, χρησιμοποίησε την εύρεση και αντικατάσταση του επεξεργαστή σου με κανονική έκφραση. Δοκίμασε πρώτα το μοτίβο στον δωρεάν ελεγκτή regex: για παράδειγμα, το _([a-z]) βρίσκει κάθε κάτω παύλα που ακολουθείται από γράμμα, δηλαδή το σημείο όπου το snake_case θα χρειαζόταν κεφαλαίο για να γίνει camelCase. Πολλοί επεξεργαστές μπορούν να κάνουν κεφαλαίο το συλλαμβανόμενο γράμμα στην αντικατάσταση· έλεγξε την τεκμηρίωση του επεξεργαστή σου για τη σύνταξη.

Πράγματα που προσέχεις στη μετατροπή

• Ακρωνύμια. Αποφάσισε αν θα είναι userId ή userID, HtmlParser ή HTMLParser, και μείνε σε αυτό.
• Αριθμοί. Το address_line_2 μετατρέπεται καθαρά· το addressLine2 είναι εντάξει· απλώς μην χάσεις το ψηφίο.
• Δημόσια ονόματα. Η μετονομασία ενός πεδίου JSON ή ενός URL χαλάει όποιον το χρησιμοποιεί. Βάλε ανακατεύθυνση για τα URL και κράτα τα παλιά ονόματα πεδίων να λειτουργούν για λίγο στα API.

Μετάτρεψε το κείμενό σου

Χρησιμοποίησε τον δωρεάν μετατροπέα πεζών και κεφαλαίων για ΚΕΦΑΛΑΙΑ, πεζά και Κεφαλαίο αρχικό γράμμα κάθε λέξης, και τη γεννήτρια slug για kebab-case και snake_case. Και τα δύο τρέχουν στον browser σου, και τίποτα που επικολλάς δεν φεύγει από τη συσκευή σου.