N° 030 · ●●○

Convertisseur d'unités

Longueurs, poids et températures : on tape une valeur, on choisit deux unités, la conversion tombe. Le bon exercice pour remplacer une pile de if par une table de données.

Ce qu'on apprend

Décrire des unités dans une table plutôt qu'en conditions
Passer par une unité de base pour tout convertir
Traiter à part les températures

Pourquoi ce langage

Pourquoi un convertisseur d'unités ? Une recette américaine en onces, un vélo en pouces, une météo en Fahrenheit : on convertit tout le temps. Écrire un if pour chaque paire d'unités deviendrait vite ingérable.

L'astuce : chaque unité est décrite par son rapport à une unité de base. Un kilomètre vaut 1 000 mètres, un pied vaut 0,3048 mètre. Pour convertir, on passe par la base. Ajouter une unité, c'est ajouter une ligne à la table.

Les températures font exception : il faut aussi décaler le zéro. Elles ont donc leurs propres fonctions.

Pourquoi en JavaScript simple ? Un objet, deux multiplications, et le code reste lisible même avec cinquante unités.

Comment ça marche

LA TABLE

Chaque unité indique combien elle vaut en unité de base (le mètre, le gramme).

const UNITES = {
  longueur: { cm: 0.01, m: 1, km: 1000, in: 0.0254, ft: 0.3048, mi: 1609.344 },
  poids: { g: 1, kg: 1000, oz: 28.349523125, lb: 453.59237 },
};

CONVERTIR PAR LA BASE

On ramène en mètres, puis on divise par la valeur de l'unité d'arrivée.

function convertir(x, de, vers, categorie) {
  const u = UNITES[categorie];
  return x * u[de] / u[vers];
}

LES TEMPÉRATURES

Un simple facteur ne suffit pas : il faut aussi décaler le zéro. On passe par le Celsius.

const VERS_C = { C: x => x, F: x => (x - 32) * 5 / 9, K: x => x - 273.15 };
const DEPUIS_C = { C: x => x, F: x => x * 9 / 5 + 32, K: x => x + 273.15 };
const temperature = (x, de, vers) => DEPUIS_C[vers](VERS_C[de](x));

REMPLIR LES MENUS

Les options viennent de la table : une nouvelle unité apparaît toute seule.

function remplir(select, categorie) {
  select.innerHTML = '';
  for (const u of Object.keys(UNITES[categorie])) select.add(new Option(u, u));
}

AFFICHER JOLIMENT

Les très grands et très petits nombres passent en notation scientifique.

function format(x) {
  const a = Math.abs(x);
  if (a !== 0 && (a < 1e-4 || a >= 1e9)) return x.toExponential(4);
  return x.toLocaleString('fr-BE', { maximumFractionDigits: 6 });
}

Pièges

PIÈGE 1 : Une fonction par paire d'unités

Piège

Mauvais : kmVersMiles, milesVersKm, kmVersPieds... Avec 7 unités, il faut 42 fonctions.

Fix

Correct : une table de facteurs vers une unité de base, et une seule fonction.

PIÈGE 2 : Traiter les températures comme le reste

Piège

Mauvais : un facteur unique entre Celsius et Fahrenheit. 0 °C deviendrait 0 °F au lieu de 32.

Fix

Correct : des fonctions dédiées, qui passent toutes par le Celsius.

PIÈGE 3 : Afficher toutes les décimales

Piège

Mauvais : afficher le résultat brut, comme 0.6213711922373339 mile.

Fix

Correct : toLocaleString avec un nombre maximal de décimales, et la notation scientifique pour les extrêmes.

PERSONNALISER

Ajoutez les volumes : litre, tasse, cuillère à soupe, pour les recettes.
Les vitesses en km/h, m/s et nœuds, avec la même table.
Un historique des dernières conversions, à rappeler d'un clic.

OPTIMISATION

Gardez les facteurs exacts, comme 0,0254 pour le pouce, plutôt que des valeurs arrondies.
Pour un usage sérieux, une bibliothèque comme convert-units couvre des centaines d'unités.

VERS REACT

La table vit dans un fichier à part, en dehors de tout composant.

La catégorie, la valeur et les deux unités sont des useState ; le résultat se calcule au rendu.

Quand la catégorie change, on remet les deux unités par défaut dans le même gestionnaire.

Commentaires

Chargement des commentaires…