Convertir une chaîne de caractères en casse Pascal

JavaScriptJavaScriptBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire (lab), nous allons apprendre à convertir des chaînes de caractères en casse Pascal (Pascal case) à l'aide de JavaScript. La casse Pascal est une convention de nommage couramment utilisée en programmation où chaque mot dans un mot composé commence par une lettre majuscule, sans espaces ni séparateurs entre les mots. Par exemple, "hello world" devient "HelloWorld" en casse Pascal.

Tout au long de ce laboratoire, nous explorerons diverses méthodes de manipulation de chaînes de caractères JavaScript et des expressions régulières pour créer une fonction robuste capable de convertir n'importe quelle chaîne de caractères en casse Pascal, quelle que soit son format d'origine.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/logic_ops("Logical Operators") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/str_manip("String Manipulation") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") subgraph Lab Skills javascript/logic_ops -.-> lab-28656{{"Convertir une chaîne de caractères en casse Pascal"}} javascript/functions -.-> lab-28656{{"Convertir une chaîne de caractères en casse Pascal"}} javascript/str_manip -.-> lab-28656{{"Convertir une chaîne de caractères en casse Pascal"}} javascript/array_methods -.-> lab-28656{{"Convertir une chaîne de caractères en casse Pascal"}} javascript/obj_manip -.-> lab-28656{{"Convertir une chaîne de caractères en casse Pascal"}} end

Comprendre la casse Pascal (Pascal case) et configurer l'environnement

La casse Pascal est une convention de nommage où :

  • La première lettre de chaque mot est en majuscule
  • Aucun espace, tiret ou underscore n'est utilisé entre les mots
  • Toutes les autres lettres sont en minuscules

Par exemple :

  • "hello world" → "HelloWorld"
  • "user_name" → "UserName"
  • "first-name" → "FirstName"

Commençons par configurer notre environnement de développement.

  1. Ouvrez le terminal depuis l'interface WebIDE en cliquant sur "Terminal" dans la barre de menu supérieure.

  2. Démarrez une session interactive Node.js en tapant la commande suivante dans le terminal et en appuyant sur Entrée :

node

Vous devriez voir l'invite Node.js (>) apparaître, ce qui indique que vous êtes maintenant dans l'environnement interactif Node.js.

  1. Essayons une simple manipulation de chaîne de caractères pour nous échauffer. Tapez le code suivant à l'invite Node.js :
let name = "john doe";
let capitalizedFirstLetter = name.charAt(0).toUpperCase() + name.slice(1);
console.log(capitalizedFirstLetter);

La sortie devrait être :

John doe

Cet exemple simple montre comment mettre en majuscule la première lettre d'une chaîne de caractères. Nous avons utilisé :

  • charAt(0) pour obtenir le premier caractère
  • toUpperCase() pour le convertir en majuscule
  • slice(1) pour obtenir le reste de la chaîne
  • La concaténation avec + pour les combiner

Ces méthodes de manipulation de chaînes de caractères seront utiles lors de la création de notre convertisseur en casse Pascal.

Utilisation des expressions régulières pour la division en mots

Pour convertir une chaîne de caractères en casse Pascal (Pascal case), la première étape consiste à diviser la chaîne en mots individuels. Nous pouvons utiliser des expressions régulières (regex) pour identifier les limites des mots, quelle que soit le délimiteur utilisé (espaces, tirets, underscores, etc.).

En JavaScript, les expressions régulières sont encadrées par des barres obliques (/motif/). Explorons comment utiliser les regex pour diviser une chaîne de caractères en mots.

  1. Dans votre session Node.js, essayons d'abord un exemple simple. Tapez le code suivant :
let str = "hello_world-example";
let words = str.split(/[-_]/);
console.log(words);

La sortie devrait être :

[ 'hello', 'world', 'example' ]

Cette regex /[-_]/ correspond soit à un tiret, soit à un underscore, et split() utilise ces correspondances comme séparateurs.

  1. Maintenant, essayons une chaîne de caractères et une regex plus complexes. Tapez :
let complexStr = "hello_WORLD-example phrase";
let regex =
  /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g;
let matches = complexStr.match(regex);
console.log(matches);

La sortie devrait être :

[ 'hello', 'WORLD', 'example', 'phrase' ]

Décortiquons cette regex :

  • /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)/ : Correspond aux séquences de lettres majuscules
  • /[A-Z]?[a-z]+[0-9]*/ : Correspond aux mots qui peuvent commencer par une lettre majuscule
  • /[A-Z]/ : Correspond aux lettres majuscules isolées
  • /[0-9]+/ : Correspond aux séquences de nombres
  • Le marqueur g rend la correspondance globale (trouve toutes les correspondances)

La méthode match() renvoie un tableau de toutes les correspondances trouvées dans la chaîne de caractères. Cela sera essentiel pour notre convertisseur en casse Pascal, car il peut identifier les mots dans presque n'importe quel format.

Mise en majuscule de chaque mot

Maintenant que nous pouvons diviser une chaîne de caractères en mots, nous devons mettre en majuscule la première lettre de chaque mot et les autres lettres en minuscules. Implémentons cette fonctionnalité.

  1. Dans votre session Node.js, écrivons une fonction pour mettre en majuscule un seul mot. Tapez :
function capitalizeWord(word) {
  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
}

// Test with a few examples
console.log(capitalizeWord("hello"));
console.log(capitalizeWord("WORLD"));
console.log(capitalizeWord("javaScript"));

La sortie devrait être :

Hello
World
Javascript
  1. Maintenant, appliquons cette fonction à un tableau de mots en utilisant la méthode map(). Tapez :
let words = ["hello", "WORLD", "javaScript"];
let capitalizedWords = words.map((word) => capitalizeWord(word));
console.log(capitalizedWords);

La sortie devrait être :

[ 'Hello', 'World', 'Javascript' ]

La méthode map() crée un nouveau tableau en appliquant une fonction à chaque élément du tableau original. Dans ce cas, nous appliquons notre fonction capitalizeWord à chaque mot.

  1. Enfin, joignons les mots mis en majuscule pour former une chaîne de caractères en casse Pascal (Pascal case) :
let pascalCase = capitalizedWords.join("");
console.log(pascalCase);

La sortie devrait être :

HelloWorldJavascript

La méthode join("") combine tous les éléments d'un tableau en une seule chaîne de caractères, en utilisant le délimiteur fourni (une chaîne vide dans ce cas) entre chaque élément.

Ces étapes démontrent le processus essentiel de conversion d'une chaîne de caractères en casse Pascal :

  1. Diviser la chaîne de caractères en mots
  2. Mettre en majuscule chaque mot
  3. Joindre les mots sans aucun séparateur

Création de la fonction complète toPascalCase

Maintenant que nous comprenons tous les éléments nécessaires, créons une fonction complète toPascalCase qui peut gérer n'importe quelle chaîne de caractères en entrée.

  1. Créons un fichier JavaScript pour enregistrer notre fonction. Quittez votre session Node.js en appuyant deux fois sur Ctrl+C ou en tapant .exit.

  2. Dans l'éditeur WebIDE, créez un nouveau fichier en cliquant sur "File" > "New File" dans le menu supérieur.

  3. Enregistrez le fichier sous le nom pascalCase.js dans le répertoire /home/labex/project.

  4. Copiez et collez le code suivant dans l'éditeur :

/**
 * Converts a string to Pascal case.
 * @param {string} str - The input string to convert.
 * @returns {string} The Pascal cased string.
 */
function toPascalCase(str) {
  // Use regex to match words regardless of delimiter
  const words = str.match(
    /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
  );

  // If no words are found, return an empty string
  if (!words) {
    return "";
  }

  // Capitalize each word and join them
  return words
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join("");
}

// Test cases
console.log(toPascalCase("hello world")); // "HelloWorld"
console.log(toPascalCase("some_database_field_name")); // "SomeDatabaseFieldName"
console.log(toPascalCase("Some label that needs to be pascalized")); // "SomeLabelThatNeedsToBePascalized"
console.log(toPascalCase("some-javascript-property")); // "SomeJavascriptProperty"
console.log(
  toPascalCase("some-mixed_string with spaces_underscores-and-hyphens")
); // "SomeMixedStringWithSpacesUnderscoresAndHyphens"
  1. Enregistrez le fichier en appuyant sur Ctrl+S ou en sélectionnant "File" > "Save" dans le menu.

  2. Exécutez le fichier en utilisant Node.js en ouvrant le terminal et en tapant :

node pascalCase.js

Vous devriez voir la sortie suivante :

HelloWorld
SomeDatabaseFieldName
SomeLabelThatNeedsToBePascalized
SomeJavascriptProperty
SomeMixedStringWithSpacesUnderscoresAndHyphens

Notre fonction toPascalCase fonctionne maintenant correctement. Revoyons comment elle fonctionne :

  1. Nous utilisons une expression régulière pour trouver les mots dans la chaîne de caractères en entrée, quelle que soit le délimiteur utilisé.
  2. Nous vérifions si des mots ont été trouvés. Sinon, nous renvoyons une chaîne de caractères vide.
  3. Nous utilisons map() pour mettre en majuscule chaque mot et join('') pour les combiner sans séparateurs.
  4. Le résultat est une chaîne de caractères en casse Pascal (Pascal case) où chaque mot commence par une lettre majuscule et le reste est en minuscules.

Amélioration et utilisation de la fonction de conversion en casse Pascal

Maintenant que nous avons une fonction toPascalCase opérationnelle, améliorons-la avec des fonctionnalités supplémentaires et apprenons à l'utiliser de manière pratique.

  1. Ouvrez votre fichier pascalCase.js dans l'éditeur WebIDE.

  2. Modifions la fonction pour gérer mieux les cas limites. Remplacez le code existant par :

/**
 * Converts a string to Pascal case.
 * @param {string} str - The input string to convert.
 * @returns {string} The Pascal cased string.
 */
function toPascalCase(str) {
  // Handle edge cases
  if (!str) return "";
  if (typeof str !== "string") return "";

  // Use regex to match words regardless of delimiter
  const words = str.match(
    /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
  );

  // If no words are found, return an empty string
  if (!words) {
    return "";
  }

  // Capitalize each word and join them
  return words
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join("");
}

// Test cases including edge cases
console.log(toPascalCase("hello world")); // "HelloWorld"
console.log(toPascalCase("")); // ""
console.log(toPascalCase(null)); // ""
console.log(toPascalCase("123_abc")); // "123Abc"
console.log(toPascalCase("UPPER_CASE_EXAMPLE")); // "UpperCaseExample"
console.log(
  toPascalCase("some-mixed_string with spaces_underscores-and-hyphens")
); // "SomeMixedStringWithSpacesUnderscoresAndHyphens"

// Create a reusable utility module
module.exports = { toPascalCase };
  1. Enregistrez le fichier en appuyant sur Ctrl+S.

  2. Maintenant, créons un nouveau fichier pour démontrer comment utiliser notre fonction comme utilitaire dans un autre fichier. Créez un nouveau fichier en cliquant sur "File" > "New File" dans le menu supérieur.

  3. Enregistrez ce fichier sous le nom useCase.js dans le répertoire /home/labex/project.

  4. Ajoutez le code suivant à useCase.js :

// Import the toPascalCase function from our utility file
const { toPascalCase } = require("./pascalCase");

// Example: Converting database field names to JavaScript variable names
const databaseFields = [
  "user_id",
  "first_name",
  "last_name",
  "email_address",
  "date_of_birth"
];

// Convert each field name to Pascal case
const javaScriptVariables = databaseFields.map((field) => toPascalCase(field));

// Display the results
console.log("Database Fields:");
console.log(databaseFields);
console.log("\nJavaScript Variables (Pascal Case):");
console.log(javaScriptVariables);

// Example: Creating a class name from a description
const description = "user account manager";
const className = toPascalCase(description);
console.log(`\nClass name created from "${description}": ${className}`);
  1. Enregistrez le fichier en appuyant sur Ctrl+S.

  2. Exécutez le nouveau fichier en utilisant Node.js. Dans le terminal, tapez :

node useCase.js

Vous devriez voir une sortie similaire à :

Database Fields:
[ 'user_id', 'first_name', 'last_name', 'email_address', 'date_of_birth' ]

JavaScript Variables (Pascal Case):
[ 'UserId', 'FirstName', 'LastName', 'EmailAddress', 'DateOfBirth' ]

Class name created from "user account manager": UserAccountManager

Cela démontre une utilisation pratique de la fonction toPascalCase pour convertir les noms de champs de base de données en noms de variables JavaScript et créer des noms de classes à partir de descriptions.

Notez que nous avons également ajouté :

  1. La gestion des erreurs pour les entrées nulles, indéfinies ou non de type chaîne de caractères
  2. L'export du module afin que la fonction puisse être importée dans d'autres fichiers
  3. Un exemple concret d'utilisation de la fonction

Ces améliorations rendent notre fonction toPascalCase plus robuste et utilisable dans des applications JavaScript réelles.

Résumé

Dans ce laboratoire (lab), vous avez appris à convertir des chaînes de caractères en casse Pascal (Pascal case) en JavaScript. Voici ce que vous avez accompli :

  1. Compris le concept de la casse Pascal et ses applications en programmation
  2. Appris à utiliser les expressions régulières pour diviser des chaînes de caractères en mots, quelle que soit le délimiteur utilisé
  3. Appliqué des méthodes de manipulation de chaînes de caractères telles que charAt(), slice(), toUpperCase() et toLowerCase()
  4. Créé une fonction robuste toPascalCase qui gère différents formats d'entrée
  5. Amélioré la fonction avec une gestion des erreurs et l'avez exportée en tant que module
  6. Appliqué la fonction à des cas d'utilisation pratiques, comme la conversion des noms de champs de base de données en variables JavaScript

Ces compétences sont utiles dans de nombreux scénarios de programmation, tels que :

  • La conversion entre différentes conventions de nommage
  • Le traitement des entrées utilisateur en formats standardisés
  • Le travail avec des données provenant de différentes sources
  • La création d'un nommage cohérent dans votre code

Vous pouvez continuer à développer ces compétences en explorant d'autres techniques de manipulation de chaînes de caractères et en les appliquant à vos propres projets.