Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar tanda sempang kepada camelCase dalam JavaScript?
Bagaimana untuk menukar tanda sempang kepada camelCase dalam JavaScript?
- 王林ke hadapan
- 2023-09-05 10:21:06743semak imbas
Sebagai pembangun, kami sering menjumpai rentetan sempang. Rentetan sempang menjadikan kod kami lebih mudah dibaca apabila panjang rentetan itu panjang dan nama-namanya sangat kompleks. Untuk menyelesaikan masalah ini kami menggunakan kes unta. CamelCase ialah konvensyen penamaan yang sangat popular di mana kami menggabungkan berbilang perkataan dan membentuk rentetan dengan menggunakan huruf besar bagi setiap rentetan kecuali yang pertama. Dalam javascript, kita boleh menggunakan konvensyen ini untuk mencipta pembolehubah dan nama fungsi, tetapi kita tidak boleh menggunakan rentetan sempang untuk mencipta pembolehubah. Dalam artikel ini, kami akan melangkah melalui pelbagai kaedah untuk menukar tanda sempang kepada camelCase. Pada akhir artikel ini, anda akan dapat menggunakan teknik untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod anda.
Berikut ialah beberapa contoh menukar tanda sempang kepada camelCase -
Input: this-is-an-object Output: thisIsAnObject Input: convert-hyphens-to-camel-case Output: convertHyphensToCamelCase
Berikut ialah beberapa cara untuk menukar tanda sempang kepada camelCase menggunakan JavaScript.
Gunakan kaedah String.replace()
Gunakan kaedah Array.map() dan Array.join()
Gunakan kaedah String.replace()
Kaedah String.replace ialah kaedah terbina dalam javascript yang digunakan untuk menggantikan nilai yang ditentukan dengan nilai lain dalam rentetan. Berikut ialah prosedur langkah demi langkah untuk menukar rentetan sempang kepada rentetan camelCase menggunakan kaedah String.replace.
Gunakan hujah pertama kaedah String.replace untuk mencari semua huruf yang mengikuti tanda sempang.
Anda boleh menggunakan ungkapan biasa seperti /-([a-z])/g
Regex ini memilih dua elemen, yang pertama ialah tanda sempang dan yang kedua ialah huruf selepas sempang.
Dalam parameter kedua kaedah String.replace, kembalikan nilai huruf besar huruf kedua.
Contoh
Dalam contoh ini, kami menggunakan kaedah String.replace untuk menukar rentetan sempang kepada 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>
Gunakan kaedah Array.map() dan Array.join()
KaedahArray.map() ialah JavaScript yang mencipta tatasusunan baharu selepas menggunakan fungsi dalam setiap elemen tatasusunan. Kaedah ini tidak mengubah suai tatasusunan asal.
Kaedah Array.join digunakan untuk menukar tatasusunan kepada rentetan dengan menggabungkan semua elemen tatasusunan.
Untuk menukar rentetan sempang kepada rentetan sarung unta, kami menggunakan langkah berikut.
Pisah elemen tatasusunan daripada setiap sempang menggunakan kaedah String.split. Sekarang kita mempunyai tatasusunan yang mengandungi semua perkataan String sebagai elemen tatasusunan.
Sekarang gunakan kaedah Array.map dan String.toUpperCase untuk menukar huruf pertama setiap elemen kepada huruf besar.
Sekarang gunakan kaedah Array.join untuk menyertai elemen Arary, dan akhirnya, kita mendapat rentetan camelCase.
Contoh
Dalam contoh ini, kami menukar rentetan sempang kepada rentetan 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>
Atas ialah kandungan terperinci Bagaimana untuk menukar tanda sempang kepada camelCase dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!