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

jiezi

5 年前

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

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

最简单的办法，就是先拆解成数组，然后对 [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 只能字符首次出现的位置，所以要加一个循环：

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 本身。

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

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

split()方法

indexOf()方法

正则表达式