国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript中連綴字符串轉駝峰寫法的方法匯總

SKYZACK / 1868人閱讀

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

今天偶然看到一道筆試題,要求將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

如果嫌這種寫法太過傳統,也可以試試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 本身。

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105540.html

相關文章

  • 精益 React 學習指南 (Lean React)- 1.2 JSX 語法

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

    moven_j 評論0 收藏0
  • 細說 jQuery 元素篇(一) - 理解 DOM

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

    everfight 評論0 收藏0
  • Web前端開發規范文檔

    摘要:前端開發規范文檔規范目的使開發流程更加規范化。中的非注釋類中文字符須轉換成編碼使用,以避免編碼錯誤時亂碼顯示。文件規范文件名用英文單詞,多個單詞用駝峰命名法。書寫規范命名規范。圖片規范命名應用小寫英文數字組合,便于團隊其他成員理解。 Web前端開發規范文檔 規范目的: 使開發流程更加規范化。 通用規范: TAB鍵用兩個空格代替(WINDOWS下TAB鍵占四個空格,LINUX下TAB鍵...

    付倫 評論0 收藏0
  • Web前端開發規范文檔

    摘要:前端開發規范文檔規范目的使開發流程更加規范化。中的非注釋類中文字符須轉換成編碼使用,以避免編碼錯誤時亂碼顯示。文件規范文件名用英文單詞,多個單詞用駝峰命名法。書寫規范命名規范。圖片規范命名應用小寫英文數字組合,便于團隊其他成員理解。 Web前端開發規范文檔 規范目的: 使開發流程更加規范化。 通用規范: TAB鍵用兩個空格代替(WINDOWS下TAB鍵占四個空格,LINUX下TAB鍵...

    Chiclaim 評論0 收藏0

發表評論

0條評論

SKYZACK

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<