aller au contenu principal

-- Convertissez un texte en camelCase, snake_case, kebab-case et sept autres formats, ligne par ligne --
temps de lecture : 3 minutes432 mots

chaque ligne est convertie séparément : coller une liste ne la fusionne pas en un seul identifiant.

Utilisation #

Collez une valeur, ou une liste avec une valeur par ligne. Chaque ligne est convertie séparément dans les dix formats : coller une colonne de noms de champs ne les fusionne pas en un seul identifiant.

Les formats #

FormatExempleUsage habituel
camelCasecreerUnElementvariables et fonctions JavaScript
PascalCaseCreerUnElementcomposants React, classes, types
snake_casecreer_un_elementPython, colonnes SQL
kebab-casecreer-un-elementclasses CSS, noms de fichiers
CONSTANT_CASECREER_UN_ELEMENTconstantes, variables d'environnement
Title CaseCreer Un Elementtitres
Sentence caseCreer un elementphrases, libellés
slugcreer-un-elementsegments d'URL

kebab-case et slug se ressemblent mais ne font pas la même chose : le slug traite la ponctuation comme un séparateur, la conversion de casse la supprime. a/b devient donc a-b en slug et ab en kebab.

Le découpage est le vrai travail #

Recoller des mots est trivial. Les découper correctement est là où tout se joue, et la plupart des implémentations naïves échouent sur trois cas.

// acronyme suivi d'un mot
"HTTPServerError"; // → http, server, error   (et non h, t, t, p, server…)
 
// chiffre accolé à une lettre
"version2Beta"; // → version, 2, beta
 
// accents et majuscule initiale
"Élément"; // → element   (et non e, lement)

Les accents ne doivent être retirés qu'après le découpage : normaliser d'abord fait perdre la majuscule initiale, et le mot devient indistinct de sa version minuscule.

Une conversion doit être idempotente #

Réappliquer une conversion à son propre résultat doit donner le même résultat.

toKebabCase("Créer un élément"); // "creer-un-element"
toKebabCase("creer-un-element"); // "creer-un-element" — identique

Sans cette propriété, un pipeline qui convertit deux fois — parce que deux couches appliquent la même normalisation « au cas où » — produit des identifiants différents à chaque passage.

Conversion des clés d'un objet #

Le cas concret le plus fréquent : une API en snake_case, un front en camelCase.

const toCamelKeys = (value) => {
  if (Array.isArray(value)) {
    return value.map(toCamelKeys);
  }
 
  if (value === null || typeof value !== "object") {
    return value;
  }
 
  return Object.fromEntries(
    Object.entries(value).map(([key, nested]) => [
      toCamelCase(key),
      toCamelKeys(nested),
    ])
  );
};

Attention à la récursion : null est de type object en JavaScript, et sans le test explicite la fonction plante sur la première valeur nulle.

sujets abordés

à lire aussi