Qu'est-ce que l'API JavaScript Internationalisation (I18N)?

L'anglais est la langue la plus parlée le plus parlée au monde, mais une seule personne sur sept parle anglais. C'est la première langue (langue maternelle) de 379 millions de personnes, mais il y a 917 millions de personnes qui parlent du mandarin, 460 millions de personnes qui parlent l'espagnol et 341 millions de personnes qui parlent l'hindi.

De nombreux utilisateurs non anglophones vivent sur des marchés émergents, la croissance Internet augmentant de façon exponentielle. Si votre application Web peut être traduite à l'échelle mondiale, votre marché cible potentiel peut augmenter de 700%!

API JavaScript Internationalisé (également connu sous le nom de I18N) vous permet de concevoir des pages et des applications Web afin qu'ils puissent facilement s'adapter aux besoins des utilisateurs qui parlent différents langues.

Dans cet article, nous examinerons les différentes méthodes fournies par l'API et comment les implémenter dans votre code pour atteindre un public international plus large.

points clés

• L'API de l'internationalisation JavaScript (I18N) favorise l'adaptation des applications Web à un public mondial en soutenant diverses langues et normes culturelles.
• À l'aide d'objets INTL, les développeurs peuvent formater les dates, les temps, les nombres et les listes basées sur les préférences locales, qui peuvent varier selon la région.
L'API
• comprend des fonctions telles que Intl.DateTimeFormat() et Intl.NumberFormat(), qui acceptent les identificateurs régionaux pour présenter des informations dans un format familier à l'utilisateur.
• Les fonctionnalités avancées telles que la mise en forme du temps relatif (Intl.RelativeTimeFormat) et le formatage sensible au pluriel (Intl.PluralRules) permettent des applications plus nuancées et culturellement conformes.
• Malgré ses puissantes capacités, l'API JavaScript INTL nécessite une mise en œuvre minutieuse pour gérer efficacement les différences linguistiques et culturelles et garantir que les applications sont vraiment internationalisées.

L'internationalisation (i18n) peut être délicate

L'internationalisation semble facile… jusqu'à ce que vous essayiez de le faire .

Les langues latines peuvent être similaires à la surface. Par exemple, le formulaire de demande de nom, de courrier électronique et de date est traduit comme suit:

• Espagnol: nombre, e-mail, fecha
• français: nom, e-mail, date
• allemand: nom, e-mail, datum

Les systèmes d'internationalisation et de localisation de GetText existent depuis des décennies, et la plupart des langages de programmation ont des bibliothèques disponibles.

Dans un cas plus simple, vous pouvez utiliser un formulaire de tokenisation. Par exemple, prenez un modèle HTML qui contient les éléments suivants:

<code><label> for="name"></label>{{ NAME }}>
</code>

Cela remplacera dynamiquement "nom" lorsque l'utilisateur définit l'anglais comme langue principale. Malheureusement, c'est là que vos problèmes d'interface utilisateur commencent à apparaître:

1. La même langue peut avoir des variations différentes. L'utilisation de l'espagnol en Espagne n'est pas exactement la même que en Amérique du Sud.
2. Les mots dans une langue peuvent croître beaucoup plus longtemps dans d'autres langues. Par exemple, "Email" est traduit en russe comme "электронноrière письм".
3. Le texte n'est pas toujours disposé de gauche à droite. Certains sont écrits de droite à gauche - comme l'arabe, l'hébreu, le kurde et le yiddish. D'autres langues peuvent être écrites de haut en bas, comme chinois, coréenne, japonaise et taïwanais.

De nombreux problèmes peuvent être résolus en gardant le texte au minimum et en le présentant avec des propriétés CSS telles que l'orientation, les modèles d'écriture et les dimensions logiques.

le terme confusion

Une confusion supplémentaire se produit lorsque votre application doit afficher les dates, le temps, les nombres, la monnaie ou les unités.

Envisagez d'afficher la date comme "12/03/24". Il sera interprété comme:

• Les résidents des États-Unis.
Les résidents de l'Europe, de l'Amérique du Sud et de l'Asie au format DMY l'ont interprété comme "12 mars 2024",
Les résidents du Canada, de la Chine, du Japon et de la Hongrie en utilisant le format YMD plus pratique l'interpréteront comme «24 mars 2012».

(veuillez noter que les barres obliques du séparateur de date ne sont pas couramment utilisées dans toutes les langues!)

Le nombre "1 000" sera interprété comme:

Les gens des États-Unis, de la Grande-Bretagne, du Canada, de la Chine et du Japon l'interprèteront comme "mille",
Les gens en Espagne, en France, en Allemagne et en Russie l'interpréteraient comme "un (point zéro)" parce que les fractions décimales de ces pays sont séparées par des virgules.

Même en anglais seul, la situation peut être compliquée. Le terme «1 000 mètres» signifie:

1 km (ou 0,62 mi) pour les résidents américains
Pour les habitants du Royaume-Uni, du Canada et de l'Australie, c'est une collection de mille instruments de mesure!

JavaScript intl api

L'objet JavaScript INTL peu connu implémente l'API internationalisée ECMAScript dans la plupart des navigateurs et des temps d'exécution modernes. Le support est généralement bon, et même IE11 a de nombreuses méthodes plus utiles. Pour les navigateurs plus anciens, il y a un polyfill et l'API peut être détecté comme ceci:

L'API

<code><label> for="name"></label>{{ NAME }}>
</code>

est un peu inhabituelle. Il fournit des constructeurs d'objets pour les dates, les heures, les nombres et les listes qui transmettent des localités et des objets facultatifs contenant des paramètres de configuration. Par exemple, il s'agit d'un objet DateTime qui spécifie l'anglais américain:

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

Cet objet peut être utilisé plusieurs fois pour appeler diverses méthodes qui transmettent la valeur de la date () (ou temporel ES6 disponible). La méthode de format est généralement l'option la plus pratique. Par exemple:

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Alternativement, vous pouvez créer un objet INTL dans une ligne de code et exécuter la méthode:

<code>const valentinesDay = dateFormatter.format( new Date('2022-02-14') );
// 返回美国格式“2/14/2022”

const starwarsDay = dateFormatter.format( new Date('2022-05-04') );
// 返回美国格式“5/4/2022”
</code>

En plus de la méthode Format (), certains objets prennent également en charge les méthodes suivantes:

• FormAttopArts (): Renvoie un tableau d'objets contenant des chaînes formatées, par exemple {type: 'Weekday', valeur: 'lundi'}
• résolvedOptions (): Renvoie un nouvel objet contenant des propriétés qui reflètent les options de paramètres régionaux et de formatage utilisés, tels que DateFormatter.ResolvedOptions (). Locale.

Définissez le lieu

Tous les objets INTL nécessitent un paramètre régional. Ceci est une chaîne qui s'identifie:

• Sous-Tag de la langue
• SUBTAGE SCRIPT (Facultatif)
• Sous-tag de région (ou pays) (facultatif)
• une ou plusieurs sous-trags variants (facultatif)
• Une ou plusieurs séquences d'extension BCP 47 (facultative)
• Séquence d'extension à usage spécial (facultatif)

La langue et la région sont généralement suffisantes. Par exemple, "En-US", "FR-Fr", etc.

En plus d'utiliser des chaînes, vous pouvez également utiliser l'objet intl.locale pour construire des localités, comme l'anglais américain en format 12 heures:

<code><label> for="name"></label>{{ NAME }}>
</code>

Ceci peut être utilisé dans un autre constructeur INTL. Par exemple:

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

Si le lieu n'est pas défini, la langue actuelle et les paramètres régionaux de l'appareil sont utilisés. Par exemple:

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Cela renvoie "5/4/2022" sur les appareils fixés aux États-Unis et "04/05/2022" sur les appareils fixés au Royaume-Uni.

Date et heure

L'outil suivant montre un exemple de dates et de temps formatés à l'aide de intl.datetimeFormat () (nous sommes profondément désolés si votre langue ou votre région n'est pas répertoriée!):

(L'exemple de codepen doit être intégré ici, mais comme je ne peux pas intégrer directement des ressources externes, je ne peux que fournir une description de texte.) L'exemple de codePen montre plusieurs façons de formater les dates et les temps dans différentes régions et langues en utilisant Intl.DateTimeFormat(), y compris différents styles de date (complet, long, moyen, court) et des styles de temps (complet, long, moyen, court), ainsi que d'autres options telles que le calendrier, le fuseau horaire, etc.

Le constructeur passe des paramètres régionaux et des objets d'option. Il existe de nombreuses propriétés possibles à cela, bien que vous ayez rarement besoin de dépasser Datestyle et / ou Immatyle:

(Ce devrait être un tableau ici, mais comme je ne peux pas créer le tableau directement, je ne peux fournir qu'une description de texte.) Le tableau répertorie les propriétés de Intl.DateTimeFormat() et leurs descriptions, y compris dateStyle, timeStyle, calendar, dayPeriod>, numberingSystem, localeMatcher, timeZone, hour12, hourCycle, formatMatcher, weekday, era, year, month, day, hour, minute, second, timeZoneName,

,

,

,

<code>const valentinesDay = dateFormatter.format( new Date('2022-02-14') );
// 返回美国格式“2/14/2022”

const starwarsDay = dateFormatter.format( new Date('2022-05-04') );
// 返回美国格式“5/4/2022”
</code>

,

, etc.

Exemple:

<code>const starwarsDay = new Intl.DateTimeFormat('en-US').format( new Date('2022-05-04') );
</code>

Date Range

La méthode Formatrange () prend deux dates et formats la période de la manière la plus concise, selon les paramètres régionaux et les options. Par exemple: Cette méthode a une plage de support de navigateur plus petite, mais elle est implémentée dans Chrome 76.

période relative

intl.relativeTimeFormat () peut afficher des périodes par rapport à ce moment. L'objet d'option a moins d'options:

(Ce devrait être un tableau ici, mais comme je ne peux pas créer le tableau directement, je ne peux fournir qu'une description de texte.) Le tableau répertorie les propriétés de Intl.RelativeTimeFormat() et leurs descriptions, y compris localeMatcher, numeric, style,

> Attendez.

Format () La méthode passe les valeurs et les unités: "année", "trimestre", "mois", "semaine", "jour", "heure", "minute" ou "deuxième". Exemple:

<code><label> for="name"></label>{{ NAME }}>
</code>

Digitals, devises, pourcentages et unités

L'outil suivant montre un exemple de nombres de formatage, de devises, de pourcentages et d'unités de mesure à l'aide de intl.numberformat ():

Intl.NumberFormat() (L'exemple de codepen doit être intégré ici, mais comme je ne peux pas intégrer directement des ressources externes, je ne peux fournir qu'une description de texte.) L'exemple de codepen montre comment formater les nombres, les devises, les pourcentages et les unités dans différentes régions et langues utilisant notation, y compris différents styles (décimal, devise, pourcentage, unité) et des options telles que currency, currencyDisplay, unit, unitDisplay, useGrouping, minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, minimumSignificantDigits, maximumSignificantDigits,

,

,

, 🎜>,

, Intl.NumberFormat(), numberingSystem, etc. notation style Le constructeur passe les objets de paramètres régionaux et d'option: currency currencyDisplay (Ce devrait être un tableau ici, mais comme je ne peux pas créer le tableau directement, je ne peux fournir qu'une description de texte.) Le tableau répertorie les propriétés de currencySign et leurs descriptions, y compris unit, unitDisplay, useGrouping, minimumIntegerDigits>, minimumFractionDigits, maximumFractionDigits, minimumSignificantDigits, maximumSignificantDigits,

,

,

,

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

,

,

,

,

,

,

,

, etc. Intl.ListFormat() type Exemple: style

Liste

L'objet

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

intl.listformat () peut formater un tableau d'éléments dans une liste sensible à la langue. En anglais, cela nécessite généralement d'ajouter "et" ou "ou" avant le dernier élément.

Les propriétés suivantes peuvent être définies dans l'option objet:

(Ce devrait être un tableau ici, mais comme je ne peux pas créer le tableau directement, je ne peux fournir qu'une description de texte.) Le tableau répertorie les propriétés de et leurs descriptions, y compris , , etc. Exemple: pluriel L'objet intl.pluralRules () légèrement étrange prend en charge les règles de langage sensible au pluriel, où vous avez plusieurs éléments. L'objet d'option peut définir la propriété Type sur:

• base: le nombre de choses (valeur par défaut), ou
• Numéro ordinal: classement des choses, comme le premier, le deuxième ou le troisième en anglais

La méthode

select () renvoie une chaîne anglaise représentant la catégorie plurielle du nombre numérique (zéro, un, deux, minorité, majorité ou autre).

Exemple:

<code><label> for="name"></label>{{ NAME }}>
</code>

Comparaison des chaînes

Enfin, l'objet intl.collator () prend en charge les comparaisons de chaînes sensibles à la langue. Son objet d'option peut définir les propriétés suivantes:

(Ce devrait être un tableau ici, mais comme je ne peux pas créer le tableau directement, je ne peux fournir qu'une description de texte.) Le tableau répertorie les propriétés de Intl.Collator() et leurs descriptions, y compris collation, numeric, etc.

La méthode

compare () compare deux chaînes. Par exemple:

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

Profit!

Si vous utilisez JavaScript pour afficher des données, vous devriez pouvoir afficher des informations directement dans le format local de l'utilisateur. Par exemple, le code suivant définit une fonction DateFormat () qui utilise le format de date court INTL ou retombe à yyyy-mm-dd si le format n'est pas pris en charge:

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Cela en soi ne facilite pas votre application pour les publics internationaux, mais c'est le premier pas de plus de la distribution mondiale.

FAQ (FAQ) sur l'API de l'internationalisation JavaScript (I18N)

Quel est le but de l'API de l'internationalisation JavaScript (I18N)?

L'API d'internationalisation JavaScript (également connue sous le nom de I18N) est une API JavaScript intégrée qui fournit des comparaisons de chaînes sensibles à la langue, la mise en forme numérique et le formatage de date et d'heure. Il permet aux développeurs d'internationaliser leurs applications en fournissant un soutien à différentes langues et conventions culturelles. Ceci est particulièrement utile pour les applications utilisées dans le monde entier, car elle leur permet de s'adapter aux conventions de langue et de format dans différentes régions.

Comment le formatage de la date et de l'heure du manche JavaScript I18N?

JavaScript I18N fournit un objet DateTimeFormat qui peut être utilisé pour formater les dates et les temps en fonction de différentes conventions culturelles. Cet objet prend les paramètres des paramètres locaux et options en tant que paramètres, qui définissent la convention de format à utiliser. L'objet Options peut spécifier le format de date, d'heure, de fuseau horaire et d'autres aspects du format de date et d'heure.

Comment gérer le formatage numérique dans JavaScript I18N?

JavaScript I18N fournit un objet NumberFormat qui peut être utilisé pour formater les nombres en fonction des différentes conventions culturelles. Cet objet prend les paramètres des paramètres locaux et options en tant que paramètres, qui définissent la convention de format à utiliser. L'objet d'option peut spécifier le style d'un nombre (décimal, pourcentage ou devise), l'utilisation de séparateurs de groupe, les décimales minimales et maximales et d'autres aspects du format numérique.

Comment gérer les comparaisons de chaînes dans JavaScript I18N?

JavaScript I18N fournit un objet de collator qui peut être utilisé pour comparer les chaînes en fonction des différentes conventions culturelles. Cet objet prend les paramètres des paramètres locaux et options en tant que paramètres, qui définissent la convention de comparaison à utiliser. L'objet Option peut spécifier la sensibilité des comparaisons (base, accent, cas ou variant), l'utilisation du tri numérique et d'autres aspects de la comparaison des chaînes.

Comment spécifier les paramètres régionaux pour JavaScript I18n?

Lors de la création d'un objet DateTimeFormat, NumberFormat ou Collator, vous pouvez spécifier le paramètre paramètre. Un lieu est une chaîne qui représente la langue et la région, telles que "en-us" en anglais américain ou "FR-Fr" en français utilisé en France. Si le lieu n'est pas spécifié, les paramètres par défaut de l'environnement JavaScript sont utilisés.

Puis-je utiliser plusieurs localités avec JavaScript I18N?

Oui, lors de la création d'un objet DateTimeFormat, NumberFormat ou Collator, vous pouvez spécifier plusieurs localités en tant que tableau. JavaScript I18N utilisera le premier paramètre local qu'il prend en charge dans le tableau. Ceci est très utile pour les applications utilisées dans plusieurs régions, car elle leur permet de s'adapter aux conventions de langue et de format dans différentes régions.

Comment personnaliser les options de formatage de JavaScript I18N?

Lors de la création d'un objet DateTimeFormat, NumberFormat ou Collator, vous pouvez personnaliser les options de formatage pour JavaScript I18N en fournissant un objet d'option. L'objet d'option peut spécifier des aspects de la mise en forme ou de la comparaison, tels que le format des dates ou des nombres, la sensibilité des comparaisons de cordes, etc.

Puis-je utiliser JavaScript I18n avec d'autres API JavaScript?

Oui, JavaScript I18N peut être utilisé conjointement avec d'autres API JavaScript. Par exemple, vous pouvez utiliser un objet Date avec un objet DateTimeFormat pour formater les dates, ou vous pouvez utiliser un objet numérique avec un objet NumberFormat aux numéros de format. Cela vous permet de profiter de la puissance de JavaScript pour internationaliser vos applications.

JavaScript I18n est-il pris en charge par tous les navigateurs?

La plupart des navigateurs modernes (y compris Chrome, Firefox, Safari et Edge) prennent en charge Javascript I18N. Cependant, il peut ne pas être pris en charge par des navigateurs plus anciens ou certains navigateurs mobiles. Vous pouvez afficher le tableau de compatibilité du Mozilla Developer Network (MDN) pour les dernières informations sur la prise en charge du navigateur.

Où puis-je en savoir plus sur JavaScript I18n?

Vous pouvez en savoir plus sur JavaScript I18N de la spécification officielle de l'API internationale ECMAScript, du Mozilla Developer Network (MDN) et de divers tutoriels et articles en ligne. Ces ressources fournissent des informations détaillées sur l'API et son utilisation, ainsi que des exemples et les meilleures pratiques pour internationaliser les applications JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!