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)文章
實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼
下面筆者就為大家分享一篇實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼,代碼簡潔,具有很好的參考價值,希望對大家有所幫助2017-11-11
Javascript中this關(guān)鍵字的一些小知識
這篇文章主要介紹了Javascript中this關(guān)鍵字的一些小知識,本文講解了this的隱性綁定、var that = this兩部份內(nèi)容,需要的朋友可以參考下2015-03-03
JavaScript的類型轉(zhuǎn)換(字符轉(zhuǎn)數(shù)字 數(shù)字轉(zhuǎn)字符)
不能把JavaScript中的類型轉(zhuǎn)換看作為強(qiáng)制類型轉(zhuǎn)換。2010-08-08
HTML5 Shiv完美解決IE(IE6/IE7/IE8)不兼容HTML5標(biāo)簽的方法
這篇文章主要介紹了HTML5 Shiv完美解決IE(IE6/IE7/IE8)不兼容HTML5標(biāo)簽的方法,需要的朋友可以參考下2015-11-11
微信小程序中限制激勵式視頻廣告位顯示次數(shù)(實現(xiàn)思路)
本文給大家分享微信小程序中限制激勵式視頻廣告位顯示次數(shù),本文通過實例代碼來說明,感興趣的朋友跟隨小編一起看看吧2019-12-12
Javascript 多物體運(yùn)動的實現(xiàn)
這篇文章主要介紹了Javascript 多物體運(yùn)動的實現(xiàn),需要的朋友可以參考下2014-12-12

