JavaScript中連綴字符串轉(zhuǎn)駝峰寫法的方法匯總

SKYZACK 發(fā)布于2019-08-23 18:37 / 1873人閱讀

摘要：今天偶然看到一道筆試題，要求將中連綴形式的字符串轉(zhuǎn)換成駝峰寫法的字符串，這個題目本身不難，用一些簡單的處理方法就能實現(xiàn)，但在于到底有多少種思路可以去解決這個問題呢。規(guī)定子字符串或要替換的模式的對象。但是中的字符具有特定的含義。

今天偶然看到一道筆試題，要求將js中連綴形式的字符串轉(zhuǎn)換成駝峰寫法的字符串，這個題目本身不難，用一些簡單的處理方法就能實現(xiàn)，但在于到底有多少種思路可以去解決這個問題呢。

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

split( )方法

最簡單的辦法，就是先拆解成數(shù)組，然后對[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
如果嫌這種寫法太過傳統(tǒng)，也可以試試js數(shù)組的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

這種寫法更加的優(yōu)雅，至于reduce方法四個參數(shù)的意義，可以在這里查詢。
indexOf( )方法
利用indexOf( )可以拿到"-"的位置，但是indexOf只能字符首次出現(xiàn)的位置，所以要加一個循環(huán)：
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]

現(xiàn)在拿到了所有"-"的索引位置，它們的index + 1就是我們需要變成大寫的字母。
正則表達式
利用正則表達式，我們可以查找到特定形式的字符，并加以替換。
let str = ‘get-element-by-id’;
str = str.replace(/-(w)/g, ($0,$1) => {
  return $1.toUpperCase();
});
console.log(str);   // getElementById

這里主要用到的replace需要關(guān)注一下，在str.replace(reg, ( ) => { })方法中，用到了$0，$1兩個參數(shù)，通過這里案例，順便講一下字符串的replace( )方法，replace( ) 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
stringObject.replace(RegExp/substr, replacement);



Params
Desc



RegExp/substr
必需。規(guī)定子字符串或要替換的模式的 RegExp 對象。


replacement
必需。一個字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。



這個方法執(zhí)行的是查找并替換的操作，執(zhí)行結(jié)果會返回一個新的字符串，會是用 replacement 替換了 Regexp 的第一次（或所有，取決于正則中有無全局標志g參數(shù)）匹配之后得到的。
值得注意的是，replacement 可以是字符串，也可以是函數(shù)。如果它是字符串，那么每個匹配上的都將由字符串替換。但是 replacement 中的$字符具有特定的含義。如下表所示，它說明從模式匹配得到的字符串將用于替換。


字符
替換文本



$1、$2、...、$99
與 RegExp 中的第 1 到第 99 個子表達式相匹配的文本。


$&
與 Regexp 相匹配的子串。


$`
位于匹配子串左側(cè)的文本。


$"
位于匹配子串右側(cè)的文本。


$$
直接量符號。



前面我們用到了 $0 和 $1，其實$n指的是利用正則在目標字符串匹配到的第n個內(nèi)容，其值根據(jù)RegExp而定，如果參數(shù)只有兩個，$0 和 $1建議由all 和 letter 代替，這樣更有助于理解。在這種情況下，每個匹配都調(diào)用該函數(shù)，它返回的字符串將作為替換文本使用。該函數(shù)的第一個參數(shù)是匹配模式的字符串（對應例子中就是-e，-b，-i ），第二個參數(shù)是與模式中的子表達式匹配的字符串，可以有 0 個或多個這樣的參數(shù)（對應例子中就是e，b，i ）。接下來的參數(shù)是一個整數(shù)，聲明了匹配在 stringObject 中出現(xiàn)的位置。最后一個參數(shù)是 stringObject 本身。
以上是一種主要思路，具體實現(xiàn)方式上，可能有一些細節(jié)上的不同，但是都大同小異的，希望給新手一些參考。

Params	Desc
RegExp/substr	必需。規(guī)定子字符串或要替換的模式的 RegExp 對象。
replacement	必需。一個字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。

字符	替換文本
$1、$2、...、$99	與 RegExp 中的第 1 到第 99 個子表達式相匹配的文本。
$&	與 Regexp 相匹配的子串。
$`	位于匹配子串左側(cè)的文本。
$"	位于匹配子串右側(cè)的文本。
$$	直接量符號。