M

MLOG

Italiano

Sfrutta la portata globale con l'API JavaScript Intl. Scopri le best practice di internazionalizzazione per formattare date, numeri, valute e altro, garantendo un'esperienza utente perfetta in tutto il mondo.

API JavaScript Intl: Best Practice di Internazionalizzazione per un Pubblico Globale

Nel mondo interconnesso di oggi, creare applicazioni web che si rivolgono a un pubblico globale è fondamentale. L'API JavaScript Intl fornisce strumenti potenti per l'internazionalizzazione (i18n), consentendoti di formattare date, numeri, valute e altro in base alle convenzioni delle diverse impostazioni locali. Questo articolo esplora le best practice per sfruttare l'API Intl per creare applicazioni veramente globali.

Comprendere l'internazionalizzazione (i18n) e la localizzazione (l10n)

Prima di immergersi nelle specifiche dell'API Intl, è importante capire la distinzione tra internazionalizzazione (i18n) e localizzazione (l10n). I18n è il processo di progettazione e sviluppo di applicazioni in modo che possano essere facilmente adattate per diverse lingue e regioni senza richiedere modifiche ingegneristiche. L10n, d'altra parte, è il processo di adattamento di un'applicazione internazionalizzata per una specifica impostazione locale traducendo il testo e personalizzando altri elementi specifici dell'impostazione locale.

L'API Intl si concentra sull'aspetto i18n, fornendo i meccanismi per la gestione dei dati sensibili alle impostazioni locali, mentre la localizzazione in genere comporta la fornitura di traduzioni e configurazioni specifiche dell'impostazione locale.

Componenti chiave dell'API Intl

L'API Intl è composta da diversi oggetti chiave, ognuno responsabile della gestione di aspetti specifici dell'internazionalizzazione:

Best practice per l'utilizzo dell'API Intl

Per utilizzare efficacemente l'API Intl e garantire un'esperienza utente positiva per il tuo pubblico globale, considera le seguenti best practice:

1. Specifica l'impostazione locale corretta

Il fondamento dell'internazionalizzazione è specificare l'impostazione locale corretta. L'impostazione locale identifica la lingua, la regione e qualsiasi variante specifica da utilizzare per la formattazione. È possibile ottenere l'impostazione locale preferita dall'utente dalla proprietà navigator.language o dall'intestazione HTTP Accept-Language.

Quando si creano oggetti Intl, è possibile specificare l'impostazione locale come una stringa o un array di stringhe. Se fornisci un array, l'API tenterà di trovare l'impostazione locale più adatta tra le opzioni disponibili.

Esempio:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

Se l'impostazione locale preferita dall'utente non è disponibile, è possibile fornire un'impostazione locale di fallback. Ad esempio, potresti utilizzare 'en-US' come predefinito se il browser dell'utente segnala un'impostazione locale non supportata.

2. Sfrutta Intl.DateTimeFormat per la formattazione di data e ora

Formattare correttamente date e ore è fondamentale per fornire un'esperienza localizzata. L'oggetto Intl.DateTimeFormat ti consente di formattare date e ore in base alle convenzioni di una specifica impostazione locale.

È possibile personalizzare la formattazione specificando varie opzioni, come l'anno, il mese, il giorno, l'ora, i minuti e il formato dei secondi. È inoltre possibile specificare il fuso orario per garantire che date e ore vengano visualizzate correttamente per gli utenti in diverse parti del mondo.

Esempio:

const locale = 'de-DE'; // Tedesco (Germania)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Output: z.B. "22. Mai 2024, 14:30"
console.log(formattedDate);

Questo esempio formatta la data e l'ora correnti in base alle impostazioni locali tedesche (Germania), inclusi l'anno, il mese, il giorno, l'ora e i minuti. Specifica anche il fuso orario 'Europe/Berlin'.

Ricorda di considerare i diversi formati di data e ora utilizzati in tutto il mondo. Ad esempio, gli Stati Uniti usano MM/GG/AAAA, mentre molti altri paesi usano GG/MM/AAAA.

3. Usa Intl.NumberFormat per la formattazione di numeri, valute e percentuali

L'oggetto Intl.NumberFormat fornisce un modo flessibile per formattare numeri, valute e percentuali in base alle convenzioni specifiche dell'impostazione locale. È possibile personalizzare la formattazione specificando opzioni come valuta, stile (decimale, valuta o percentuale), cifre frazionarie minime e massime e altro ancora.

Esempio (Formattazione valuta):

const locale = 'ja-JP'; // Giapponese (Giappone)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Output: z.B. "\u00A512,346"
console.log(formattedAmount);

Questo esempio formatta il numero 12345.67 come yen giapponesi (JPY). Si noti come il simbolo di valuta (￥) e il separatore di raggruppamento (,) vengono regolati automaticamente in base alle impostazioni locali giapponesi.

Esempio (Formattazione percentuale):

const locale = 'ar-EG'; // Arabo (Egitto)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Output: z.B. "\u066B\u0660\u0660\u066A"
console.log(formattedPercentage);

Questo esempio formatta il numero 0.75 come percentuale in arabo (Egitto). L'output include il segno di percentuale arabo (٪) e due posizioni decimali.

Considerazioni importanti per la formattazione della valuta:

4. Gestire correttamente la pluralizzazione con Intl.PluralRules

Le regole di pluralizzazione variano in modo significativo tra le lingue. Ad esempio, l'inglese ha regole semplici con forme singolari e plurali, mentre altre lingue hanno regole più complesse basate sul valore del numero. L'oggetto Intl.PluralRules ti aiuta a determinare la forma plurale corretta per un dato numero e impostazione locale.

Esempio:

const locale = 'ru-RU'; // Russo (Russia)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (singolare)
    case 'few': return 'товара'; // tovara (pochi)
    case 'many': return 'товаров'; // tovarov (molti)
    default: return 'товаров'; // Predefinito a molti
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Output: "5 товаров"

Questo esempio dimostra come utilizzare Intl.PluralRules per ottenere la forma plurale corretta per la parola "товар" (articolo) in russo. Il russo ha diverse forme plurali a seconda che il numero termini con 1, 2-4 o 5-9.

5. Formattare gli elenchi con Intl.ListFormat

Quando si presentano elenchi di elementi, la formattazione può variare a seconda delle impostazioni locali. L'oggetto Intl.ListFormat ti consente di formattare gli elenchi in base alle convenzioni specifiche dell'impostazione locale, incluso l'uso di diverse congiunzioni (ad es. "e", "o") e separatori di elenchi (ad es. virgole, punti e virgola).

Esempio:

const locale = 'es-ES'; // Spagnolo (Spagna)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Output: "manzanas, naranjas y plátanos"
console.log(formattedList);

Questo esempio formatta un elenco di frutta in spagnolo (Spagna), usando la congiunzione "y" (e) per collegare gli ultimi due elementi.

6. Formattare i tempi relativi con Intl.RelativeTimeFormat

Visualizzare i tempi relativi (ad es. "ieri", "tra 2 ore") fornisce un modo intuitivo per presentare le informazioni sull'ora. L'oggetto Intl.RelativeTimeFormat ti consente di formattare i tempi relativi in base alle convenzioni specifiche dell'impostazione locale.

Esempio:

const locale = 'fr-CA'; // Francese (Canada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Output: "hier"
console.log(rtf.format(2, 'day')); // Output: "dans 2 jours"

Questo esempio formatta i tempi relativi in francese (Canada). L'output mostra "hier" (ieri) e "dans 2 jours" (tra 2 giorni).

L'opzione `numeric` controlla come vengono visualizzati i numeri. `'auto'` visualizza le parole relative quando sono disponibili (come "ieri") e i numeri altrimenti. `'always'` visualizza sempre i numeri.

7. Ordinare le stringhe con Intl.Collator

Il confronto tra stringhe è sensibile alle impostazioni locali. Il modo in cui le stringhe vengono ordinate varia a seconda della lingua. Ad esempio, in tedesco, il carattere "ä" viene in genere ordinato come "a", mentre in svedese viene ordinato dopo "z". L'oggetto Intl.Collator ti consente di confrontare le stringhe in base alle regole di una specifica impostazione locale.

Esempio:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Output: ["äpfel", "aprikosen", "bananen", "birnen"]

Questo esempio ordina un array di parole tedesche usando Intl.Collator. Si noti che "äpfel" viene ordinato prima di "aprikosen", anche se "ä" viene dopo nell'alfabeto.

8. Gestire i casi limite e i dati mancanti

Non tutte le impostazioni locali sono supportate da ogni browser o ambiente. È essenziale gestire i casi limite in cui un'impostazione locale non è disponibile o quando mancano dati. Considera le seguenti strategie:

9. Testare a fondo con diverse impostazioni locali

Testare a fondo è fondamentale per garantire che l'applicazione internazionalizzata funzioni correttamente per tutte le impostazioni locali supportate. Testa la tua applicazione con una varietà di impostazioni locali, incluse le lingue che utilizzano diversi set di caratteri, formati di data e ora, formati numerici e regole di pluralizzazione.

Prendi in considerazione l'utilizzo di strumenti di test automatizzati per verificare che la tua applicazione si comporti come previsto in diverse impostazioni locali.

10. Considerare le implicazioni sulle prestazioni

Sebbene l'API Intl sia generalmente efficiente, la creazione di oggetti Intl può essere relativamente costosa. Per ottimizzare le prestazioni, considera quanto segue:

Oltre l'API Intl: ulteriori considerazioni per l'internazionalizzazione

Sebbene l'API Intl fornisca strumenti potenti per la formattazione dei dati, l'internazionalizzazione implica più della semplice formattazione. Considera i seguenti aspetti aggiuntivi:

Conclusione

L'API JavaScript Intl è uno strumento prezioso per la creazione di applicazioni web che si rivolgono a un pubblico globale. Seguendo le best practice delineate in questo articolo, puoi creare applicazioni che non sono solo funzionali, ma anche culturalmente sensibili e facili da usare per gli utenti di tutto il mondo. Abbraccia la potenza dell'API Intl e sblocca il potenziale della tua applicazione sulla scena globale. Padroneggiare l'API Intl si tradurrà in un'esperienza più inclusiva e accessibile per tutti i tuoi utenti, indipendentemente dalla loro posizione o lingua.