成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

SKYZACK / 1929人閱讀

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

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

@input: "get-element-by-id"
@output: "getElementById"
split( )方法

最簡(jiǎn)單的辦法，就是先拆解成數(shù)組，然后對(duì)[1, arr.length]的元素進(jìn)行首字母大寫操作。

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方法來進(jìn)行拼接：


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方法四個(gè)參數(shù)的意義，可以在這里查詢。

indexOf( )方法

利用indexOf( )可以拿到"-"的位置，但是indexOf只能字符首次出現(xiàn)的位置，所以要加一個(gè)循環(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就是我們需要變成大寫的字母。

正則表達(dá)式

利用正則表達(dá)式，我們可以查找到特定形式的字符，并加以替換。


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兩個(gè)參數(shù)，通過這里案例，順便講一下字符串的replace( )方法，replace( ) 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串。


stringObject.replace(RegExp/substr, replacement);






Params
Desc





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




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






這個(gè)方法執(zhí)行的是查找并替換的操作，執(zhí)行結(jié)果會(huì)返回一個(gè)新的字符串，會(huì)是用 replacement 替換了 Regexp 的第一次（或所有，取決于正則中有無全局標(biāo)志g參數(shù)）匹配之后得到的。


值得注意的是，replacement 可以是字符串，也可以是函數(shù)。如果它是字符串，那么每個(gè)匹配上的都將由字符串替換。但是 replacement 中的$字符具有特定的含義。如下表所示，它說明從模式匹配得到的字符串將用于替換。





字符
替換文本





$1、$2、...、$99
與 RegExp 中的第 1 到第 99 個(gè)子表達(dá)式相匹配的文本。




$&
與 Regexp 相匹配的子串。




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




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




$$
直接量符號(hào)。






前面我們用到了 $0 和 $1，其實(shí)$n指的是利用正則在目標(biāo)字符串匹配到的第n個(gè)內(nèi)容，其值根據(jù)RegExp而定，如果參數(shù)只有兩個(gè)，$0 和 $1建議由all 和 letter 代替，這樣更有助于理解。在這種情況下，每個(gè)匹配都調(diào)用該函數(shù)，它返回的字符串將作為替換文本使用。該函數(shù)的第一個(gè)參數(shù)是匹配模式的字符串（對(duì)應(yīng)例子中就是-e，-b，-i ），第二個(gè)參數(shù)是與模式中的子表達(dá)式匹配的字符串，可以有 0 個(gè)或多個(gè)這樣的參數(shù)（對(duì)應(yīng)例子中就是e，b，i ）。接下來的參數(shù)是一個(gè)整數(shù)，聲明了匹配在 stringObject 中出現(xiàn)的位置。最后一個(gè)參數(shù)是 stringObject 本身。


以上是一種主要思路，具體實(shí)現(xiàn)方式上，可能有一些細(xì)節(jié)上的不同，但是都大同小異的，希望給新手一些參考。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/105540.html

相關(guān)文章

  • 精益 React 學(xué)習(xí)指南 （Lean React）- 1.2 JSX 語(yǔ)法

    摘要：需要提醒讀者的是，的很多例子都是通過來寫的，但這并不是語(yǔ)法，后面我們會(huì)有單獨(dú)的一小節(jié)講解的基本語(yǔ)法，不過目前為止我們先將跟多精力放在上。 書籍完整目錄 1.2 JSX 語(yǔ)法 showImg(https://segmentfault.com/img/bVvKLR); 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html ...

    moven_j 評(píng)論0 收藏0

  • 細(xì)說 jQuery 元素篇（一） - 理解 DOM

    摘要：最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì)元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關(guān)系。被封裝到對(duì)象中的元素會(huì)被自動(dòng)地，隱式地循環(huán)遍歷。訪問從上可知，返回的是對(duì)象，但是我們有時(shí)也希望直接對(duì)元素進(jìn)行操作。 DOM - Document Object Model，即文檔對(duì)象模型，它通過對(duì)象樹來展示 HTML 代碼。jQuery 最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì) DOM 元素的操作。 DOM...

    everfight 評(píng)論0 收藏0

  • Web前端開發(fā)規(guī)范文檔

    摘要：前端開發(fā)規(guī)范文檔規(guī)范目的使開發(fā)流程更加規(guī)范化。中的非注釋類中文字符須轉(zhuǎn)換成編碼使用，以避免編碼錯(cuò)誤時(shí)亂碼顯示。文件規(guī)范文件名用英文單詞，多個(gè)單詞用駝峰命名法。書寫規(guī)范命名規(guī)范。圖片規(guī)范命名應(yīng)用小寫英文數(shù)字組合，便于團(tuán)隊(duì)其他成員理解。 Web前端開發(fā)規(guī)范文檔 規(guī)范目的： 使開發(fā)流程更加規(guī)范化。 通用規(guī)范： TAB鍵用兩個(gè)空格代替（WINDOWS下TAB鍵占四個(gè)空格，LINUX下TAB鍵...

    付倫 評(píng)論0 收藏0

  • Web前端開發(fā)規(guī)范文檔

    摘要：前端開發(fā)規(guī)范文檔規(guī)范目的使開發(fā)流程更加規(guī)范化。中的非注釋類中文字符須轉(zhuǎn)換成編碼使用，以避免編碼錯(cuò)誤時(shí)亂碼顯示。文件規(guī)范文件名用英文單詞，多個(gè)單詞用駝峰命名法。書寫規(guī)范命名規(guī)范。圖片規(guī)范命名應(yīng)用小寫英文數(shù)字組合，便于團(tuán)隊(duì)其他成員理解。 Web前端開發(fā)規(guī)范文檔 規(guī)范目的： 使開發(fā)流程更加規(guī)范化。 通用規(guī)范： TAB鍵用兩個(gè)空格代替（WINDOWS下TAB鍵占四個(gè)空格，LINUX下TAB鍵...

    Chiclaim 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<