如何在 JavaScript 中將帶連字元的字串轉換為駝峰式命名?


作為開發者,我們經常遇到帶連字元的字串。當字串很長且名稱非常複雜時,帶連字元的字串使我們的程式碼更易讀。為了解決這個問題,我們使用駝峰式命名。駝峰式命名是一種非常流行的命名約定,其中我們將多個單詞組合成一個字串,並透過將每個單詞的首字母大寫(第一個單詞除外)來建立字串。在 JavaScript 中,我們可以使用此約定建立變數和函式名,而不能使用帶連字元的字串建立變數。在本文中,我們將逐步探討將連字元轉換為駝峰式命名的多種方法。在文章結束時,您將能夠應用這些技術來提高程式碼的可讀性和可維護性。

以下是一些將連字元轉換為駝峰式命名的示例:

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

以下是一些使用 JavaScript 將連字元轉換為駝峰式命名的幾種方法。

  • 使用 String.replace() 方法

  • 使用 Array.map() 和 Array.join() 方法

使用 String.replace() 方法

String.replace 方法是 JavaScript 中的內建方法,用於將字串中的指定值替換為另一個值。以下是使用 String.replace 方法將帶連字元的字串轉換為駝峰式字串的分步過程。

  • 使用 String.replace 方法的第一個引數搜尋連字元後面的所有字母。

  • 您可以使用正則表示式,例如 /-([a-z])/g

  • 此正則表示式選擇兩個元素,第一個是連字元,第二個是連字元後面的字母。

  • 在 String.replace 方法的第二個引數中,返回第二個字母的大寫值。

示例

在此示例中,我們使用 String.replace 方法將帶連字元的字串轉換為駝峰式格式。

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

使用 Array.map() 和 Array.join() 方法

Array.map() 方法是 JavaScript 中的一種方法,它在陣列的每個元素上應用一個函式後建立一個新陣列。此方法不會修改原始陣列。

Array.join 方法用於透過連線陣列的所有元素來將陣列轉換為字串。

要將帶連字元的字串轉換為駝峰式字串,我們使用以下步驟。

  • 使用 String.split 方法從每個連字元分割陣列元素。現在我們有一個數組,其中包含字串的所有單詞作為陣列元素。

  • 現在使用 Array.map 和 String.toUpperCase 方法將每個元素的第一個字母轉換為大寫。

  • 現在使用 Array.join 方法連線陣列元素,最後我們得到了駝峰式字串。

示例

在此示例中,我們將帶連字元的字串轉換為駝峰式字串。

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

更新於:2023年4月21日

2K+ 次檢視

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.