Comment convertir des traits d'union en camelCase en JavaScript ?-js tutoriel-php.cn

Comment convertir des traits d'union en camelCase en JavaScript ?

王林

Libérer： 2023-09-05 10:21:06

avant

822 Les gens l'ont consulté

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

En tant que développeurs, nous rencontrons souvent des chaînes avec trait d'union. Les chaînes avec trait d'union rendent notre code plus lisible lorsque la longueur des chaînes est longue et que les noms sont très complexes. Pour résoudre ce problème, nous utilisons Camel Case. CamelCase est une convention de dénomination très populaire dans laquelle nous combinons plusieurs mots et formons une chaîne en mettant en majuscule la première lettre de chaque chaîne sauf la première. En javascript, nous pouvons utiliser cette convention pour créer des noms de variables et de fonctions, mais nous ne pouvons pas utiliser de chaînes avec trait d'union pour créer des variables. Dans cet article, nous passerons en revue les différentes méthodes de conversion des traits d'union en camelCase. À la fin de cet article, vous serez en mesure d'appliquer des techniques pour améliorer la lisibilité et la maintenabilité de votre code.

Voici quelques exemples de conversion de traits d'union en camelCase -

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

Copier après la connexion

Voici quelques façons de convertir des traits d'union en camelCase à l'aide de JavaScript.

Utilisez la méthode String.replace()
Utilisez les méthodes Array.map() et Array.join()

Utilisez la méthode String.replace()

La méthode String.replace est une méthode intégrée en javascript qui est utilisée pour remplacer une valeur spécifiée par une autre valeur dans une chaîne. Ce qui suit est une procédure étape par étape pour convertir une chaîne avec trait d'union en chaîne camelCase à l'aide de la méthode String.replace.

Utilisez le premier argument de la méthode String.replace pour rechercher toutes les lettres suivant un trait d'union.
Vous pouvez utiliser des expressions régulières comme /-([a-z])/g
Cette expression régulière sélectionne deux éléments, le premier est un trait d'union et le second est la lettre après le trait d'union.
Dans le deuxième paramètre de la méthode String.replace, renvoie la valeur majuscule de la deuxième lettre.

Exemple

Dans cet exemple, nous utilisons la méthode String.replace pour convertir une chaîne avec trait d'union au format camelCase.

<!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>

Copier après la connexion

Utilisez les méthodes Array.map() et Array.join()

La méthode Array.map() est JavaScript qui crée un nouveau tableau après avoir appliqué une fonction dans chaque élément du tableau. Cette méthode ne modifie pas le tableau d'origine.

La méthode Array.join est utilisée pour convertir un tableau en chaîne en joignant tous les éléments du tableau.

Pour convertir une chaîne avec trait d'union en chaîne de casse chameau, nous utilisons les étapes suivantes.

Divisez les éléments du tableau de chaque trait d'union à l'aide de la méthode String.split. Nous avons maintenant un tableau qui contient tous les mots de String en tant qu’éléments du tableau.
Utilisez maintenant les méthodes Array.map et String.toUpperCase pour convertir la première lettre de chaque élément en majuscule.
Maintenant, rejoignez les éléments Arary en utilisant la méthode Array.join, et enfin, nous obtenons la chaîne camelCase.

Exemple

Dans cet exemple, nous convertissons une chaîne avec trait d'union en chaîne camelCase.

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!