摘要:今天偶然看到一道筆試題,要求將中連綴形式的字符串轉換成駝峰寫法的字符串,這個題目本身不難,用一些簡單的處理方法就能實現,但在于到底有多少種思路可以去解決這個問題呢。規定子字符串或要替換的模式的對象。但是中的字符具有特定的含義。
今天偶然看到一道筆試題,要求將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
摘要:需要提醒讀者的是,的很多例子都是通過來寫的,但這并不是語法,后面我們會有單獨的一小節講解的基本語法,不過目前為止我們先將跟多精力放在上。 書籍完整目錄 1.2 JSX 語法 showImg(https://segmentfault.com/img/bVvKLR); 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html ...
摘要:最強大的特性之一就是簡化了對元素的操作。從圖中,我們可以看出元素中父元素子元素之間的關系。被封裝到對象中的元素會被自動地,隱式地循環遍歷。訪問從上可知,返回的是對象,但是我們有時也希望直接對元素進行操作。 DOM - Document Object Model,即文檔對象模型,它通過對象樹來展示 HTML 代碼。jQuery 最強大的特性之一就是簡化了對 DOM 元素的操作。 DOM...
摘要:前端開發規范文檔規范目的使開發流程更加規范化。中的非注釋類中文字符須轉換成編碼使用,以避免編碼錯誤時亂碼顯示。文件規范文件名用英文單詞,多個單詞用駝峰命名法。書寫規范命名規范。圖片規范命名應用小寫英文數字組合,便于團隊其他成員理解。 Web前端開發規范文檔 規范目的: 使開發流程更加規范化。 通用規范: TAB鍵用兩個空格代替(WINDOWS下TAB鍵占四個空格,LINUX下TAB鍵...
摘要:前端開發規范文檔規范目的使開發流程更加規范化。中的非注釋類中文字符須轉換成編碼使用,以避免編碼錯誤時亂碼顯示。文件規范文件名用英文單詞,多個單詞用駝峰命名法。書寫規范命名規范。圖片規范命名應用小寫英文數字組合,便于團隊其他成員理解。 Web前端開發規范文檔 規范目的: 使開發流程更加規范化。 通用規范: TAB鍵用兩個空格代替(WINDOWS下TAB鍵占四個空格,LINUX下TAB鍵...
閱讀 3460·2019-08-30 13:15
閱讀 1400·2019-08-29 18:34
閱讀 822·2019-08-29 15:18
閱讀 3480·2019-08-29 11:21
閱讀 3246·2019-08-29 10:55
閱讀 3688·2019-08-26 10:36
閱讀 1869·2019-08-23 18:37
閱讀 1816·2019-08-23 16:57