Πώς να ξεκινήσετε με τη διεθνοποίηση στο JavaScript

Προσαρμόζοντας τις εφαρμογές μας για διαφορετικές γλώσσες και χώρες, παρέχουμε καλύτερη εμπειρία χρήστη. Είναι απλούστερο για τους χρήστες να χειρίζονται γνωστές σημειώσεις για ημερομηνίες, νομίσματα και αριθμούς.

Η διεθνοποίηση (i18n) περιλαμβάνει την προσθήκη υποστήριξης για διαφορετικές γλώσσες και χώρες στην εφαρμογή σας.Ο αριθμός 18 σημαίνει τον αριθμό των γραμμάτων μεταξύ του πρώτου «i» και του τελευταίου «n» .

Παραδείγματα διεθνοποίησης θα μπορούσαν να είναι υποστήριξη Unicode, προσαρμογή διεπαφής χρήστη για διαφορετικά αλφάβητα ή ταξινόμηση συστοιχιών μη αγγλικών συμβολοσειρών.

Το JavaScript εφαρμόζει την προδιαγραφή API Διεθνοποίησης και καθορίζει το ενσωματωμένο αντικείμενο Intl.

Και αυτό που το καθιστά τόσο χρήσιμο είναι ότι έχει μεγάλη συμβατότητα μεταξύ προγραμμάτων περιήγησης και υποστήριξη Node.js:

Ας αρχίσουμε!

Το Intlαντικείμενο παρέχει πρόσβαση σε διάφορους κατασκευαστές, όπως:

  • Intl.DateTimeFormat - μορφοποίηση ημερομηνίας και ώρας με ευαισθησία στη γλώσσα.
  • Intl.NumberFormat - μορφοποίηση αριθμών ευαίσθητων στη γλώσσα.
  • Intl.PluralRules - κανόνες μορφής πληθυντικού και πληθυντικού πληθυντικού.
  • Intl.Collator - σύγκριση συμβολοσειρών ευαίσθητων στη γλώσσα.

Η δημιουργία οποιουδήποτε από αυτά τα αντικείμενα ακολουθεί ένα απλό μοτίβο:

const formatter = new Intl.ctor(locales, options);

Για παράδειγμα, η τοπική γλώσσα " de-AT" : η γερμανική γλώσσα όπως χρησιμοποιείται στην Αυστρία:

const dateFormatterAT = new Intl.DateTimeFormat("de-AT");

Στη συνέχεια καλούμε τη μέθοδο format () με ένα παρεχόμενο αντικείμενο ημερομηνίας :

const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"

Περιέχει μόνο κωδικούς γλώσσας και χώρας. Σύντομα, θα δούμε πιο ολοκληρωμένα παραδείγματα. Εδώ μπορείτε να βρείτε περισσότερα τοπικά παραδείγματα.

Μπορούμε να χρησιμοποιήσουμε το navigator.language - την προτιμώμενη γλώσσα για τον χρήστη, την οποία χρησιμοποιούμε ως τοπικές ρυθμίσεις:

Εδώ αντί να καλέσουμε μια μέθοδο μορφής απευθείας, μπορούμε να την αντιστοιχίσουμε ως συνάρτηση. Είναι υπέροχο γιατί μόλις δημιουργήσουμε μια εξειδικευμένη λειτουργία μορφής, μπορούμε να την χρησιμοποιήσουμε πολλές φορές.

Λίγες μόνο γραμμές κώδικα και έχετε μια τοπική ημερομηνία!

Έτσι, στη συνέχεια, θα βουτήξουμε βαθύτερα και θα μάθουμε περισσότερα για τις τοπικές ρυθμίσεις. Εάν δεν είστε έτοιμοι για αυτό και θέλετε μόνο να δείτε δροσερά demo σαν αυτό στην παρακάτω εικόνα - μεταβείτε στην παρακάτω ενότητα παραδειγμάτων!

Κατάδυση βαθύτερα

Λοιπόν, αυτό αρκεί για να πάρετε μια ιδέα για το πώς λειτουργεί, αλλά οι πραγματικές περιπτώσεις χρήσης θα μπορούσαν να γίνουν πολύ πιο περίπλοκες. Τι γίνεται αν θέλουμε:

  • εμφανίστε την ημερομηνία μας χρησιμοποιώντας το ιαπωνικό ή περσικό ημερολόγιο
  • χρησιμοποιήστε τα ταϊλανδέζικα ή αραβικά-ινδικά ψηφία για τις ημερομηνίες και τους αριθμούς
  • χρησιμοποιήστε απλοποιημένα κινέζικα
  • Οποιοσδήποτε συνδυασμός των παραπάνω;

Τι είναι το Locale;

Για να δουλέψουμε με αυτό το API, πρέπει να μάθουμε περισσότερα για τις τοπικές ρυθμίσεις. Πρώτα απ 'όλα, ας δώσουμε έναν ορισμό.

Οι τοπικές ρυθμίσεις είναι ένα αναγνωριστικό που αναφέρεται σε ένα σύνολο προτιμήσεων χρήστη όπως:

  • ημερομηνίες και ώρες
  • αριθμοί και νομίσματα
  • μεταφρασμένα ονόματα για ζώνες ώρας, γλώσσες και χώρες
  • ΜΟΝΑΔΕΣ ΜΕΤΡΗΣΗΣ
  • ταξινόμηση (ταξινόμηση)

Οι τοπικές ρυθμίσεις δεν είναι πεζά. Είναι μόνο μια σύμβαση .

Οι τοπικές ρυθμίσεις πρέπει να είναι μια συμβολοσειρά που κρατά μια ετικέτα γλώσσας BCP 47 και όλα τα μέρη διαχωρίζονται με παύλες.

Ας ρίξουμε μια ματιά στο επόμενο παράδειγμα:

Και πάλι, μόνο τέσσερις γραμμές κώδικα; Ας ρίξουμε μια ματιά στο παρακάτω διάγραμμα και να εξετάσουμε κάθε μέρος των τοπικών μας τοποθεσιών:

Από αυτήν την εικόνα, μπορείτε να δείτε ότι απαιτείται μόνο το πρώτο μέρος - κωδικός γλώσσας -. Είναι απίθανο να χρειαστείτε κάτι τέτοιο. Όμως, αυτό είναι ένα καλό παράδειγμα για να ρίξετε μια ματιά σε κάθε πιθανό μέρος της περιοχής και να πάρετε μια ιδέα για το τι είναι μια τοποθεσία.

Η τοποθεσία μας περιέχει όλα τα πιθανά μέρη:

  • zh (κωδικός γλώσσας) - Κινεζική γλώσσα
  • Hans (κωδικός σεναρίου) - γραμμένο σε απλουστευμένους χαρακτήρες
  • CN (κωδικός χώρας) - όπως χρησιμοποιείται στην Κίνα.
  • bauddha (παραλλαγή) - χρησιμοποιώντας μια Βουδιστική Υβριδική Σανσκριτική διάλεκτο
  • u-nu-hanidec (επέκταση) - χρησιμοποιώντας δεκαδικούς αριθμούς Han

Παρακάτω μπορείτε να βρείτε περισσότερα παραδείγματα σεναρίων, παραλλαγών και επεκτάσεων.

Κωδικοί σεναρίων

Χρησιμοποιούνται με ετικέτες γλώσσας για να υποδείξουν σε ποια γραφή είναι γραμμένη μια γλώσσα. Για παράδειγμα:

Κωδικοί παραλλαγής

Οι παραλλαγές αντιπροσωπεύουν μια γλωσσική διάλεκτο.

Επεκτάσεις

Περιλαμβάνει διαφορετικά ημερολόγια και αριθμητικά συστήματα.

Τα ημερολόγια έχουν πρόθεμα "u-ca-", πιθανές τιμές (δεν περιλαμβάνονται όλες):

Τα αριθμητικά συστήματα έχουν πρόθεμα "u-nu", πιθανές τιμές (δεν περιλαμβάνονται όλα):

Ο οργανισμός Iana είναι υπεύθυνος για την ενημέρωση αυτής της λίστας.

Τοπική διαπραγμάτευση

Το τελευταίο πράγμα που πρέπει να μάθουμε για τις τοπικές ρυθμίσεις είναι πώς επιλύονται. Είδαμε αυτό το παράδειγμα πριν:

const formatter = new Intl.ctor(locales, options);

Το localesόρισμα καθορίζει μία μόνο τοποθεσία ή έναν πίνακα τοπικών ρυθμίσεων. Το περιβάλλον (πρόγραμμα περιήγησης ή Node.js) το συγκρίνει με τις τοπικές ρυθμίσεις που διαθέτει και επιλέγει το καλύτερο.

Υπάρχουν δύο αντίστοιχοι αλγόριθμοι:

  • αναζήτηση - έλεγχοι από πιο συγκεκριμένους σε λιγότερους: εάν το zh-Hans-SG δεν είναι διαθέσιμο, λάβετε το zh-Hans , εάν όχι - zh, αλλιώς - μια προεπιλεγμένη τοποθεσία.
  • βέλτιστη εφαρμογή (προεπιλογή) - Βελτιωμένος αλγόριθμος. Εάν ζητηθεί "es-GT" - Ισπανικά για τη Γουατεμάλα, αλλά δεν βρεθεί, τότε αντί να παρέχεται εναλλακτικό ως "es", θα επιλεγεί το "es-MX" - Ισπανικά στο Μεξικό.

Εάν παρέχουμε μια σειρά από τοπικές ρυθμίσεις, τότε κερδίζει ο πρώτος αγώνας.

Λοιπόν, αρκετή θεωρία - τώρα είναι η ώρα να εξασκηθείτε!

Παραδείγματα

Ο κωδικός για τα παραδείγματα μπορεί να βρεθεί στο GitHub.

Μορφοποίηση ημερομηνίας / ώρας

Οι τοπικές ρυθμίσεις δεν είναι το μόνο πράγμα που είναι υπέροχο για το Intl API. Μπορείτε να τροποποιήσετε το αποτέλεσμα με τον επιθυμητό τρόπο χρησιμοποιώντας ένα optionsόρισμα.

Αυτή είναι μια μαζική ενημέρωση σε σύγκριση με το αντικείμενο Ημερομηνία !

Σε αντίθεση με το moment.js, δεν μπορείτε να αλλάξετε χειροκίνητα οποιοδήποτε μέρος της ημερομηνίας, όπως το έτος και το μήνα. Πρέπει να χρησιμοποιήσετε την κατάλληλη τοπική ρύθμιση. Αυτό μπορεί να ακούγεται σαν περιορισμός , αλλά το καθιστά πιο οικείο για τους χρήστες μας.

Μορφοποίηση αριθμών

Γνωρίζοντας πώς να χειριστείτε τις ημερομηνίες, ξέρετε πώς να χειριστείτε τους αριθμούς. Η μόνη διαφορά είναι η λίστα επιλογών:

Μορφοποίηση νομίσματος

Για τα νομίσματα χρησιμοποιούμε τον Intl.NumberFormatκατασκευαστή, αλλά παρέχουμε μια διαφορετική λίστα επιλογών:

Σημειώστε ότι δεν μετατρέπουμε χρήματα εδώ. Το μόνο που κάνουμε είναι να μορφοποιήσουμε τον αριθμό 172630 χρησιμοποιώντας τους κατάλληλους κανόνες νομίσματος. Εδώ μπορείτε να βρείτε τη λίστα των κωδικών νομισμάτων.

Μορφοποίηση πολλαπλών κανόνων

Αυτό σας λέει ποια φόρμα ισχύει βάσει ενός δεδομένου αριθμού για μια συγκεκριμένη τοποθεσία:

Μπορεί να είναι πολύ βολικό για τη μορφοποίηση κανονικών αριθμών:

Ταξινόμηση συμβολοσειρών

Η ταξινόμηση συμβολοσειρών που περιέχουν επιπλέον γράμματα όπως το ä στα γερμανικά ή στα σουηδικά δεν είναι αυτό που θέλετε να κάνετε χειροκίνητα, μόνο και μόνο επειδή η παραγγελία εξαρτάται από τη γλώσσα. Ευτυχώς για εμάς, έχουμε . Και πάλι το μόνο που πρέπει να κάνουμε είναι να παρέχουμε μια απαιτούμενη τοποθεσία:Intl.Collator

συμπέρασμα

Η διεθνοποίηση είναι ένα μεγάλο και περίπλοκο θέμα. Αλλά αν γνωρίζετε τι είναι μια τοποθεσία και πώς να την κατασκευάσετε, τα υπόλοιπα είναι εξαιρετικά εύχρηστα.

Αυτό είναι!

Εάν έχετε οποιεσδήποτε ερωτήσεις ή σχόλια, ενημερώστε με στα παρακάτω σχόλια ή κάντε ping στο Twitter.

Εάν αυτό ήταν χρήσιμο, κάντε κλικ στο χειροκρότημα; κουμπί κάτω από μερικές φορές για να δείξετε την υποστήριξή σας! ⬇⬇ ??

Εδώ είναι περισσότερα άρθρα που έχω γράψει:

Πώς να απλοποιήσετε τη βάση κώδικα με χάρτη (), μείωση () και φίλτρο () σε JavaScript

Όταν διαβάζετε για το Array.reduce και πόσο δροσερό είναι, το πρώτο και μερικές φορές το μόνο παράδειγμα που βρίσκετε είναι το άθροισμα της… medium.freecodecamp.org Παραγωγής έτοιμη Node.js REST APIs Setup χρησιμοποιώντας TypeScript, PostgreSQL και Redis.

Πριν από ένα μήνα μου δόθηκε μια εργασία να δημιουργήσω ένα απλό API αναζήτησης. Το μόνο που έπρεπε να κάνει είναι να πάρει μερικά δεδομένα από τρίτους… medium.com

Ευχαριστούμε που διαβάσατε ❤️