JavaScript 实现字符串驼峰式与下划线式互相转换

方法一:正则表达式 (推荐)

/*
* 下划线转换驼峰
*/ 
function underlineToHump(str) {
  // 如果首字母是_,执行 replace 时会多一个_,这里需要去掉
  if(str.slice(0,1) === '_'){ 
    str = str.slice(1);
  }
  return str.replace(/([^_])(?:_+([^_]))/g, function ($0, $1, $2) {
    return $1 + $2.toUpperCase();
  });
}

/*
* 驼峰转换下划线
*/ 
function humpToUnderline(str) {
  let temp = str.replace(/[A-Z]/g, function (match) { 
      return "_" + match.toLowerCase();
    });
    // 如果首字母是大写,执行replace时会多一个_,这里需要去掉
    if(temp.slice(0,1) === '_'){ 
      temp = temp.slice(1);
    }
  return temp;
}

console.log(underlineToHump('a_b2_23_c23'),underlineToHump('_test_to_lower_line')); // aB223C23  testToLowerLine
console.log(humpToUnderline('userNameInfo'),humpToUnderline('TestToLowerLine'));//user_name_info test_to_lower_line
方法二:利用数组的 reduce 方法实现
/*
* 下划线转换驼峰
*/ 
function doCamel(preVal, curVal, curIndex, arr){
  if(curVal === '_'){
    curVal = arr[curIndex + 1];
    arr.splice(curIndex + 1, 1)
    return preVal + curVal.toUpperCase();
  }else{
    return preVal + curVal;
  }
}

function underlineToHump(str) {
  if(typeof str === 'string' && str.length){
    str = str.split('');
    // 如果首字母是_,执行 replace 时会多一个_,这里需要去掉
    const fir = str.slice(0,1)[0];
    if(fir === '_'){ 
      str = str.slice(1);
    }
    return str.reduce(doCamel);
  }
}

/*
* 驼峰转换下划线
*/ 
function doUnderline(preVal, curVal, curIndex, array){
  if(/[A-Z]/.test(curVal)){
    curVal = curVal.toLowerCase();
    if(curIndex === 0){
      return preVal + curVal;
    }else{
      return preVal + '_' + curVal;
    }
  }else{
    return preVal + curVal;
  }
}

function humpToUnderline(str) {
  if(typeof str === 'string'){
    str = str.split('');
  }
  return str.reduce(doUnderline,'');
}

console.log(underlineToHump('a_b2_23_c23'),underlineToHump('_test_to_lower_line'));// aB223C23   testToLowerLine
console.log(humpToUnderline('userNameInfo'),humpToUnderline('TestToLowerLine'));//user_name_info test_to_lower_line
方法三:利用数组的 map 方法实现
/*
* 下划线转换驼峰
*/ 
function doHump(val,index,arr){
  if(val === '_'){
    val = arr[index + 1];
    arr.splice(index + 1, 1)
    return val.toUpperCase();
  }else{
    return val;
  }
}

function underlineToHump(str) {
  if(typeof str === 'string' && str.length){
    str = str.split('');
    // 如果首字母是_,执行 replace 时会多一个_,这里需要去掉
    const fir = str.slice(0,1)[0];
    if(fir === '_'){ 
      str = str.slice(1);
    }
    return [].map.call(str,doHump).join('');
  }
}

/*
* 驼峰转换下划线
*/ 
function doUnderline(val,index,arr){
  if(/[A-Z]/.test(val)){
    if(index === 0){
      return val.toLowerCase();
    }else{
      return '_' + val.toLowerCase();
    }
  }else{
    return val;
  }
}

function humpToUnderline(str) {
  if(typeof str === 'string'){
    return [].map.call(str,doUnderline).join('');
    // Array.prototype.map.call(arr, doLowerLine).join('');
  }
}

console.log(underlineToHump('a_b2_23_c23'),underlineToHump('_test_to_lower_line'));//aB223C23    testToLowerLine
console.log(humpToUnderline('userNameInfo'),humpToUnderline('TestToLowerLine'));//user_name_info test_to_lower_line
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明天也要努力

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值