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

第一种方法是将 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 2

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

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

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

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

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

Answer 3

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

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

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

Answer 4

lodash 用户：

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

Answer 5

所以我尝试了 array-string 和正则表达式，但正则表达式速度较慢！

const string = " background-color: red; \n color: red;\n z-index: 10"

// regex
console.time("regex")
let property = string
const camelProp = property.replace(/(-[a-z])/, (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)

使用 JavaScript 将 kebab-case 转换为 camelCase

Convert kebab-case to camelCase with JavaScript

javascript

arrays

string

camelcasing

kebab-case