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

简介: 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


相关文章
|
3月前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
69 1
|
5月前
|
存储 JavaScript 前端开发
JS上传文件(base64字符串和二进制文件流)
这篇文章介绍了两种JavaScript文件上传的方法:使用FileReader对象将文件读取为base64字符串上传,以及使用FormData对象以二进制文件流的形式上传文件,包括如何处理文件选择、读取和上传的详细代码示例。
602 2
JS上传文件(base64字符串和二进制文件流)
|
4月前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
103 5
|
12天前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
37 13
|
2月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
|
2月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
38 2
|
3月前
|
存储 JavaScript 前端开发
JavaScript 字符串(String) 对象
JavaScript 字符串(String) 对象
52 3
|
4月前
|
JavaScript 前端开发
javascript创建字符串
javascript创建字符串
|
4月前
|
JavaScript 前端开发
如何在JavaScript中替换字符串:一篇详细指南
如何在JavaScript中替换字符串:一篇详细指南
|
4月前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法
67 2