使用 JavaScript 将 kebab-case 转换为 camelCase

Posted 2023-04-13

【中文标题】使用 JavaScript 将 kebab-case 转换为 camelCase

【英文标题】：Convert kebab-case to camelCase with JavaScript

【发布时间】：2019-12-24 15:46:50

【问题描述】：

假设我有一个将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");

【问题讨论】：

arr.map((item, index)) => if (index > 0) ... else ... )

【参考方案1】：

你也可以试试正则表达式。

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

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

【讨论】：

天才，但我会选择x=>x[1].toUpperCase()

【参考方案2】：

为了保留您现有的代码，我刚刚添加了对索引的检查，如果 item 为 0（假），将返回 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");

顺便说一句，您可以在这里找到一个更简洁的答案：Converting any string into camel case

【讨论】：

我知道我可以在这种情况下使用 index 属性，但不知道目前如何。非常感谢！

@RobertHovhannisyan 好吧，索引只是可能的解决方案之一。出于性能原因，您可能需要检查链接的主题，这可以通过单个正则表达式而不是映射轻松完成:)。

【参考方案3】：

lodash 用户：

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

【参考方案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);