js下劃線和駝峰互相轉(zhuǎn)換的實現(xiàn)(多種方法)
應(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 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解)
下面小編就為大家分享一篇基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12JavaScript給每一個li節(jié)點綁定點擊事件的實現(xiàn)方法
這篇文章主要介紹了JavaScript給每一個li節(jié)點綁定點擊事件的實現(xiàn)方法,包括js循環(huán)給li綁定參數(shù)不同的點擊事件,需要的朋友可以參考下2016-12-12