Implementation of converting between underline and camel case in js (multiple methods)

Implementation of converting between underline and camel case in js (multiple methods)

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 method

Camel 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 array

Camel 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 conversion

1. 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:
  • Example code for converting camel case to underline in js object attribute name
  • Implementation of converting camel case to underline and underline to camel case in Go language json encoding

<<:  HTML table tag tutorial (12): border style attribute FRAME

>>:  The most complete 50 Mysql database query exercises

Recommend

Win2008 R2 mysql 5.5 zip format mysql installation and configuration

Win2008 R2 zip format mysql installation and conf...

JavaScript to achieve floor effect

This article shares the specific code of JavaScri...

Detailed explanation of how to migrate a MySQL database to another machine

1. First find the Data file on the migration serv...

MySQL learning database operation DML detailed explanation for beginners

Table of contents 1. Insert statement 1.1 Insert ...

Getting the creation time of a file under Linux and a practical tutorial

background Sometimes we need to get the creation ...

Implementation of k8s deployment of docker container

Environment: (docker, k8s cluster), continue with...

Several ways to switch between Vue Tab and cache pages

Table of contents 1. How to switch 2. Dynamically...

Vue implements book management case

This article example shares the specific code of ...

Summary of Vue 3 custom directive development

What is a directive? Both Angular and Vue have th...

Several solutions for CSS record text icon alignment

It is very common to see images and text displaye...

A complete record of a Mysql deadlock troubleshooting process

Preface The database deadlocks I encountered befo...

How to use vuex in Vue project

Table of contents What is Vuex? Vuex usage cycle ...

MySQL Community Server compressed package installation and configuration method

Today, because I wanted to install MySQL, I went ...