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

Το Intl API απλοποιεί τη μορφοποίηση και τον χειρισμό διεθνοποιημένου κειμένου, αριθμών, ημερομηνιών και νομισμάτων. Σας επιτρέπει να χειρίζεστε διάφορες μορφές δεδομένων σύμφωνα με τις τοπικές ρυθμίσεις.

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

Χρησιμοποιώντας το Intl API, μπορείτε να δημιουργήσετε εφαρμογές ιστού που είναι προσβάσιμες και εύχρηστες για κοινό σε διάφορες περιοχές και πολιτισμούς.

Λήψη τοπικών ρυθμίσεων χρήστη

ο Κατασκευαστές JavaScript που παρέχεται από το Intl API προσδιορίζουν τις τοπικές ρυθμίσεις που θα χρησιμοποιήσουν για να μορφοποιήσουν την ημερομηνία, το κείμενο, τον αριθμό κ.λπ., σύμφωνα με ένα γνωστό μοτίβο. Κάθε κατασκευαστής παίρνει ένα

instagram viewer
μικρός λοβός και ένα επιλογές αντικείμενο ως επιχειρήματα. Χρησιμοποιώντας αυτά τα ορίσματα, ο κατασκευαστής αντιστοιχίζει τις τοπικές ρυθμίσεις που ζητήθηκαν με τις τοπικές ρυθμίσεις που υποστηρίζουν αυτήν τη στιγμή.

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

Η αξία του πλοηγός.γλώσσα Η ιδιότητα είναι μια ετικέτα γλώσσας BCP 47, η οποία αποτελείται από έναν κωδικό γλώσσας και, προαιρετικά, έναν κωδικό περιοχής και άλλες υποετικέτες. Για παράδειγμα, το "en-US" αντιπροσωπεύει τα αγγλικά όπως ομιλούνται στις Ηνωμένες Πολιτείες.

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

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

Μπορείτε να δημιουργήσετε ένα απλό Λειτουργία JavaScript για να σας βοηθήσει να αποκτήσετε τις τοπικές ρυθμίσεις ενός χρήστη. Ακολουθεί ένα απόσπασμα κώδικα που μπορεί να βοηθήσει:

συνθ getUserLocale = () => {
αν (navigator.languages ​​&& navigator.languages.length) {
ΕΠΙΣΤΡΟΦΗ navigator.languages[0];
 }
ΕΠΙΣΤΡΟΦΗ navigator.language;
};
κονσόλα.log (getUserLocale());

Αυτό getUserLocale Η συνάρτηση επιστρέφει το πρώτο στοιχείο της ιδιότητας navigator.languages ​​εάν είναι διαθέσιμο. Διαφορετικά, επιστρέφει στην ιδιότητα navigator.language, η οποία αντιπροσωπεύει την προτιμώμενη γλώσσα του χρήστη σε παλαιότερα προγράμματα περιήγησης.

Μορφοποίηση ημερομηνιών για διαφορετικές τοπικές ρυθμίσεις

Για να μορφοποιήσετε ημερομηνίες χρησιμοποιώντας το Intl API, μπορείτε να χρησιμοποιήσετε το Intl. DateTimeFormat() κατασκευαστής. Αυτός ο κατασκευαστής παίρνει δύο ορίσματα: μια συμβολοσειρά τοπικής ρύθμισης και ένα αντικείμενο επιλογών.

Το αντικείμενο επιλογών μπορεί να περιέχει ιδιότητες που ελέγχουν τη μορφοποίηση της ημερομηνίας.

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

  • καθημερινή: Αυτή η επιλογή καθορίζει τη μορφή της ημέρας της εβδομάδας. Μπορείτε να το ρυθμίσετε σε οποιοδήποτε από τα δύο μακρύς (Παρασκευή), μικρός (Παρ.), ή στενός (ΦΑ).
  • έτος: Αυτή η επιλογή καθορίζει τη μορφή του έτους. Μπορείτε να το ρυθμίσετε σε οποιοδήποτε από τα δύο αριθμητικός (2023) ή 2ψήφιο (23).
  • μήνας: Αυτή η επιλογή καθορίζει τη μορφή του μήνα. Μπορείτε να το ρυθμίσετε σε οποιοδήποτε από τα δύο αριθμητικός (3), 2ψήφιο (03), μακρύς (Μάρτιος), μικρός (Μαρ), ή στενός (Μ).
  • ημέρα: Αυτή η επιλογή καθορίζει τη μορφή της ημέρας. Μπορείτε να το ρυθμίσετε σε οποιοδήποτε από τα δύο αριθμητικός (2) ή 2ψήφιο (02).

Ακολουθεί ένα παράδειγμα που δείχνει πώς να μορφοποιήσετε μια ημερομηνία χρησιμοποιώντας το Intl. DateTimeFormat() κατασκευαστής:

συνθ ημερομηνία = Ημερομηνία.τώρα()
συνθ locale = getUserLocale();
συνθ επιλογές = {
 καθημερινή: "μακρύς",
 έτος: "αριθμητικός",
 μήνας: "μακρύς",
 ημέρα: "αριθμητικός",
};


συνθ μορφοποιητής = νέοςIntl.DateTimeFormat (τοπική τοποθεσία, επιλογές).
// ημέρα της εβδομάδας, ημερομηνία μήνα, έτος (Παρασκευή, 24 Μαρτίου 2023)
κονσόλα.log (formatter.format (ημερομηνία));

Αυτός ο κώδικας ρυθμίζει ένα αντικείμενο μορφοποιητή μεταβιβάζοντας τις τοπικές ρυθμίσεις του χρήστη σε Intl. DateTimeFormat(), μαζί με ένα σύνολο επιλογών. Στη συνέχεια χρησιμοποιεί τον μορφοποιητή για να μετατρέψει την τρέχουσα ημερομηνία σε συμβολοσειρά. ο επιλογές Το αντικείμενο περιέχει ιδιότητες που ελέγχουν τη μορφοποίηση της ημερομηνίας.

Μορφοποίηση διαφορετικών τύπων αριθμών

Μπορείτε να χρησιμοποιήσετε το Intl API για μορφοποίηση αριθμών χρησιμοποιώντας το Intl. NumberFormat() κατασκευαστής. Αρέσει Intl. DateTimeFormat(), αυτός ο κατασκευαστής παίρνει μια συμβολοσειρά τοπικών ρυθμίσεων και ένα αντικείμενο επιλογών ως ορίσματα.

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

Μορφοποίηση δεκαδικών και ποσοστών

Μπορείτε να μορφοποιήσετε αριθμούς ως δεκαδικά και ποσοστά χρησιμοποιώντας Intl. NumberFormat() κατασκευαστή ορίζοντας την ιδιότητα στυλ σε δεκαδικός για δεκαδικούς και τοις εκατό για ποσοστά.

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

συνθ αριθμός = 123456;
συνθ locale = getUserLocale(); // en-US
συνθ επιλογές = {
 στυλ: "δεκαδικός",
 minimalFractionDigits: 2,
 μέγιστα ψηφία κλασμάτων: 2,
 useGrouping: αληθής,
};


συνθ μορφοποιητής = νέοςIntl.NumberFormat (τοπική τοποθεσία, επιλογές);
κονσόλα.log (formatter.format (αριθμός)); // 123,456.00

Το μπλοκ κωδικών παραπάνω μορφοποιεί το 123.456 ως δεκαδικό με διαχωριστικά ομαδοποίησης (,) και δύο δεκαδικά ψηφία.

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

συνθ αριθμός = 123456;
συνθ locale = getUserLocale();
συνθ επιλογές = {
 στυλ: "τοις εκατό",
 useGrouping: αληθής,
};


συνθ μορφοποιητής = νέοςIntl.NumberFormat (τοπική τοποθεσία, επιλογές);
κονσόλα.log (formatter.format (αριθμός)); // 12,345,600%

Το μπλοκ κώδικα παραπάνω εκφράζει 123.456 ως ποσοστό με διαχωριστικά ομαδοποίησης.

Μορφοποίηση νομισμάτων

Μπορείτε να μορφοποιήσετε αριθμούς ως νομίσματα ορίζοντας την ιδιότητα στυλ σε νόμισμα. Θα πρέπει να ορίσετε και άλλες επιλογές δίπλα του, όπως:

  • νόμισμα: Μια συμβολοσειρά που αντιπροσωπεύει τον κωδικό νομίσματος ISO 4217 (όπως "USD", "EUR" ή "JPY") για χρήση για μορφοποίηση. Εάν δεν παρέχετε αυτήν την επιλογή, ο μορφοποιητής θα επιλέξει έναν κωδικό νομίσματος με βάση τις τοπικές ρυθμίσεις του χρήστη.
  • Εμφάνιση νομίσματος: Αυτή η ιδιότητα καθορίζει πώς το πρόγραμμα περιήγησης πρέπει να εμφανίζει το νόμισμα. Μπορεί είτε να είναι σύμβολο (75 USD), κωδικός (75 USD) ή όνομα (75 δολάρια ΗΠΑ).

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

συνθ αριθμός = 123456;
συνθ locale = getUserLocale(); // en-US
συνθ επιλογές = {
 στυλ: "νόμισμα",
 νόμισμα: "USD",
 Εμφάνιση νομίσματος: "κώδικας",
};


συνθ μορφοποιητής = νέοςIntl.NumberFormat (τοπική τοποθεσία, επιλογές);
κονσόλα.log (formatter.format (αριθμός)); // 123.456,00 USD

Το μπλοκ κωδικών παραπάνω μορφοποιεί το 123.456 ως νόμισμα (USD).

Μονάδες Μορφοποίησης

Μπορείτε να χρησιμοποιήσετε το Intl. NumberFormat() κατασκευαστή για να μορφοποιήσει αριθμούς με μονάδες, όπως μήκος, όγκο και μάζα. Μπορείτε να το κάνετε αυτό ρυθμίζοντας το στυλ προς την μονάδα. Όταν ορίζετε το στυλ σε μονάδα, πρέπει να καθορίσετε αυτές τις επιλογές:

  • μονάδα: Αυτή η ιδιότητα καθορίζει τη μονάδα που θα χρησιμοποιηθεί για τη μορφοποίηση, όπως "meter", "kilogram", "liter", "second" και ούτω καθεξής.
  • Εμφάνιση μονάδας: Αυτή η ιδιότητα καθορίζει πώς το πρόγραμμα περιήγησης πρέπει να εμφανίζει τη μονάδα. Μπορείτε να το ρυθμίσετε σε οποιοδήποτε από τα δύο μακρύς (10 λίτρα), μικρός (10 L), ή στενός (10l).

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

συνθ αριθμός = 123456;
συνθ locale = getUserLocale();
συνθ επιλογές = {
 στυλ: "μονάδα",
 μονάδα: "λίτρο",
 Εμφάνιση μονάδας: "μακρύς",
};


συνθ μορφοποιητής = νέοςIntl.NumberFormat (τοπική τοποθεσία, επιλογές);
κονσόλα.log (formatter.format (αριθμός)); //123.456 λίτρα

Το μπλοκ κωδικών παραπάνω μορφοποιεί τον αριθμό 123.456 ως μονάδα σε λίτρα.

Εναλλακτικές λύσεις για το Intl API

Το Intl API παρέχει ένα ισχυρό και ευέλικτο σύνολο εργαλείων για τη μορφοποίηση ημερομηνιών, αριθμών, νομισμάτων και μονάδων σε εφαρμογές JavaScript. Υποστηρίζει πολλές τοπικές ρυθμίσεις και παρέχει έναν συνεπή τρόπο μορφοποίησης δεδομένων σε διαφορετικούς πολιτισμούς και γλώσσες.

Μπορεί να θέλετε να χρησιμοποιήσετε μια εναλλακτική βιβλιοθήκη, όπως η Luxon ή η Day.js, λόγω της περιορισμένης υποστήριξης του προγράμματος περιήγησης για Intl. Τελικά, η απόφαση μεταξύ του Intl API ή μιας εναλλακτικής εξαρτάται από τις συγκεκριμένες απαιτήσεις και περιορισμούς του έργου σας.