本篇内容介绍了“JS下划线和驼峰互转的方法有几种，分别是怎样做的”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

应用场景： 

有时候传给后端的参数是驼峰命名，回显的时候是下划线，这个时候就需要修改key值

方法一：正则表达式 （推荐）

驼峰式转下横线：

function toLowerLine(str) {
 var temp = str.replace(/[A-Z]/g, function (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("testToLowerLine"));  //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){
   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

下横线转驼峰式：

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(''); //转为字符数组
 }
 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, 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字符串的下划线命名和驼峰命名转换

1.驼峰转连字符:

var s = "fooStyleCss";
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下划线和驼峰互转的方法有几种，分别是怎样做的都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• React错误边界是什么意思？怎么样使用 ？

  本文主要介绍React错误边界的内容，那么React错误边界是什么意思？怎么样使用呢？错误边界可以说是一种组件，错误边界可以捕获子组件的错误。接下来我们就具体的了解一下。

• 用JS如何实现简单的打字机效果，方法是什么

  这篇文章主要为大家详细介绍了纯js实现打字机效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 在vue项目中怎样配置sass，引入sass文件怎样做

  目录配置sass及引入外部scss文件配置sass引入外部scss文件如果显示错误为如下图所示记住此时需要重启项目 npm run dev踩过的坑 Vue引入Sass文件问题来了，为什么呢？配置sass及引入外部scss文件配置sass安装对应依赖node模块npm install node-sass --save-d

• JS中将一维数组转三维数组的代码怎样写

  javascript中怎么将一维数组转为三维数组？本篇文章就来给大家分享一种转换方法，JS一维数组转化为三维数组有这个方法就够了！

• 怎样用JavaScript实现滑块验证功能？

  今天给大家分享的是用JavaScript实现滑块验证功能，在实际的项目中，常常会遇到验证功能的需求，因此分享给大家做个参考。下文JavaScript实现登录的滑块验证代码，感兴趣的朋友可以参考，接下来我们一起来详细看看吧。