JS實(shí)現(xiàn)字符串轉(zhuǎn)駝峰格式的方法

更新時(shí)間：2016年12月16日 11:02:17 作者：鬼畜十三

這篇文章主要介紹了JS實(shí)現(xiàn)字符串轉(zhuǎn)駝峰格式的方法,結(jié)合實(shí)例形式分析了傳統(tǒng)的字符串遍歷轉(zhuǎn)換及正則替換兩種操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)字符串轉(zhuǎn)駝峰格式的方法。分享給大家供大家參考，具體如下：

實(shí)現(xiàn)效果如：border-bottom-color =>borderBottomColor

傳傳統(tǒng)方法

分析：

1.轉(zhuǎn)大寫，需要用到字符串的toUpperCase()方法

2.去掉-，需要用到字符串方法split()，這樣就轉(zhuǎn)成數(shù)組了，但數(shù)組中的每一個(gè)元素依然是字符串，所以可以用循環(huán)的方法取到第一個(gè)后面的元素

3.取第一個(gè)后面的元素的第一個(gè)字符，需要用到字符串的charAt()方法

4.第一個(gè)字符后面的字符，可以通過字符串截取方法substring()獲得，這時(shí)把兩個(gè)拼接再賦回給原數(shù)組。即完成了轉(zhuǎn)換

5.用join()方法把數(shù)組的逗號(hào)去掉，拼接成字符串

var str="border-bottom-color";
function tf(){
  var arr=str.split("-");
  for(var i=1;i<arr.length;i++){
    arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
  }
  return arr.join("");
};
tf(str);

正則的方法

分析：

1.正則為-字符，即var re=/-\w/g;匹配到-字符

2.用正則的replace()方法替換這個(gè)規(guī)范為去掉-以及字符大寫，通過回調(diào)函數(shù)第一個(gè)參數(shù)直接轉(zhuǎn)大寫

var str="border-bottom-color";
function tf(){
  var re=/-(\w)/g;
  str=str.replace(re,function($0,$1){
    return $1.toUpperCase();
  });
  alert(str)
};
tf(str);

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

JS
字符串

相關(guān)文章

JavaScript前端實(shí)現(xiàn)拼圖分割效果
這篇文章主要為大家詳細(xì)介紹了如何通過JavaScript前端實(shí)現(xiàn)拼圖分割效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-10-10
使用canvas實(shí)現(xiàn)有趣的彈簧效果
這篇文章主要為大家詳細(xì)介紹了如何使用canvas實(shí)現(xiàn)有趣的彈簧效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下
2023-12-12
js 多瀏覽器分別判斷代碼
比較實(shí)用的多款瀏覽器判斷代碼，需要的朋友可以收集下，適合需要區(qū)別對(duì)待不同瀏覽器，執(zhí)行不用的操作的代碼。
2010-04-04
JS實(shí)現(xiàn)支持Ajax驗(yàn)證的表單插件
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)支持Ajax驗(yàn)證的表單插件，感興趣的小伙伴們可以參考一下
2016-03-03
前端實(shí)現(xiàn)PDF預(yù)覽的三種方法介紹
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)PDF預(yù)覽的三種方法,包括pdfjs-dist,react-pdf和pdf-viewer,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-03-03
巧用js提交表單輕松解決一個(gè)頁面有多個(gè)提交按鈕
使用js提交表單想必大家都會(huì)，如果要實(shí)現(xiàn)一個(gè)頁面有多個(gè)提交按鈕，你會(huì)嗎？下面有個(gè)不錯(cuò)的示例，大家可以感受下
2013-11-11
webpack-dev-server 的 host 配置 0.0.0.0的方法
這篇文章主要介紹了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,,需要的朋友可以參考下
2024-01-01
如何在JavaScript中正確處理變量
這篇文章主要介紹了如何在JavaScript中正確處理變量，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-12-12
BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【一】
KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。通過本文給大家介紹BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【一】，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
JavaScript原始數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型，用于表示一個(gè)獨(dú)一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用，需要的可以參考一下
2022-11-11