Comment formater des mesures comme 5 kilomètres ou 10 livres
Afficher la distance, le poids, la température et autres mesures avec un formatage et des unités adaptés à la locale
Introduction
Les mesures communiquent des quantités avec des unités qui leur donnent du sens. Cinq kilomètres indique une distance, dix livres indique un poids, et vingt degrés Celsius indique une température. Les applications qui affichent des mesures doivent montrer à la fois la valeur numérique et l'unité dans un format que les utilisateurs comprennent.
Différentes locales formatent les mesures différemment. Les Américains écrivent "5 km" ou "5 kilometers" selon le contexte. Les Allemands pourraient écrire "5 km" avec des conventions d'espacement différentes. La même mesure peut apparaître comme "5 km", "5km", ou "5 kilomètres" selon la locale et la verbosité souhaitée. Certaines régions utilisent des unités métriques tandis que d'autres utilisent des unités impériales, mais le formatage des unités varie également selon la locale.
JavaScript fournit l'API Intl.NumberFormat pour formater les mesures avec un formatage d'unité approprié à la locale. Cette leçon explique comment formater des mesures comme la distance, le poids, la température, le volume et la vitesse avec l'affichage d'unité correct pour n'importe quelle locale.
Les mesures nécessitent des unités pour le contexte
Les nombres sans unités manquent de sens dans de nombreux contextes. Le nombre 5 pourrait représenter 5 kilomètres, 5 miles, 5 mètres ou 5 pieds. Les utilisateurs ne peuvent pas interpréter la valeur sans connaître l'unité mesurée.
Les unités doivent être affichées de manière cohérente avec la valeur numérique. Lorsque vous écrivez "5 kilomètres", l'unité "kilomètres" est une information essentielle. Lorsque vous écrivez "10 livres", l'unité "livres" identifie la mesure comme un poids plutôt qu'une devise.
Différents systèmes d'unités existent pour le même type de mesure. La distance peut être mesurée en kilomètres, miles, mètres, pieds ou autres unités. Le poids peut être mesuré en kilogrammes, livres, onces ou grammes. La température peut être mesurée en Celsius, Fahrenheit ou Kelvin. Les applications doivent formater le système d'unités qu'elles utilisent d'une manière qui correspond aux attentes des utilisateurs.
Formater des unités avec Intl.NumberFormat
Le constructeur Intl.NumberFormat crée un formateur d'unités lorsque vous passez style: 'unit' dans les options. Vous devez également spécifier quelle unité formater en utilisant l'option unit avec un identifiant d'unité.
const formatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
console.log(formatter.format(5));
// Résultat : "5 km"
Cela crée un formateur pour l'anglais américain qui affiche les valeurs en kilomètres. La méthode format() convertit le nombre en une chaîne avec l'abréviation de l'unité kilomètre.
L'option unit accepte des identifiants d'unités standardisés. Ces identifiants utilisent des mots en minuscules séparés par des traits d'union. Les identifiants courants incluent kilometer, meter, mile, pound, kilogram, celsius, fahrenheit, liter, et gallon.
const distanceFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
const weightFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'pound'
});
console.log(distanceFormatter.format(5));
// Résultat : "5 km"
console.log(weightFormatter.format(10));
// Résultat : "10 lb"
Chaque formateur applique automatiquement l'abréviation d'unité appropriée pour l'unité spécifiée. Vous n'avez pas besoin de savoir quelle abréviation correspond à chaque identifiant d'unité.
La locale détermine le formatage des unités
Le paramètre de locale contrôle la façon dont les unités sont formatées, y compris l'espacement, les séparateurs et les abréviations d'unités. La même unité produit des résultats différents selon la locale.
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'unit',
unit: 'kilometer'
});
const frFormatter = new Intl.NumberFormat('fr-FR', {
style: 'unit',
unit: 'kilometer'
});
console.log(usFormatter.format(5));
// Résultat : "5 km"
console.log(deFormatter.format(5));
// Résultat : "5 km"
console.log(frFormatter.format(5));
// Résultat : "5 km"
Bien que les kilomètres utilisent des abréviations similaires dans différentes locales, les conventions d'espacement et de séparateurs varient. L'API Intl gère automatiquement ces règles de formatage spécifiques à chaque locale.
Affichage de la verbosité de l'unité de contrôle
L'option unitDisplay contrôle si les unités apparaissent sous forme abrégée, complète ou minimale. L'option accepte trois valeurs : "short" pour les abréviations, "long" pour les noms d'unités complets, et "narrow" pour l'affichage minimal.
const shortFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'short'
});
const longFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'long'
});
const narrowFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'narrow'
});
console.log(shortFormatter.format(5));
// Output: "5 km"
console.log(longFormatter.format(5));
// Output: "5 kilometers"
console.log(narrowFormatter.format(5));
// Output: "5km"
Le format short utilise des abréviations standard comme "km" ou "lb". Le format long utilise des noms d'unités complets comme "kilometers" ou "pounds". Le format narrow utilise un affichage minimal avec un espacement réduit ou inexistant. La valeur par défaut est short lorsque vous ne spécifiez pas unitDisplay.
La locale affecte l'apparence des unités en forme longue. Les noms d'unités complets sont traduits et ajustés selon les règles grammaticales de chaque langue.
const enFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'long'
});
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'long'
});
const esFormatter = new Intl.NumberFormat('es-ES', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'long'
});
console.log(enFormatter.format(5));
// Output: "5 kilometers"
console.log(deFormatter.format(5));
// Output: "5 Kilometer"
console.log(esFormatter.format(5));
// Output: "5 kilómetros"
Chaque locale fournit la traduction appropriée et la forme grammaticale pour le nom de l'unité.
Formater les mesures de poids
Les mesures de poids utilisent des identifiants d'unité comme pound, kilogram, ounce, et gram. Ces identifiants fonctionnent de la même manière que les unités de distance.
const poundFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'pound'
});
const kilogramFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilogram'
});
console.log(poundFormatter.format(10));
// Output: "10 lb"
console.log(kilogramFormatter.format(10));
// Output: "10 kg"
Vous pouvez formater le poids en forme longue pour afficher les noms d'unités complets.
const formatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'pound',
unitDisplay: 'long'
});
console.log(formatter.format(1));
// Output: "1 pound"
console.log(formatter.format(10));
// Output: "10 pounds"
Le formateur gère automatiquement les formes singulières et plurielles en fonction de la valeur. Une livre utilise la forme singulière tandis que dix livres utilise la forme plurielle.
Formater les mesures de température
Les mesures de température utilisent des identifiants d'unité comme celsius et fahrenheit. Ces unités sont formatées avec des symboles de degré en forme abrégée.
const celsiusFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'celsius'
});
const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'fahrenheit'
});
console.log(celsiusFormatter.format(20));
// Output: "20°C"
console.log(fahrenheitFormatter.format(68));
// Output: "68°F"
La forme longue affiche les noms complets des échelles de température.
const celsiusFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'celsius',
unitDisplay: 'long'
});
const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'fahrenheit',
unitDisplay: 'long'
});
console.log(celsiusFormatter.format(20));
// Output: "20 degrees Celsius"
console.log(fahrenheitFormatter.format(68));
// Output: "68 degrees Fahrenheit"
Le formatage de température inclut automatiquement la terminologie de degré appropriée pour chaque échelle.
Formater les mesures de volume
Les mesures de volume utilisent des identifiants d'unité comme liter, gallon, milliliter, et fluid-ounce. Ils fonctionnent comme d'autres types d'unités.
const literFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'liter'
});
const gallonFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'gallon'
});
console.log(literFormatter.format(2));
// Output: "2 L"
console.log(gallonFormatter.format(2));
// Output: "2 gal"
Les unités de volume prennent également en charge l'affichage en forme longue avec une orthographe spécifique à la locale.
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'liter',
unitDisplay: 'long'
});
const gbFormatter = new Intl.NumberFormat('en-GB', {
style: 'unit',
unit: 'liter',
unitDisplay: 'long'
});
console.log(usFormatter.format(2));
// Output: "2 liters"
console.log(gbFormatter.format(2));
// Output: "2 litres"
La locale anglaise britannique utilise "litres" tandis que l'anglais américain utilise "liters".
Formater les unités composées
Les unités composées combinent deux unités simples avec une relation "par". Les mesures de vitesse comme les miles par heure ou les kilomètres par heure utilisent des unités composées. Les mesures d'efficacité de carburant comme les litres aux 100 kilomètres utilisent également des unités composées.
Les identifiants d'unités composées joignent deux unités simples avec -per-. Par exemple, mile-per-hour combine les miles et les heures, kilometer-per-hour combine les kilomètres et les heures.
const mphFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'mile-per-hour'
});
const kphFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer-per-hour'
});
console.log(mphFormatter.format(60));
// Output: "60 mph"
console.log(kphFormatter.format(100));
// Output: "100 km/h"
Chaque unité composée est formatée avec l'abréviation appropriée combinant les deux parties de l'unité.
La forme longue affiche les unités composées avec des noms complets et des prépositions appropriées à la locale.
const formatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'mile-per-hour',
unitDisplay: 'long'
});
console.log(formatter.format(60));
// Output: "60 miles per hour"
Le formateur construit automatiquement la phrase d'unité composée en utilisant la grammaire correcte pour la locale.
Obtenir les identifiants d'unités disponibles
La méthode Intl.supportedValuesOf() renvoie un tableau de tous les identifiants d'unités pris en charge dans votre environnement JavaScript. Cette méthode prend la chaîne 'unit' comme argument.
const units = Intl.supportedValuesOf('unit');
console.log(units);
// Sortie : Tableau d'identifiants d'unités comme :
// ["acre", "bit", "byte", "celsius", "centimeter", "day",
// "degree", "fahrenheit", "fluid-ounce", "foot", "gallon",
// "gram", "hectare", "hour", "inch", "kilogram", "kilometer",
// "liter", "meter", "mile", "millimeter", "ounce", "pound",
// "second", "stone", "week", "yard", ...]
Le tableau renvoyé comprend toutes les unités simples disponibles pour le formatage. Vous pouvez utiliser n'importe quel identifiant de ce tableau avec l'option unit.
Cette méthode est utile lorsque vous devez vérifier si une unité spécifique est prise en charge ou lorsque vous souhaitez fournir aux utilisateurs une liste des unités disponibles.
const units = Intl.supportedValuesOf('unit');
const hasKilometer = units.includes('kilometer');
const hasPound = units.includes('pound');
console.log(hasKilometer);
// Sortie : true
console.log(hasPound);
// Sortie : true
Vous pouvez vérifier la disponibilité d'unités spécifiques avant de créer des formateurs pour gérer les environnements avec différents niveaux de support.
Combiner avec des options de formatage de nombres
Les formateurs d'unités prennent en charge les mêmes options de formatage de nombres que les autres styles Intl.NumberFormat. Vous pouvez contrôler les décimales, les chiffres significatifs et d'autres propriétés numériques.
const formatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
maximumFractionDigits: 2
});
console.log(formatter.format(5.123));
// Sortie : "5.12 km"
console.log(formatter.format(5.5));
// Sortie : "5.5 km"
Le formateur applique les règles d'arrondi et de décimales avant d'ajouter l'unité.
Vous pouvez formater de grands nombres avec des séparateurs de milliers.
const formatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
console.log(formatter.format(12345.67));
// Sortie : "12,345.67 km"
Toutes les fonctionnalités standard de formatage de nombres fonctionnent avec le formatage d'unités.
Formater les mesures selon la locale de l'utilisateur
Au lieu de coder en dur une locale spécifique, vous pouvez utiliser les préférences de langue du navigateur de l'utilisateur. La propriété navigator.language renvoie la locale préférée de l'utilisateur.
const userLocale = navigator.language;
const formatter = new Intl.NumberFormat(userLocale, {
style: 'unit',
unit: 'kilometer'
});
console.log(formatter.format(5));
// Le résultat varie selon la locale de l'utilisateur
Cette approche affiche les mesures selon les attentes de formatage de chaque utilisateur. Différents utilisateurs voient la même mesure formatée selon les conventions de leur locale.
Afficher les mesures dans les applications
Vous pouvez utiliser les formateurs d'unités partout où vous affichez des mesures aux utilisateurs. Cela inclut les applications de fitness montrant la distance ou le poids, les applications météo affichant la température, les applications de recettes indiquant le volume, et les applications de navigation affichant la vitesse.
const distanceFormatter = new Intl.NumberFormat(navigator.language, {
style: 'unit',
unit: 'kilometer',
maximumFractionDigits: 1
});
const distance = 5.234;
document.getElementById('distance').textContent = distanceFormatter.format(distance);
// Affiche : "5,2 km" (ou l'équivalent selon la locale)
Les chaînes formatées fonctionnent comme n'importe quelle autre valeur de chaîne. Vous pouvez les insérer dans du contenu textuel, des attributs, ou tout contexte où vous affichez des informations aux utilisateurs.
Réutiliser les formateurs d'unités
La création d'une nouvelle instance Intl.NumberFormat implique le chargement des données de locale et le traitement des options. Lorsque vous formatez plusieurs mesures avec la même locale et unité, créez le formateur une seule fois et réutilisez-le.
const formatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
const distances = [1.5, 3.2, 5.0, 10.8];
distances.forEach(distance => {
console.log(formatter.format(distance));
});
// Résultat :
// "1.5 km"
// "3.2 km"
// "5 km"
// "10.8 km"
Ce modèle est plus efficace que de créer un nouveau formateur pour chaque valeur. La différence de performance devient significative lors du formatage de tableaux ou de listes contenant de nombreuses mesures.