如何在JavaScript中将连字符转换为驼峰式命名

作为开发者，我们经常会遇到连字符字符串。当字符串的长度很长且名字非常复杂时，连字符字符串可以使我们的代码更具可读性。为了解决这个问题，我们使用驼峰式命名法。驼峰式命名法是一种非常流行的命名规范，在其中，我们通过大写每个字符串的第一个字母（第一个字符串除外），将多个单词组合成一个字符串。在javascript中，我们可以使用这种约定来创建变量和函数名称，但我们不能使用连字符字符串来创建变量。在本文中，我们将分步探讨多种将连字符转换为驼峰式命名法的方法。通过本文，您将能够应用这些技术来提高代码的可读性和可维护性。

以下是将连字符转换为驼峰式命名的几个示例−

输入：this-is-an-object
输出：thisIsAnObject
输入：convert-hyphens-to-camel-case
输出：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>使用 Array.map() 和 Array.join() 方法将连字符字符串转换为驼峰字符串</title>
</head>
<body>
   <h3>使用 Array.map() 和 Array.join() 方法将连字符字符串转换为驼峰字符串</h3>
   <p id="input">带连接符的字符串: </p>
   <p id="output"> 转换连字符为驼峰风格后的字符串: </p>
   <script>
      // 输入字符串
      let inp = "this-is-an-object";
      document.getElementById("input").innerHTML += inp;

      // 将字符串转换为数组
      inp = inp.split("-");

      // 移除并保存第一个元素
      let firstString = inp.shift();

      // 将每个单词的首字母转换为大写
      inp = inp.map(function(k){ 
      return k[0].toUpperCase() + k.substring(1);
      });

      // 将数组拼接为字符串
      inp = inp.join("");

      // 将第一个元素与其他元素拼接
      inp = firstString + inp;

      // 打印转换后的驼峰字符串
      document.getElementById("output").innerText += inp;     
   </script>
</body>
</html>