Ένας οριστικός οδηγός για τη διεθνοποίηση του προγράμματος περιήγησης-

Είναι μια συνηθισμένη εσφαλμένη αντίληψη ότι η διεθνοποίηση (I18N) αφορά απλώς τη μετάφραση κειμένου. Ενώ είναι κρίσιμη, η μετάφραση είναι απλώς μία πτυχή. Μία από τις πολυπλοκότητες βρίσκεται Προσαρμογή πληροφοριών για διαφορετικές πολιτιστικές προσδοκίες: Πώς εμφανίζετε μια ημερομηνία στην Ιαπωνία έναντι της Γερμανίας; Ποιος είναι ο σωστός τρόπος για να πληγοποιήσετε ένα στοιχείο στα αραβικά έναντι της αγγλικής γλώσσας; Πώς ταξινομείτε μια λίστα με ονόματα σε διάφορες γλώσσες;

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

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

Intl Και τοποθεσίες: περισσότερο από τους κωδικούς γλώσσας

Στο επίκεντρο του Intl βρίσκεται η έννοια του α μικρός λοβός. Ένα τοπίο είναι πολύ περισσότερο από έναν κωδικό γλώσσας δύο γραμμάτων (όπως en για αγγλικά ή es για ισπανικά). Ενσωματώνει το πλήρες πλαίσιο που απαιτείται για να παρουσιάσει κατάλληλα πληροφορίες για μια συγκεκριμένη πολιτιστική ομάδα. Αυτό περιλαμβάνει:

• Γλώσσα: Το κύριο γλωσσικό μέσο (π.χ. en, es, fr).
• Γραφή: Το σενάριο (π.χ., Latn για τα Λατινικά, Cyrl για κυριλλικά). Για παράδειγμα, zh-Hans Για απλοποιημένους Κινέζους, Vs. zh-Hant για παραδοσιακά κινέζικα.
• Περιοχή: Η γεωγραφική περιοχή (π.χ. US για τις Ηνωμένες Πολιτείες, GB για τη Μεγάλη Βρετανία, DE για τη Γερμανία). Αυτό είναι ζωτικής σημασίας για τις παραλλαγές εντός της ίδιας γλώσσας, όπως en-US εναντίον en-GBπου διαφέρουν σε ημερομηνία, ώρα και μορφοποίηση αριθμού.
• Προτιμήσεις/παραλλαγές: Περαιτέρω συγκεκριμένες πολιτιστικές ή γλωσσικές προτιμήσεις. Βλέπω “Επιλέγοντας μια γλωσσική ετικέτα” Από το W3C για περισσότερες πληροφορίες.

Συνήθως, θα θελήσετε να επιλέξετε την τοποθεσία σύμφωνα με τη γλώσσα της ιστοσελίδας. Αυτό μπορεί να προσδιοριστεί από το lang ιδιότης:

// Get the page's language from the HTML lang attribute
const pageLocale = document.documentElement.lang || 'en-US'; // Fallback to 'en-US'

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

// Force a specific locale regardless of page language
const tutorialFormatter = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' });

console.log(`Chinese example: ${tutorialFormatter.format(199.99)}`); // Output: ¥199.99

Σε ορισμένες περιπτώσεις, ίσως θελήσετε να χρησιμοποιήσετε την προτιμώμενη γλώσσα του χρήστη:

// Use the user's preferred language
const browserLocale = navigator.language || 'ja-JP';

const formatter = new Intl.NumberFormat(browserLocale, { style: 'currency', currency: 'JPY' });

Όταν δημιουργείτε ένα Intl Formatter, μπορείτε να περάσετε προαιρετικά μία ή περισσότερες τοπικές χορδές. Στη συνέχεια, το API θα επιλέξει την πιο κατάλληλη τοπική τοποθέτηση με βάση τη διαθεσιμότητα και την προτίμηση.

PowerHouses Core

Ο Intl Το αντικείμενο εκθέτει αρκετούς κατασκευαστές, το καθένα για μια συγκεκριμένη εργασία μορφοποίησης. Ας βυθίσουμε τα πιο συχνά χρησιμοποιούμενα, μαζί με μερικούς ισχυρούς, συχνά παραβλέπονται πολύτιμους λίθους.

1. Intl.DateTimeFormat: Ημερομηνίες και ώρες, παγκοσμίως

Οι ημερομηνίες και οι χρόνοι μορφοποίησης είναι ένα κλασικό πρόβλημα I18N. Πρέπει να είναι mm/dd/yyyy ή dd.mm.yyyy; Πρέπει ο μήνας να είναι αριθμός ή πλήρης λέξη; Intl.DateTimeFormat χειρίζεται όλα αυτά με ευκολία.

const date = new Date(2025, 6, 27, 14, 30, 0); // June 27, 2025, 2:30 PM

// Specific locale and options (e.g., long date, short time)
const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZoneName: 'shortOffset' // e.g., "GMT+8"
};

console.log(new Intl.DateTimeFormat('en-US', options).format(date));

// "Friday, June 27, 2025 at 2:30 PM GMT+8"
console.log(new Intl.DateTimeFormat('de-DE', options).format(date));

// "Freitag, 27. Juni 2025 um 14:30 GMT+8"

// Using dateStyle and timeStyle for common patterns
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'short' }).format(date));

// "Friday 27 June 2025 at 14:30"

console.log(new Intl.DateTimeFormat('ja-JP', { dateStyle: 'long', timeStyle: 'short' }).format(date));

// "2025年6月27日 14:30"

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

2. Intl.NumberFormat: Αριθμοί με πολιτιστική απόχρωση

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

const price = 123456.789;

// Currency formatting
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price));

// "$123,456.79" (auto-rounds)

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price));

// "123.456,79 €"

// Units
console.log(new Intl.NumberFormat('en-US', { style: 'unit', unit: 'meter', unitDisplay: 'long' }).format(100));

// "100 meters"

console.log(new Intl.NumberFormat('fr-FR', { style: 'unit', unit: 'kilogram', unitDisplay: 'short' }).format(5.5));

// "5,5 kg"

Επιλογές minimumFractionDigits, maximumFractionDigits, notation (π.χ., scientific, compact) Παρέχετε ακόμη λεπτότερο έλεγχο.

3. Intl.ListFormat: Λίστες φυσικής γλώσσας

Η παρουσίαση καταλόγων αντικειμένων είναι εκπληκτικά δύσκολη. Οι αγγλικές χρησιμοποιούν “και” για συνδυασμό και “ή” για αποσύνδεση. Πολλές γλώσσες έχουν διαφορετικούς συνδυασμούς και μερικές απαιτούν συγκεκριμένη στίξη.

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

const items = ('apples', 'oranges', 'bananas');

// Conjunction ("and") list
console.log(new Intl.ListFormat('en-US', { type: 'conjunction' }).format(items));

// "apples, oranges, and bananas"

console.log(new Intl.ListFormat('de-DE', { type: 'conjunction' }).format(items));

// "Äpfel, Orangen und Bananen"

// Disjunction ("or") list
console.log(new Intl.ListFormat('en-US', { type: 'disjunction' }).format(items));

// "apples, oranges, or bananas"

console.log(new Intl.ListFormat('fr-FR', { type: 'disjunction' }).format(items));

// "apples, oranges ou bananas"

4. Intl.RelativeTimeFormat: Χρονοδιακόπτες φιλικές προς τον άνθρωπο

Η εμφάνιση “πριν από 2 ημέρες” ή “σε 3 μήνες” είναι κοινή στο UI, αλλά ο εντοπισμός αυτών των φράσεων απαιτεί με ακρίβεια εκτεταμένα δεδομένα. Intl.RelativeTimeFormat αυτοματοποιεί αυτό.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

console.log(rtf.format(-1, 'day'));    // "yesterday"
console.log(rtf.format(1, 'day'));     // "tomorrow"
console.log(rtf.format(-7, 'day'));    // "7 days ago"
console.log(rtf.format(3, 'month'));   // "in 3 months"
console.log(rtf.format(-2, 'year'));   // "2 years ago"

// French example:
const frRtf = new Intl.RelativeTimeFormat('fr-FR', { numeric: 'auto', style: 'long' });

console.log(frRtf.format(-1, 'day'));    // "hier"
console.log(frRtf.format(1, 'day'));     // "demain"
console.log(frRtf.format(-7, 'day'));    // "il y a 7 jours"
console.log(frRtf.format(3, 'month'));   // "dans 3 mois"

Ο numeric: 'always' Η επιλογή θα αναγκάσει “πριν από 1 ημέρα” αντί για “χθες”.

5. Intl.PluralRules: Mastering Pluralization

Αυτό είναι αναμφισβήτητα μία από τις πιο κρίσιμες πτυχές του I18N. Οι διαφορετικές γλώσσες έχουν πολύ διαφορετικούς κανόνες για τον πλουραλισμό (π.χ. Αγγλικά έχουν μοναδικό/πληθυντικό, αραβικά έχει μηδέν, ένα, δύο, πολλά & mldr;). Intl.PluralRules Σας επιτρέπει να καθορίσετε την “πληθυντική κατηγορία” για έναν δεδομένο αριθμό σε μια συγκεκριμένη τοπική τοποθέτηση.

const prEn = new Intl.PluralRules('en-US');

console.log(prEn.select(0));    // "other" (for "0 items")
console.log(prEn.select(1));    // "one"   (for "1 item")
console.log(prEn.select(2));    // "other" (for "2 items")

const prAr = new Intl.PluralRules('ar-EG');

console.log(prAr.select(0));    // "zero"
console.log(prAr.select(1));    // "one"
console.log(prAr.select(2));    // "two"
console.log(prAr.select(10));   // "few"
console.log(prAr.select(100));  // "other"

Αυτό το API δεν πληροί απευθείας το κείμενο, αλλά παρέχει την βασική ταξινόμηση που απαιτείται για να επιλέξετε τη σωστή συμβολοσειρά μετάφρασης από τις δέσμες μηνυμάτων σας. Για παράδειγμα, εάν έχετε κλειδιά μηνυμάτων όπως item.one, item.otherθα χρησιμοποιούσατε pr.select(count) για να επιλέξετε το σωστό.

6. Intl.DisplayNames: Τοπικά ονόματα για τα πάντα

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

// Display language names in English
const langNamesEn = new Intl.DisplayNames(('en'), { type: 'language' });

console.log(langNamesEn.of('fr'));      // "French"
console.log(langNamesEn.of('es-MX'));   // "Mexican Spanish"

// Display language names in French
const langNamesFr = new Intl.DisplayNames(('fr'), { type: 'language' });

console.log(langNamesFr.of('en'));      // "anglais"
console.log(langNamesFr.of('zh-Hans')); // "chinois (simplifié)"

// Display region names
const regionNamesEn = new Intl.DisplayNames(('en'), { type: 'region' });

console.log(regionNamesEn.of('US'));    // "United States"
console.log(regionNamesEn.of('DE'));    // "Germany"

// Display script names
const scriptNamesEn = new Intl.DisplayNames(('en'), { type: 'script' });

console.log(scriptNamesEn.of('Latn'));  // "Latin"
console.log(scriptNamesEn.of('Arab'));  // "Arabic"

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

Υποστήριξη προγράμματος περιήγησης

Μπορεί να αναρωτιέστε για τη συμβατότητα του προγράμματος περιήγησης. Τα καλά νέα είναι ότι Intl έχει εξαιρετική υποστήριξη σε σύγχρονα προγράμματα περιήγησης. Όλα τα μεγάλα προγράμματα περιήγησης (Chrome, Firefox, Safari, Edge) υποστηρίζουν πλήρως την βασική λειτουργικότητα που συζητείται (DateTimeFormat, NumberFormat, ListFormat, RelativeTimeFormat, PluralRules, DisplayNames). Μπορείτε να χρησιμοποιήσετε με αυτοπεποίθηση αυτά τα API χωρίς πολυφίλους για την πλειοψηφία της βάσης χρηστών σας.

Συμπέρασμα: Αγκαλιάστε τον παγκόσμιο ιστό Intl

Ο Intl Το API είναι ένας ακρογωνιαίος λίθος της σύγχρονης ανάπτυξης ιστού για ένα παγκόσμιο ακροατήριο. Δίνει τη δυνατότητα στους προγραμματιστές του front-end να παραδώσουν εξαιρετικά εντοπισμένες εμπειρίες χρηστών Με ελάχιστη προσπάθεια, αξιοποιώντας τις ενσωματωμένες, βελτιστοποιημένες δυνατότητες του προγράμματος περιήγησης.

Υιοθετώντας Intlεσύ Μειώστε τις εξαρτήσεις, Μεγέθη πακέτων συρρίκνωσης, Βελτίωση της απόδοσηςόλοι εξασφαλίζοντας παράλληλα την αίτησή σας να σέβεται και να προσαρμόζεται στις ποικίλες γλωσσικές και πολιτιστικές προσδοκίες των χρηστών παγκοσμίως. Σταματήστε την πάλη με τη λογική προσαρμοσμένης μορφοποίησης και αγκαλιάστε αυτό το εργαλείο συμβατό με τα πρότυπα!

Είναι σημαντικό να το θυμάστε αυτό Intl χειρίζεται το μορφοποίηση των δεδομένων. Ενώ είναι απίστευτα ισχυρό, δεν λύει κάθε πτυχή της διεθνοποίησης. Η μετάφραση περιεχομένου, το αμφίδρομο κείμενο (RTL/LTR), η ειδική για την τοπική τυπογραφία και οι βαθιές πολιτιστικές αποχρώσεις πέρα ​​από τη μορφοποίηση δεδομένων εξακολουθούν να απαιτούν προσεκτική εξέταση. (Μπορώ να γράψω γι ‘αυτά στο μέλλον!) Ωστόσο, για την παρουσίαση δυναμικών δεδομένων με ακρίβεια και διαισθητικά, Intl είναι η απάντηση του προγράμματος περιήγησης.

Περαιτέρω ανάγνωση και πόρους