Application scenarios:Sometimes the parameters passed to the backend are camel case named, and underscores are used when echoing. In this case, you need to modify the key value. Method 1: Regular Expression (Recommended)Camel case with a horizontal line down: function toLowerLine(str) { var temp = str.replace(/[AZ]/g, function (match) { return "_" + match.toLowerCase(); }); if(temp.slice(0,1) === '_'){ //If the first letter is uppercase, there will be an extra _ when executing replace, so you need to remove it here temp = temp.slice(1); } return temp; }; console.log(toLowerLine("TestToLowerLine")); //test_to_lower_line console.log(toLowerLine("testToLowerLine")); //test_to_lower_line The lower horizontal line turns to camel case: function toCamel(str) { return str.replace(/([^_])(?:_+([^_]))/g, function ($0, $1, $2) { return $1 + $2.toUpperCase(); }); } console.log(toCamel('test_to_camel')); //testToCamel Method 2: Using the array reduce methodCamel case with a horizontal line down: function doLowerLine(previousValue, currentValue, currentIndex, array){ if(/[AZ]/.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 The lower horizontal line turns to camel case: 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(''); //Convert to character array} return str.reduce(doCamel); } console.log(toCamel('test_to_camel')); //TestToCamel Method 3: Using the map method of arrayCamel case with a horizontal line down: function doLowerLine(val, index, arr){ if(/[AZ]/.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_line JS string underscore naming and camel case naming conversion1. CamelCase to hyphen: var s = "fooStyleCss"; s = s.replace(/([AZ])/g,"-$1").toLowerCase(); //Use regular expressions to replace, concise and clear, great 2. Turn the hump var s1 = "foo-style-css"; s1 = s1.replace(//-(/w)/g, function(all, letter){ return letter.toUpperCase(); }); //I don't quite understand this part 2. So I wrote one myself, ^_^, this one is easy to understand, but there is a little more code; 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); } Write another one, this time using regular expressions: var s1 = "style-sheet-base"; s1 = s1.replace(//-(/w)/g, function(x){return x.slice(1).toUpperCase();}); This is the end of this article about the implementation of converting between js underline and camel case (multiple methods). For more relevant content about converting between js underline and camel case, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: HTML table tag tutorial (12): border style attribute FRAME
>>: The most complete 50 Mysql database query exercises
Win2008 R2 zip format mysql installation and conf...
This article shares the specific code of JavaScri...
1. First find the Data file on the migration serv...
Table of contents 1. Insert statement 1.1 Insert ...
background Sometimes we need to get the creation ...
Environment: (docker, k8s cluster), continue with...
1. Click the server host and click "Virtual ...
Table of contents 1. How to switch 2. Dynamically...
This article example shares the specific code of ...
What is a directive? Both Angular and Vue have th...
First, download the green free installation versi...
It is very common to see images and text displaye...
Preface The database deadlocks I encountered befo...
Table of contents What is Vuex? Vuex usage cycle ...
Today, because I wanted to install MySQL, I went ...