目錄

• 應用場景：
• 方法一：正則表示式 （推薦）
• 方法二：利用陣列的 reduce 方法實現
• 方法三：利用陣列的 map 方法實現
• 字串的下劃線命名和駝峰命名轉換

應用場景：

有時候傳給後端的引數是駝峰命名，回顯的時候是下劃線，這個時候就需要修改key值

方法一：正則表示式 （推薦）

駝峰式轉下橫線：

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

下橫線轉駝峰式：

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

方法二：利用陣列的 reduce 方法實現

駝峰式轉下橫線：

function doLowerLine(previousValue,currentValue,currentIndex,array){
 if(/[A-Z]/.test(currentValue)){
  currentValue = currentValue.toLowerCase();
  if(currentIndex===0){
   retuhttp://www.cppcns.com
 
rn 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

下橫線轉駝峰式：

function doCamel(previousValue,array){
 if(currentValue === '_'){
  return previousValue + currentValue.toUpperCase();
 }else{
  return previousValue + currentValue;
 }
}
function toCamel(str) {
 if(typeof str === 'string'){
  str = str.split(''); //轉為字元陣列
 }
 return str.reduce(doCamel);
}
console.log(toCamel('test_to_camel'));    //TestToCamel

方法三：利用陣列的 map 方法實現

駝峰式轉下橫線：

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,doLowerLiArHZeqne).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字串的下劃線命名和駝峰命名轉換

1.駝峰轉連字元:

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

2.轉駝峰

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();});

到此這篇關於js下劃線和駝峰互相轉換的實現(多種方法)的文章就介紹到這了,更多相關js下劃線和駝峰互相轉換內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！