JavaScript | Zeichenkettenkonvertierung | Pascal Case

Einführung

In diesem Lab werden wir lernen, wie man Strings in Pascal Case (Pascal-Schreibweise) mit JavaScript umwandelt. Pascal Case ist eine Namenskonvention, die in der Programmierung häufig verwendet wird, bei der jedes Wort in einem zusammengesetzten Wort mit einem Großbuchstaben beginnt und keine Leerzeichen oder Trennzeichen zwischen den Wörtern vorhanden sind. Beispielsweise wird "hello world" in Pascal Case zu "HelloWorld".

Im Laufe dieses Labs werden wir verschiedene JavaScript-String-Manipulationsmethoden und reguläre Ausdrücke (Regular Expressions) untersuchen, um eine robuste Funktion zu erstellen, die jeden String in Pascal Case umwandeln kann, unabhängig von seinem ursprünglichen Format.

Verständnis von Pascal Case und Einrichtung der Umgebung

Pascal Case ist eine Namenskonvention, bei der:

Der erste Buchstabe jedes Wortes groß geschrieben wird
Zwischen den Wörtern keine Leerzeichen, Bindestriche oder Unterstriche verwendet werden
Alle anderen Buchstaben klein geschrieben werden

Beispielsweise:

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

Beginnen wir mit der Einrichtung unserer Entwicklungsumgebung.

Öffnen Sie das Terminal über die WebIDE-Schnittstelle, indem Sie auf "Terminal" in der oberen Menüleiste klicken.
Starten Sie eine Node.js-Interaktionssitzung, indem Sie den folgenden Befehl im Terminal eingeben und die Eingabetaste drücken:

node

Sie sollten das Node.js-Prompt (>) sehen, was darauf hinweist, dass Sie nun in der Node.js-Interaktionsumgebung sind.

Probieren wir eine einfache String-Manipulation, um uns einzuschwimmen. Geben Sie den folgenden Code am Node.js-Prompt ein:

let name = "john doe";
let capitalizedFirstLetter = name.charAt(0).toUpperCase() + name.slice(1);
console.log(capitalizedFirstLetter);

Die Ausgabe sollte sein:

John doe

Dieses einfache Beispiel zeigt, wie man den ersten Buchstaben eines Strings groß schreibt. Wir haben verwendet:

charAt(0), um das erste Zeichen zu erhalten
toUpperCase(), um es in einen Großbuchstaben umzuwandeln
slice(1), um den Rest des Strings zu erhalten
Verkettung mit +, um sie zusammenzufügen

Diese String-Methoden werden hilfreich sein, wenn wir unseren Pascal-Case-Konverter erstellen.

Arbeiten mit regulären Ausdrücken (Regular Expressions) zum Aufteilen von Wörtern

Um einen String in Pascal Case umzuwandeln, ist der erste Schritt, den String in einzelne Wörter aufzuteilen. Wir können reguläre Ausdrücke (Regex) verwenden, um Wortgrenzen zu identifizieren, unabhängig davon, welches Trennzeichen verwendet wird (Leerzeichen, Bindestriche, Unterstriche usw.).

In JavaScript werden reguläre Ausdrücke zwischen Schrägstrichen (/Muster/) eingeschlossen. Lassen Sie uns untersuchen, wie man Regex verwendet, um einen String in Wörter aufzuteilen.

In Ihrer Node.js-Sitzung probieren wir zunächst ein einfaches Beispiel. Geben Sie den folgenden Code ein:

let str = "hello_world-example";
let words = str.split(/[-_]/);
console.log(words);

Die Ausgabe sollte sein:

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

Dieser Regex /[-_]/ passt entweder auf einen Bindestrich oder einen Unterstrich, und split() verwendet diese Übereinstimmungen als Trennzeichen.

Jetzt probieren wir einen komplexeren String und einen komplexeren Regex. Geben Sie ein:

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);

Die Ausgabe sollte sein:

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

Lassen Sie uns diesen Regex zerlegen:

/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)/: Passt auf Sequenzen von Großbuchstaben
/[A-Z]?[a-z]+[0-9]*/: Passt auf Wörter, die mit einem Großbuchstaben beginnen können
/[A-Z]/: Passt auf einzelne Großbuchstaben
/[0-9]+/: Passt auf Zahlenfolgen
Das g-Flag macht die Übereinstimmung global (findet alle Übereinstimmungen)

Die match()-Methode gibt ein Array aller im String gefundenen Übereinstimmungen zurück. Dies wird für unseren Pascal-Case-Konverter unerlässlich sein, da es Wörter in fast jedem Format identifizieren kann.

Großschreibung jedes Wortes

Nachdem wir nun einen String in Wörter aufteilen können, müssen wir den ersten Buchstaben jedes Wortes groß schreiben und den Rest klein schreiben. Implementieren wir diese Funktionalität.

In Ihrer Node.js-Sitzung schreiben wir eine Funktion, um ein einzelnes Wort zu kapitalisieren. Geben Sie ein:

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"));

Die Ausgabe sollte sein:

Hello
World
Javascript

Jetzt wenden wir diese Funktion auf ein Array von Wörtern mit der map()-Methode an. Geben Sie ein:

let words = ["hello", "WORLD", "javaScript"];
let capitalizedWords = words.map((word) => capitalizeWord(word));
console.log(capitalizedWords);

Die Ausgabe sollte sein:

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

Die map()-Methode erstellt ein neues Array, indem sie eine Funktion auf jedes Element des ursprünglichen Arrays anwendet. In diesem Fall wenden wir unsere capitalizeWord-Funktion auf jedes Wort an.

Schließlich fügen wir die kapitalisierten Wörter zusammen, um einen String im Pascal Case zu bilden:

let pascalCase = capitalizedWords.join("");
console.log(pascalCase);

Die Ausgabe sollte sein:

HelloWorldJavascript

Die join("")-Methode kombiniert alle Elemente eines Arrays zu einem einzelnen String, wobei das angegebene Trennzeichen (in diesem Fall ein leerer String) zwischen jedem Element verwendet wird.

Diese Schritte zeigen den Kernprozess der Umwandlung eines Strings in Pascal Case:

Teilen Sie den String in Wörter auf.
Kapitalisieren Sie jedes Wort.
Fügen Sie die Wörter ohne Trennzeichen zusammen.

Erstellen der vollständigen toPascalCase-Funktion

Nachdem wir nun alle benötigten Komponenten verstehen, erstellen wir eine vollständige toPascalCase-Funktion, die jeden Eingabestring verarbeiten kann.

Erstellen wir eine JavaScript-Datei, um unsere Funktion zu speichern. Beenden Sie Ihre Node.js-Sitzung, indem Sie zweimal Ctrl+C drücken oder .exit eingeben.
Im WebIDE erstellen Sie eine neue Datei, indem Sie in der oberen Menüleiste auf "File" > "New File" klicken.
Speichern Sie die Datei als pascalCase.js im Verzeichnis /home/labex/project.
Kopieren und fügen Sie den folgenden Code in den Editor ein:

/**
 * 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"

Speichern Sie die Datei, indem Sie Ctrl+S drücken oder im Menü "File" > "Save" auswählen.
Führen Sie die Datei mit Node.js aus, indem Sie das Terminal öffnen und eingeben:

node pascalCase.js

Sie sollten die folgende Ausgabe sehen:

HelloWorld
SomeDatabaseFieldName
SomeLabelThatNeedsToBePascalized
SomeJavascriptProperty
SomeMixedStringWithSpacesUnderscoresAndHyphens

Unsere toPascalCase-Funktion funktioniert nun korrekt. Lassen Sie uns überprüfen, wie sie funktioniert:

Wir verwenden einen regulären Ausdruck, um Wörter im Eingabestring zu finden, unabhängig von den verwendeten Trennzeichen.
Wir prüfen, ob Wörter gefunden wurden. Wenn nicht, geben wir einen leeren String zurück.
Wir verwenden map(), um jedes Wort zu kapitalisieren, und join(''), um sie ohne Trennzeichen zu verbinden.
Das Ergebnis ist ein String im Pascal Case, bei dem jedes Wort mit einem Großbuchstaben beginnt und der Rest klein geschrieben ist.

Verbessern und Verwenden der Pascal-Case-Funktion

Nachdem wir nun eine funktionierende toPascalCase-Funktion haben, verbessern wir sie um zusätzliche Funktionen und lernen, wie wir sie in der Praxis einsetzen können.

Öffnen Sie die Datei pascalCase.js im WebIDE.
Modifizieren wir die Funktion, um Randfälle besser zu behandeln. Ersetzen Sie den vorhandenen Code durch:

/**
 * 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 };

Speichern Sie die Datei, indem Sie Ctrl+S drücken.
Jetzt erstellen wir eine neue Datei, um zu zeigen, wie wir unsere Funktion als Utility in einer anderen Datei verwenden können. Erstellen Sie eine neue Datei, indem Sie in der oberen Menüleiste auf "File" > "New File" klicken.
Speichern Sie diese Datei als useCase.js im Verzeichnis /home/labex/project.
Fügen Sie den folgenden Code zu useCase.js hinzu:

// 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}`);

Speichern Sie die Datei, indem Sie Ctrl+S drücken.
Führen Sie die neue Datei mit Node.js aus. Geben Sie im Terminal ein:

node useCase.js

Sie sollten eine Ausgabe ähnlich der folgenden sehen:

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

Dies zeigt eine praktische Anwendung der toPascalCase-Funktion zum Konvertieren von Datenbankfeldnamen in JavaScript-Variablennamen und zum Erstellen von Klassennamen aus Beschreibungen.

Beachten Sie, dass wir auch hinzugefügt haben:

Fehlerbehandlung für null-, undefinierte oder nicht-String-Eingaben
Modul-Exporte, damit die Funktion in andere Dateien importiert werden kann
Ein reales Beispiel für die Verwendung der Funktion

Diese Verbesserungen machen unsere toPascalCase-Funktion robuster und in realen JavaScript-Anwendungen besser einsetzbar.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie man Strings in JavaScript in Pascal Case umwandelt. Hier ist, was Sie erreicht haben:

Das Konzept von Pascal Case und seine Anwendungen in der Programmierung verstanden
Gelernt, wie man reguläre Ausdrücke verwendet, um Strings in Wörter aufzuteilen, unabhängig von den Trennzeichen
Zeichenkettenmanipulationsmethoden wie charAt(), slice(), toUpperCase() und toLowerCase() angewendet
Eine robuste toPascalCase-Funktion erstellt, die verschiedene Eingabeformate verarbeiten kann
Die Funktion um Fehlerbehandlung erweitert und als Modul exportiert
Die Funktion auf praktische Anwendungsfälle wie die Konvertierung von Datenbankfeldnamen in JavaScript-Variablen angewendet

Diese Fähigkeiten sind in vielen Programmier-Szenarien nützlich, wie beispielsweise:

Konvertierung zwischen verschiedenen Benennungskonventionen
Verarbeitung von Benutzereingaben in standardisierte Formate
Arbeit mit Daten aus verschiedenen Quellen
Schaffung einer konsistenten Benennung in Ihrem Code

Sie können diese Fähigkeiten weiter ausbauen, indem Sie andere Zeichenkettenmanipulationstechniken erkunden und sie in Ihren eigenen Projekten anwenden.

Zeichenkette in Pascal Case umwandeln

Einführung

Verständnis von Pascal Case und Einrichtung der Umgebung

Arbeiten mit regulären Ausdrücken (Regular Expressions) zum Aufteilen von Wörtern

Großschreibung jedes Wortes

Erstellen der vollständigen toPascalCase-Funktion

Verbessern und Verwenden der Pascal-Case-Funktion

Zusammenfassung