使用 JavaScript 将 kebab-case 转换为 camelCase

Question

假设我有一个将kebab-case转换为camelCase的函数：

camelize("my-kebab-string") === 'myKebabString';

我快到了，但我的代码也输出了第一个大写字母：

function camelize(str){
  let arr = str.split('-');
  let capital = arr.map(item=> item.charAt(0).toUpperCase() + item.slice(1).toLowerCase());
  let capitalString = capital.join("");

  console.log(capitalString);
}
    
camelize("my-kebab-string");

Answer 1

您也可以尝试正则表达式。

camelize = s => s.replace(/-./g, x=>x[1].toUpperCase())

仅查找后跟任何字符的连字符，并将其大写并将连字符+字符替换为大写字符。

Answer 2

为了保留您现有的代码，我刚刚添加了对索引的检查，如果 item 为 0（假），它将返回item而不是转换后的 item，因为问题只是您将第一个 item 大写，而你不应该。

简而言之，内联表达式变为： (item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item (item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item ，因为：

• 如果 index 不是 falsy（因此，如果 index 在您的上下文中 > 0），则返回大写字符串。
• 否则，返回当前项目。

当然，这可能更简洁，并且可能是单行代码，但我希望尽可能接近您的代码，以便您了解问题所在：

 function camelize(str){ let arr = str.split('-'); let capital = arr.map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item.toLowerCase()); // ^-- change here. let capitalString = capital.join(""); console.log(capitalString); } camelize("my-kebab-string");

作为旁注，您可以在这里找到一个潜在的更清晰的答案： 将任何字符串转换为驼峰式

Answer 3

对于lodash用户：

_.camelCase('my-kebab-string') => 'myKebabString'

Answer 4

第一种方法是将capital数组的第一个条目转换为小写，如下所示：

capital[0] = capital[0].toLowerCase();

另一种我认为效率更高的方法是将另一个参数传递给map回调，即index 。 看看这个以进一步阅读： https ://www.w3schools.com/jsref/jsref_map.asp

因此，仅if (index > 0)时才转换为大写。 像这样：

let capital = arr.map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item);

Answer 5

所以我尝试了数组字符串和正则表达式，但正则表达式更慢！

 const string = " background-color: red; \n color: red;\n z-index: 10" // regex console.time("regex") let property = string const camelProp = property.replace(/(-[az])/, (g) => { return g.replace("-", "").toUpperCase() }) console.timeEnd("regex") // custom console.time("custom") const str = string let strNew = str .split("-") .map((e) => { return e[0].toUpperCase() + e.slice(1) }) .join("") console.timeEnd("custom") console.log(camelProp) console.log(strNew)