Bagaimana untuk menukar tanda sempang kepada camelCase dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk menukar tanda sempang kepada camelCase dalam JavaScript?

王林

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

ke hadapan

783 orang telah melayarinya

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

Gunakan kaedah Array.map() dan Array.join()

Kaedah

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

Salin selepas log masuk

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!