Wie konvertiere ich Bindestriche in JavaScript in CamelCase?-js-Tutorial-php.cn

Wie konvertiere ich Bindestriche in JavaScript in CamelCase?

王林

Freigeben： 2023-09-05 10:21:06

nach vorne

784 Leute haben es durchsucht

如何在 JavaScript 中将连字符转换为驼峰式大小写？

Als Entwickler stoßen wir häufig auf Zeichenfolgen mit Bindestrich. Mit Bindestrichen versehene Zeichenfolgen machen unseren Code besser lesbar, wenn die Zeichenfolge lang ist und die Namen sehr komplex sind. Um dieses Problem zu lösen, verwenden wir Camel Case. CamelCase ist eine sehr beliebte Namenskonvention, bei der wir mehrere Wörter kombinieren und eine Zeichenfolge bilden, indem wir den ersten Buchstaben jeder Zeichenfolge außer dem ersten groß schreiben. In Javascript können wir diese Konvention zum Erstellen von Variablen- und Funktionsnamen verwenden, wir können jedoch keine Zeichenfolgen mit Bindestrich zum Erstellen von Variablen verwenden. In diesem Artikel gehen wir Schritt für Schritt durch die verschiedenen Methoden zum Konvertieren von Bindestrichen in CamelCase. Am Ende dieses Artikels werden Sie in der Lage sein, Techniken anzuwenden, um die Lesbarkeit und Wartbarkeit Ihres Codes zu verbessern.

Hier sind einige Beispiele für die Konvertierung von Bindestrichen in CamelCase -

Input: this-is-an-object 
Output: thisIsAnObject
Input: convert-hyphens-to-camel-case
Output: convertHyphensToCamelCase

Nach dem Login kopieren

Hier sind einige Möglichkeiten, Bindestriche mithilfe von JavaScript in CamelCase umzuwandeln.

Verwenden Sie die String.replace()-Methode
Verwenden Sie die Methoden Array.map() und Array.join()

Verwenden Sie die String.replace()-Methode

Die

String.replace-Methode ist eine in Javascript integrierte Methode, die verwendet wird, um einen angegebenen Wert durch einen anderen Wert in einer Zeichenfolge zu ersetzen. Im Folgenden finden Sie eine schrittweise Anleitung zum Konvertieren einer Zeichenfolge mit Bindestrich in eine CamelCase-Zeichenfolge mithilfe der String.replace-Methode.

Verwenden Sie das erste Argument der String.replace-Methode, um nach allen Buchstaben zu suchen, die auf einen Bindestrich folgen.
Sie können reguläre Ausdrücke wie /-([a-z])/g
Diese Regex wählt zwei Elemente aus, das erste ist ein Bindestrich und das zweite ist der Buchstabe nach dem Bindestrich.
Gib im zweiten Parameter der String.replace-Methode den Großbuchstabenwert des zweiten Buchstabens zurück.

Beispiel

In diesem Beispiel verwenden wir die Methode String.replace, um eine Zeichenfolge mit Bindestrich in das CamelCase-Format zu konvertieren.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Converting Hyphenated string into Camel case string in JavaScript</title>
</head>
<body>
   <h3>Converting Hyphenated string into Camel case string using String.replace() method</h3>
   <p id="input">String with hyphens: </p>
   <p id="output"> String after converting hyphens to camel case: </p>
   <script>
      // The input String
      let inp = "this-is-an-object";
      document.getElementById("input").innerHTML += inp;
      
      // Search for the letter after the hyphen and return the uppercase value
      inp = inp.replace(/-([a-z])/g, function(k){
         return k[1].toUpperCase();
      })
      
      // Print the camel case value
      document.getElementById("output").innerText += inp;
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Methoden Array.map() und Array.join()

Die Methode

Array.map() ist JavaScript, das ein neues Array erstellt, nachdem in jedem Element des Arrays eine Funktion angewendet wurde. Diese Methode verändert das ursprüngliche Array nicht.

Die Methode

Array.join wird verwendet, um ein Array in einen String umzuwandeln, indem alle Elemente des Arrays verbunden werden.

Um eine Zeichenfolge mit Bindestrich in eine Zeichenfolge mit Kamelfall umzuwandeln, führen wir die folgenden Schritte aus.

Teilen Sie Array-Elemente von jedem Bindestrich mit der String.split-Methode. Jetzt haben wir ein Array, das alle Wörter von String als Array-Elemente enthält.
Verwenden Sie nun die Methoden Array.map und String.toUpperCase, um den ersten Buchstaben jedes Elements in Großbuchstaben umzuwandeln.
Verwenden Sie nun die Array.join-Methode, um die Arary-Elemente zu verbinden, und schließlich erhalten wir den CamelCase-String.

Beispiel

In diesem Beispiel konvertieren wir eine Zeichenfolge mit Bindestrich in eine CamelCase-Zeichenfolge.

<html>
<head>
   <title>Converting Hyphenated string into Camel case string in JavaScript</title>
</head>
<body>
   <h3>Convert Hyphenated string into Camel case string using Array.map() and Array.join() methods</h3>
   <p id="input">String with hyphens: </p>
   <p id="output"> String after converting hyphens to camel case: </p>
   <script>
      // The input String
      let inp = "this-is-an-object";
      document.getElementById("input").innerHTML += inp;
      
      // Convert the String into an Array
      inp = inp.split("-");
      
      // Remove and save the first element
      let firstString = inp.shift();
      
      // Convert every first letter into uppercase
      inp = inp.map(function(k){ 
      return k[0].toUpperCase() + k.substring(1);
      });
      
      // Join the Array
      inp = inp.join("");
      
      // Concatenate the first element 
      inp = firstString + inp;
      
      // Print the camel case value
      document.getElementById("output").innerText += inp;     
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie konvertiere ich Bindestriche in JavaScript in CamelCase?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!