1

今天偶然看到一道笔试题,要求将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方法来进行拼接:

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就是我们需要变成大写的字母。

正则表达式

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

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( ) 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

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

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

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

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

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

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


ERIC
28 声望2 粉丝

Play around with Javascript~