欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js下劃線和駝峰互相轉(zhuǎn)換的實現(xiàn)(多種方法)

 更新時間:2021年10月17日 10:00:29   作者:Cyan_H  
本文主要介紹了js下劃線和駝峰互相轉(zhuǎn)換的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

應(yīng)用場景: 

有時候傳給后端的參數(shù)是駝峰命名,回顯的時候是下劃線,這個時候就需要修改key值

方法一:正則表達(dá)式 (推薦)

駝峰式轉(zhuǎn)下橫線:

function toLowerLine(str) {
 var temp = str.replace(/[A-Z]/g, function (match) { 
  return "_" + match.toLowerCase();
   });
   if(temp.slice(0,1) === '_'){ //如果首字母是大寫,執(zhí)行replace時會多一個_,這里需要去掉
    temp = temp.slice(1);
   }
 return temp;
};
console.log(toLowerLine("TestToLowerLine"));  //test_to_lower_line
console.log(toLowerLine("testToLowerLine"));  //test_to_lower_line

下橫線轉(zhuǎn)駝峰式:

function toCamel(str) {
   return str.replace(/([^_])(?:_+([^_]))/g, function ($0, $1, $2) {
     return $1 + $2.toUpperCase();
   });
}
console.log(toCamel('test_to_camel')); //testToCamel

方法二:利用數(shù)組的 reduce 方法實現(xiàn)

駝峰式轉(zhuǎn)下橫線:

function doLowerLine(previousValue, currentValue, currentIndex, array){
 if(/[A-Z]/.test(currentValue)){
  currentValue = currentValue.toLowerCase();
  if(currentIndex===0){
   return previousValue + currentValue;
  }else{
   return previousValue + '_' + currentValue;
  }
 }else{
  return previousValue + currentValue;
 }
}
function toLowerLine(arr){
 if(typeof arr === 'string'){
  arr = arr.split('');
 }
 return arr.reduce(doLowerLine,'');
}
var a = 'TestToLowerLine';
var res1 = toLowerLine(a); //test_to_lower_line
var res2 = [].reduce.call(a,doLowerLine,''); //test_to_lower_line

下橫線轉(zhuǎn)駝峰式:

function doCamel(previousValue, currentValue, currentIndex, array){
 if(currentValue === '_'){
  return previousValue + currentValue.toUpperCase();
 }else{
  return previousValue + currentValue;
 }
}
function toCamel(str) {
 if(typeof str === 'string'){
  str = str.split(''); //轉(zhuǎn)為字符數(shù)組
 }
 return str.reduce(doCamel);
}
console.log(toCamel('test_to_camel'));    //TestToCamel

方法三:利用數(shù)組的 map 方法實現(xiàn)

駝峰式轉(zhuǎn)下橫線:

function doLowerLine(val, index, arr){
 if(/[A-Z]/.test(val)){
  if(index===0){
   return val.toLowerCase();
  }else{
   return '_'+val.toLowerCase();
  }
 }else{
  return val;
 }
}
function toLowerLine(arr){
 if(typeof arr === 'string'){
  return [].map.call(arr,doLowerLine).join('');
  // Array.prototype.map.call(arr, doLowerLine).join('');
 }else{
  return arr.map(doLowerLine).join('');
 }
}
var a = 'TestToLowerLine';
var res1 = [].map.call(a,doLowerLine).join('');    //test_to_lower_line
var res2 = toLowerLine(a);    //test_to_lower_lin

JS字符串的下劃線命名和駝峰命名轉(zhuǎn)換

1.駝峰轉(zhuǎn)連字符:

var s = "fooStyleCss";
s = s.replace(/([A-Z])/g,"-$1").toLowerCase();
//利用正則進(jìn)行替換,簡潔明了,很棒

2.轉(zhuǎn)駝峰

var s1 = "foo-style-css";
s1 = s1.replace(//-(/w)/g, function(all, letter){
          return letter.toUpperCase();
        });
//這段2看的不是很明白

于是自己寫一個,^_^,這個很容易懂吧,就是代碼多了點;

var s = "style-sheet-base";

var a = s.split("-");
var o = a[0];
for(var i=1;i<a.length;i++){
    o = o + a[i].slice(0,1).toUpperCase() + a[i].slice(1);
}

再寫一個,這次用正則:

var s1 = "style-sheet-base";
s1 = s1.replace(//-(/w)/g, function(x){return x.slice(1).toUpperCase();});

到此這篇關(guān)于js下劃線和駝峰互相轉(zhuǎn)換的實現(xiàn)(多種方法)的文章就介紹到這了,更多相關(guān)js下劃線和駝峰互相轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • JavaScript驗證API的使用

    JavaScript驗證API的使用

    本文主要介紹了JavaScript驗證API的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • 基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解)

    基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解)

    下面小編就為大家分享一篇基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • IE7提供XMLHttpRequest對象為兼容

    IE7提供XMLHttpRequest對象為兼容

    IE7提供XMLHttpRequest對象為兼容...
    2007-03-03
  • 整理關(guān)于Bootstrap警示框的慕課筆記

    整理關(guān)于Bootstrap警示框的慕課筆記

    這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • js拼接html注意問題示例探討

    js拼接html注意問題示例探討

    js的拼接html,會有一些細(xì)節(jié)是需要注意的,也就是單引號的問題,下面有個示例,大家感受下
    2014-07-07
  • JavaScript函數(shù)柯里化詳解

    JavaScript函數(shù)柯里化詳解

    柯里化函數(shù)主要起到預(yù)處理的作用。接下來通過本文給大家介紹JavaScript函數(shù)柯里化有什么作用及實現(xiàn)bind方法,非常具有參考價值特此分享供大家學(xué)習(xí)
    2016-04-04
  • layui表格內(nèi)放置圖片,并點擊放大的實例

    layui表格內(nèi)放置圖片,并點擊放大的實例

    今天小編就為大家分享一篇layui表格內(nèi)放置圖片,并點擊放大的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 基于canvas粒子系統(tǒng)的構(gòu)建詳解

    基于canvas粒子系統(tǒng)的構(gòu)建詳解

    下面小編就為大家?guī)硪黄赾anvas粒子系統(tǒng)的構(gòu)建詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • JS手寫bind之處理new的情況詳解

    JS手寫bind之處理new的情況詳解

    雖然很少會遇到給bind返回的函數(shù)做new操作的場景,但面試中還是會涉及到的,所以本文將實現(xiàn)一下兼容new操作的bind寫法,順便學(xué)習(xí)一下new操作符,需要的可以參考一下
    2022-07-07
  • JavaScript給每一個li節(jié)點綁定點擊事件的實現(xiàn)方法

    JavaScript給每一個li節(jié)點綁定點擊事件的實現(xiàn)方法

    這篇文章主要介紹了JavaScript給每一個li節(jié)點綁定點擊事件的實現(xiàn)方法,包括js循環(huán)給li綁定參數(shù)不同的點擊事件,需要的朋友可以參考下
    2016-12-12

最新評論