JavaScript中连缀字符串转驼峰写法的方法汇总

今天偶然看到一道笔试题,要求将js中连缀形式的字符串转换成驼峰写法的字符串,这个题目自己不难,用一些简单的处理方法就能实现,但在于到底有多少种思路能够去解决这个问题呢。正则表达式

@input: "get-element-by-id"
@output: "getElementById"

split( )方法

最简单的办法,就是先拆解成数组,而后对[1, arr.length]的元素进行首字母大写操做。数组

let str = 'get-element-by-id';
let newStr = '';
let arr = str.split('-');
arr.forEach((v, k) => {
  if(k > 0) {
    v = `${v.chatAt(0).toUpperCase()}${v.substring(1)}`;
  }
  newStr = newStr.concat(v);
})
console.log(newStr);   // getElementById

另外一种写法:函数

let str = 'get-element-by-id';
let arr = str.split('-');
for(let i=1; i<arr.length; i++){
  arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1);
}
console.log(arr.join(''));   // getElementById

若是嫌这种写法太过传统,也能够试试js数组的reduce方法来进行拼接:code

let str = 'get-element-by-id';
newStr = str.split('-').reduce((total, value, index, array) => 
  index === 0 ? total + value : total + value[0].toUpperCase() + value.slice(1), ''
); 
console.log(newStr);   // getElementById

这种写法更加的优雅,至于reduce方法四个参数的意义,能够在这里查询。对象

indexOf( )方法

利用indexOf( )能够拿到'-'的位置,可是indexOf只能字符首次出现的位置,因此要加一个循环:索引

let str = 'get-element-by-id';
let arr = [];
let pos = str.indexOf("-");
while(pos > -1){
  arr.push(pos);
  pos = str.indexOf("-", pos + 1);
}
console.log(arr);   // [3, 11, 14]

如今拿到了全部'-'的索引位置,它们的index + 1就是咱们须要变成大写的字母。element

正则表达式

利用正则表达式,咱们能够查找到特定形式的字符,并加以替换。字符串

let str = ‘get-element-by-id’;
str = str.replace(/-(\w)/g, ($0,$1) => {
  return $1.toUpperCase();
});
console.log(str);   // getElementById

这里主要用到的replace须要关注一下,在str.replace(reg, ( ) => { })方法中,用到了$0,$1两个参数,经过这里案例,顺便讲一下字符串的replace( )方法,replace( ) 方法用于在字符串中用一些字符替换另外一些字符,或替换一个与正则表达式匹配的子串。get

stringObject.replace(RegExp/substr, replacement);
Params Desc
RegExp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。
replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。

这个方法执行的是查找并替换的操做,执行结果会返回一个新的字符串,会是用 replacement 替换了 Regexp 的第一次(或全部,取决于正则中有无全局标志g参数)匹配以后获得的。input

值得注意的是,replacement 能够是字符串,也能够是函数。若是它是字符串,那么每一个匹配上的都将由字符串替换。可是 replacement 中的$字符具备特定的含义。以下表所示,它说明从模式匹配获得的字符串将用于替换。

字符 替换文本
$一、$二、...、$99 与 RegExp 中的第 1 到第 99 个子表达式相匹配的文本。
$& 与 Regexp 相匹配的子串。
$` 位于匹配子串左侧的文本。
$' 位于匹配子串右侧的文本。
$$ 直接量符号。

前面咱们用到了 $0 和 $1,其实$n指的是利用正则在目标字符串匹配到的第n个内容,其值根据RegExp而定,若是参数只有两个,$0 和 $1建议由all 和 letter 代替,这样更有助于理解。在这种状况下,每一个匹配都调用该函数,它返回的字符串将做为替换文本使用。该函数的第一个参数是匹配模式的字符串(对应例子中就是-e,-b,-i ),第二个参数是与模式中的子表达式匹配的字符串,能够有 0 个或多个这样的参数(对应例子中就是e,b,i )。接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 自己。

以上是一种主要思路,具体实现方式上,可能有一些细节上的不一样,可是都大同小异的,但愿给新手一些参考。

相关文章
相关标签/搜索