将连字符转换为驼峰式 (camelCase)
Posted
技术标签:
【中文标题】将连字符转换为驼峰式 (camelCase)【英文标题】：Convert hyphens to camel case (camelCase) 【发布时间】：2011-10-03 09:49:51 【问题描述】：使用正则表达式（我假设）或其他方法，我如何转换如下内容：
marker-image 或 my-example-setting 到 markerImage 或 myExampleSetting。
我正在考虑仅按 - 拆分，然后将该连字符 +1 的索引转换为大写。但它看起来很脏，希望对正则表达式有一些帮助，可以使代码更干净。
没有 jQuery...
【问题讨论】：
javascript RegExp $1 to upper case的完全重复 它实际上是，但我搜索并从未找到它可能是由于名字晦涩难懂。我建议保持开放，这样人们才能真正找到答案。 “RegExp $1 转大写”...除非他们已经知道正则表达式 IMO，否则没有人会找到它 这很容易解决。我刚刚编辑了标题 所以解决方案的剪切和粘贴将为我赢得一个可接受的答案：| 有没有办法完全相反？ 【参考方案1】：试试这个：
var camelCased = myString.replace(/-([a-z])/g, function (g) return g[1].toUpperCase(); );
正则表达式将匹配marker-image 中的-i 并仅捕获i。然后在回调函数中将其大写并替换。
【讨论】：
仅供参考，情况正好相反：myString.replace(/([a-z][A-Z])/g, function (g) return g[0] + '-' + g[1].toLowerCase() );
我认为参数应该重命名为“m”，如“match”。可以快速写出类似的东西：myString.replace(/-([a-z])/i, function (i) return i[1].toUpperCase() );
通过添加i 标志使您的正则表达式更加健壮是一个好主意。没有它，您的模式会丢失“capitalized-Parts”（不会更改为“capitalizedParts”）。另外，我个人更喜欢提高多个参数的可读性，但这显然是风格问题。总而言之，我会选择.replace( /-([a-z])/gi, function ( $0, $1 ) return $1.toUpperCase(); );。
要补充这一点，如果你想用驼峰式空格分隔的话，下面的方法可以工作：var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) return g[1].toUpperCase(); );
短一点：str.replace(/-./g, c => c. substring(1).toUpperCase())【参考方案2】：
这是Lodash 提供的很棒的实用程序之一，如果您开明并且将其包含在您的项目中。
var str = 'my-hyphen-string';
str = _.camelCase(str);
// results in 'myHyphenString'
【讨论】：
【参考方案3】：您可以获取连字符和下一个字符并将其替换为该字符的大写版本：
var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w)
return w.toUpperCase();
);
【讨论】：
很好 - 我采用了这种方法，但 ES6 将其放入 >> str.replace(/-([az])/g, (x, up) => up.toUpperCase()) 【参考方案4】：这是我的 camelCase 函数版本：
var camelCase = (function ()
var DEFAULT_REGEX = /[-_]+(.)?/g;
function toUpper(match, group1)
return group1 ? group1.toUpperCase() : '';
return function (str, delimiters)
return str.replace(delimiters ? new RegExp('[' + delimiters + ']+(.)?', 'g') : DEFAULT_REGEX, toUpper);
;
)();
它处理以下所有边缘情况：
默认处理下划线和连字符（可使用第二个参数配置） 带有 unicode 字符的字符串 以连字符或下划线结尾的字符串 包含连续连字符或下划线的字符串这里是实时测试的链接：http://jsfiddle.net/avKzf/2/
以下是测试结果：
输入：“ab-cd-ef”，结果：“abCdEf” 输入：“ab-cd-ef-”，结果：“abCdEf” 输入：“ab-cd-ef--”，结果：“abCdEf” 输入：“ab-cd--ef--”，结果：“abCdEf” 输入：“--ab-cd--ef--”，结果：“AbCdEf” 输入：“--ab-cd-__-ef--”，结果：“AbCdEf”请注意，以分隔符开头的字符串将导致开头为大写字母。 如果这不是您所期望的，您始终可以使用 lcfirst。 如果您需要，这是我的 lcfirst：
function lcfirst(str)
return str && str.charAt(0).toLowerCase() + str.substring(1);
【讨论】：
【参考方案5】：这对我来说并不是为了RegExp。当简单的字符串和数组方法就足够时，我个人会尽量避免使用正则表达式：
let upFirst = word =>
word[0].toUpperCase() + word.toLowerCase().slice(1)
let camelize = text =>
let words = text.split(/[-_]/g) // ok one simple regexp.
return words[0].toLowerCase() + words.slice(1).map(upFirst)
camelize('marker-image') // markerImage
【讨论】：
【参考方案6】：将String 的replace() 方法与regular expression 文字和替换函数一起使用。
例如：
'uno-due-tre'.replace(/-./g, (m) => m[1].toUpperCase()) // --> 'unoDueTre'
解释：
'uno-due-tre' 是您要转换为驼峰式大小写的（输入）字符串。
/-./g（传递给replace() 的第一个参数）是regular expression 文字。
'-.'（在斜线之间）是一种模式。它匹配单个'-' 字符，后跟任何单个字符。所以对于字符串'uno-due-tre'，模式'-.' 匹配'-d' 和'-t'。
'g'（在结束斜线之后）是一个标志。它代表“全局”，并告诉replace() 执行全局搜索和替换，即替换所有匹配项，而不仅仅是第一个匹配项。
(m) => m[1].toUpperCase()（传递给replace()的第二个参数）是替换函数。每场比赛调用一次。每个匹配的子字符串都被此函数返回的字符串替换。 m（此函数的第一个参数）表示匹配的子字符串。此函数返回大写的m 的第二个字符。所以当m是'-d'时，这个函数返回'D'。
'unoDueTre' 是 replace() 返回的新（输出）字符串。输入字符串保持不变。
【讨论】：
【参考方案7】：这是我的实现（只是为了弄脏手）
/**
* kebab-case to UpperCamelCase
* @param String string
* @return String
*/
function toUpperCamelCase(string)
return string
.toLowerCase()
.split('-')
.map(it => it.charAt(0).toUpperCase() + it.substr(1))
.join('');
【讨论】：
【参考方案8】：// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());
【讨论】：
【参考方案9】：这是另一个选项，它在此处结合了几个答案并使其成为字符串的方法：
if (typeof String.prototype.toCamel !== 'function')
String.prototype.toCamel = function()
return this.replace(/[-_]([a-z])/g, function (g) return g[1].toUpperCase(); )
;
这样使用：
'quick_brown'.toCamel(); // quickBrown
'quick-brown'.toCamel(); // quickBrown
【讨论】：
【参考方案10】：您可以使用 NPM 中的camelcase。
npm install --save camelcase
const camelCase = require('camelcase');
camelCase('marker-image'); // => 'markerImage';
camelCase('my-example-setting'); // => 'myExampleSetting';
【讨论】：
【参考方案11】：另一个镜头。
用于...
var string = "hyphen-delimited-to-camel-case"
or
var string = "snake_case_to_camel_case"
function toCamelCase( string )
return string.toLowerCase().replace(/(_|-)([a-z])/g, toUpperCase );
function toUpperCase( string )
return string[1].toUpperCase();
Output: hyphenDelimitedToCamelCase
【讨论】：
【参考方案12】：也可以将 indexOf 与递归一起用于该任务。
input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe
比较 ::: 测量两个不同脚本的执行时间：
$ node camelCased.js
someFooSdDsdWeqe
test1: 2.986ms
someFooSdDsdWeqe
test2: 0.231ms
代码：
console.time('test1');
function camelCased (str)
function check(symb)
let idxOf = str.indexOf(symb);
if (idxOf === -1)
return str;
let letter = str[idxOf+1].toUpperCase();
str = str.replace(str.substring(idxOf+1,idxOf+2), '');
str = str.split(symb).join(idxOf !== -1 ? letter : '');
return camelCased(str);
return check('_') && check('-');
console.log(camelCased ('some-foo_sd_dsd-weqe'));
console.timeEnd('test1');
console.time('test2');
function camelCased (myString)
return myString.replace(/(-|\_)([a-z])/g, function (g) return g[1].toUpperCase(); );
console.log(camelCased ('some-foo_sd_dsd-weqe'));
console.timeEnd('test2');
【讨论】：
【参考方案13】：只是一个带有标志、for循环且没有正则表达式的版本：
function camelCase(dash)
var camel = false;
var str = dash;
var camelString = '';
for(var i = 0; i < str.length; i++)
if(str.charAt(i) === '-')
camel = true;
else if(camel)
camelString += str.charAt(i).toUpperCase();
camel = false;
else
camelString += str.charAt(i);
return camelString;
【讨论】：
【参考方案14】：如果您在字符串中允许数字，请使用此选项。
显然，以数字开头的部分不会大写，但这在某些情况下可能很有用。
function fromHyphenToCamelCase(str)
return str.replace(/-([a-z0-9])/g, (g) => g[1].toUpperCase())
function fromHyphenToCamelCase(str)
return str.replace(/-([a-z0-9])/g, (g) => g[1].toUpperCase())
const str1 = "category-123";
const str2 = "111-222";
const str3 = "a1a-b2b";
const str4 = "aaa-2bb";
console.log(`$str1 => $fromHyphenToCamelCase(str1)`);
console.log(`$str2 => $fromHyphenToCamelCase(str2)`);
console.log(`$str3 => $fromHyphenToCamelCase(str3)`);
console.log(`$str4 => $fromHyphenToCamelCase(str4)`);【讨论】：
【参考方案15】：你也可以使用字符串和数组方法；我使用修剪来避免任何空格。
const properCamel = (str) =>
const lowerTrim = str.trim().toLowerCase();
const array = lowerTrim.split('-');
const firstWord = array.shift();
const caps = array.map(word=>
return word[0].toUpperCase() + word.slice(1);
)
caps.unshift(firstWord)
return caps.join('');
【讨论】：
【参考方案16】：这个简单的解决方案考虑了这些边缘情况。
单字 单个字母 没有连字符 超过 1 个连字符const toCamelCase = (text) => text.replace(/(.)([^-|$]*)[-]*/g, (_,letter,word) => `$letter.toUpperCase()$word.toLowerCase()`)
【讨论】：
以上是关于将连字符转换为驼峰式 (camelCase)的主要内容，如果未能解决你的问题，请参考以下文章
如何在 JavaScript 中将驼峰式字符串转换为破折号？
如何将 NSString 从 CamelCase 转换为 TitleCase，将“playerName”转换为“Player Name”？