Maison > Article > interface Web > Comment convertir des traits d'union en camelCase en JavaScript ?
Comment convertir des traits d'union en camelCase en JavaScript ?
- 王林avant
- 2023-09-05 10:21:06743parcourir
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
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>
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.
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>
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!