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

飞熊 • 2023年4月28日上午10:15 • 前端开发 • 阅读 163

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

/*
* 下划线转换驼峰
*/ 
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