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方法來進行拼接：

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 中的$字符具備特定的含義。以下表所示，它說明從模式匹配獲得的字符串將用於替換。

字符	替換文本
$一、$二、...、$99	與 RegExp 中的第 1 到第 99 個子表達式相匹配的文本。
$&	與 Regexp 相匹配的子串。
$`	位於匹配子串左側的文本。
$'	位於匹配子串右側的文本。
$$	直接量符號。

前面咱們用到了 $0 和 $1，其實$n指的是利用正則在目標字符串匹配到的第n個內容，其值根據RegExp而定，若是參數只有兩個，$0 和 $1建議由all 和 letter 代替，這樣更有助於理解。在這種狀況下，每一個匹配都調用該函數，它返回的字符串將做爲替換文本使用。該函數的第一個參數是匹配模式的字符串（對應例子中就是-e，-b，-i ），第二個參數是與模式中的子表達式匹配的字符串，能夠有 0 個或多個這樣的參數（對應例子中就是e，b，i ）。接下來的參數是一個整數，聲明瞭匹配在 stringObject 中出現的位置。最後一個參數是 stringObject 自己。

以上是一種主要思路，具體實現方式上，可能有一些細節上的不一樣，可是都大同小異的，但願給新手一些參考。