[英]Convert kebab-case to camelCase with JavaScript
Say I have a function that transforms kebab-case
to camelCase
:假设我有一个将
kebab-case
转换为camelCase
的函数:
camelize("my-kebab-string") === 'myKebabString';
I'm almost there, but my code outputs the first letter with uppercase too:我快到了,但我的代码也输出了第一个大写字母:
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");
You can also try regex.您也可以尝试正则表达式。
camelize = s => s.replace(/-./g, x=>x[1].toUpperCase())
Looks only for hyphen followed by any character, and capitalises it and replaces the hyphen+character with the capitalised character.仅查找后跟任何字符的连字符,并将其大写并将连字符+字符替换为大写字符。
To keep your existing code, I've just added a check on the index that will return item
instead of the transformed item if item is 0 (falsy), since the problem is just that you are upper-casing the first item as well, while you shouldn't.为了保留您现有的代码,我刚刚添加了对索引的检查,如果 item 为 0(假),它将返回
item
而不是转换后的 item,因为问题只是您将第一个 item 大写,而你不应该。
In a nutshell, the inline expression becomes: (item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : 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
, because: (item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item
,因为:
Of course, this could be cleaner and likely single line, but I wanted to stay as close as possible to your code so that you could understand what was wrong:当然,这可能更简洁,并且可能是单行代码,但我希望尽可能接近您的代码,以便您了解问题所在:
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");
As a side note, you could've found a potential cleaner answer here: Converting any string into camel case作为旁注,您可以在这里找到一个潜在的更清晰的答案: 将任何字符串转换为驼峰式
对于lodash用户:
_.camelCase('my-kebab-string') => 'myKebabString'
The first method is to just transform to lower case the first entry of your capital
array, like this:第一种方法是将
capital
数组的第一个条目转换为小写,如下所示:
capital[0] = capital[0].toLowerCase();
Another method, which I think to be more efficient, is to pass another parameter to the map
callback, which is the index
.另一种我认为效率更高的方法是将另一个参数传递给
map
回调,即index
。 Take a look at this for further reading: https://www.w3schools.com/jsref/jsref_map.asp看看这个以进一步阅读: https ://www.w3schools.com/jsref/jsref_map.asp
So you transform to upper case only if (index > 0)
.因此,仅
if (index > 0)
时才转换为大写。 Like this:像这样:
let capital = arr.map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item);
so I tried both array-string and regex but regex is slower !所以我尝试了数组字符串和正则表达式,但正则表达式更慢!
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.