Comment formater les mesures comme 5 kilomètres ou 10 livres
Affichez la distance, le poids, la température et d'autres mesures avec un formatage et des unités adaptés aux paramètres régionaux
Introduction
Les mesures communiquent des quantités avec des unités qui leur donnent du sens. Cinq kilomètres indiquent une distance, dix livres indiquent un poids et vingt degrés Celsius indiquent 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érents paramètres régionaux formatent les mesures différemment. Les Américains écrivent "5 km" ou "5 kilomètres" selon le contexte. Les Allemands peuvent é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 les paramètres régionaux et le niveau de détail souhaité. 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 les paramètres régionaux.
JavaScript fournit l'API Intl.NumberFormat pour formater les mesures avec un formatage d'unité adapté aux paramètres régionaux. Cette leçon explique comment formater les mesures telles que la distance, le poids, la température, le volume et la vitesse avec l'affichage d'unité correct pour n'importe quels paramètres régionaux.
Les mesures ont besoin d'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 d'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 les 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 l'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));
// Output: "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 chaîne de caractères 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));
// Output: "5 km"
console.log(weightFormatter.format(10));
// Output: "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 un résultat différent 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));
// Output: "5 km"
console.log(deFormatter.format(5));
// Output: "5 km"
console.log(frFormatter.format(5));
// Output: "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.
Contrôler la verbosité de l'affichage des unités
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 un 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 « kilomètres » ou « livres ». 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'affichage des unités en format long. Les noms complets des unités 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 et la forme grammaticale appropriées pour le nom de l'unité.
Formater les mesures de poids
Les mesures de poids utilisent des identifiants d'unité tels que 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 format long pour afficher les noms complets des unités.
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 utilisent la forme plurielle.
Formater les mesures de température
Les mesures de température utilisent des identifiants d'unité tels que celsius et fahrenheit. Ces unités sont formatées avec des symboles de degré en format court.
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"
Le format long 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é tels que liter, gallon, milliliter et fluid-ounce. Ceux-ci fonctionnent comme les 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 format long 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 anglais 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 de consommation de carburant comme les litres aux 100 kilomètres utilisent également des unités composées.
Les identifiants d'unités composées combinent 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 se formate avec l'abréviation appropriée combinant les deux parties de l'unité.
La forme longue affiche les unités composées avec les noms complets et les 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);
// Output: Array of unit identifiers like:
// ["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é inclut 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);
// Output: true
console.log(hasPound);
// Output: true
Vous pouvez vérifier la présence d'unités spécifiques avant de créer des formateurs pour gérer les environnements avec différents niveaux de prise en charge.
Combiner avec les options de formatage des nombres
Les formateurs d'unités prennent en charge les mêmes options de formatage des 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));
// Output: "5.12 km"
console.log(formatter.format(5.5));
// Output: "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));
// Output: "12,345.67 km"
Toutes les fonctionnalités standard de formatage des nombres fonctionnent avec le formatage des unités.
Formater les mesures pour la locale de l'utilisateur
Au lieu de coder en dur une locale spécifique, vous pouvez utiliser les préférences linguistiques 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));
// Output varies by user's locale
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 affichant la distance ou le poids, les applications météo affichant la température, les applications de recettes affichant 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);
// Displays: "5.2 km" (or locale equivalent)
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
Créer une nouvelle instance de 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 la même unité, créez le formateur une 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));
});
// Output:
// "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.