JS实现驼峰字符串转下划线字符串的三种方法

 更新时间:2023年11月16日 09:59:03   作者:一只小可乐吖  
这篇文章主要介绍了js下划线和驼峰互相转换的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

需求如下:

将驼峰写法的字符串转为下划线写法的字符串

eg:输入:"yiZhiXiaoKeLeYa"

输出:"yi_zhi_xiao_ke_le_ya"

实现思路一:

可以使用正则表达式来实现驼峰字符串转下划线字符串:

function toUnderline(str) {
  return str.replace(/([A-Z])/g, '_$1').toLowerCase();
}
 
console.log(toUnderline('yiZhiXiaoKeLeYa')); // 输出 'yi_zhi_xiao_ke_le_ya'
console.log(toUnderline('myCode')); // 输出 'my_code'

/([A-Z])/g 是一个正则表达式,表示匹配所有大写字母。_$1 中的 $1 表示正则表达式匹配到的第一个大写字母,实现了在它前面添加下划线的效果。最后,使用 toLowerCase() 将所有字母转换成小写。

实现思路二:

利用 String.prototype.split() 和 Array.prototype.join() 方法:

function toUnderline(str) {
  let result = '';
  for (let i = 0; i < str.length; i++) {
    if (str[i] === str[i].toUpperCase()) {
      result += '_' + str[i].toLowerCase();
    } else {
      result += str[i];
    }
  }
  return result;
}
console.log(toUnderline('yiZhiXiaoKeLeYa')); // 输出 'yi_zhi_xiao_ke_le_ya'
console.log(toUnderline('myCode')); // 输出 'my_code'

遍历字符串中的每个字符,如果字符是大写字母,则在其前面添加下划线并转化为小写字母,否则直接拼接

实现思路三: 

利用递归和 String.prototype.replace() 方法:

function toUnderline(str) {
  if (str.length <= 1) {
    return str.toLowerCase();
  }
  let firstChar = str[0];
  if (firstChar === firstChar.toUpperCase()) {
    firstChar = '_' + firstChar.toLowerCase();
  }
  return firstChar + toUnderline(str.slice(1));
}
 
console.log(toUnderline('yiZhiXiaoKeLeYa')); // 输出 'yi_zhi_xiao_ke_le_ya'
console.log(toUnderline('myCode')); // 输出 'my_code'

将字符串从第二个字符开始传入递归函数中处理,处理完成后在第一个字符前面根据大小写添加下划线。当字符串长度小于等于 1 时,直接转化为小写字母。

到此这篇关于JS实现驼峰字符串转下划线字符串的三种方法的文章就介绍到这了,更多相关JS驼峰字符串转下划线字符串内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript设计模式 – 组合模式原理与应用实例分析

    javascript设计模式 – 组合模式原理与应用实例分析

    这篇文章主要介绍了javascript设计模式 – 组合模式,结合实例形式分析了javascript组合模式相关概念、原理、应用场景及相关使用注意事项,需要的朋友可以参考下
    2020-04-04
  • 浅谈js中的attributes和Attribute的用法与区别

    浅谈js中的attributes和Attribute的用法与区别

    这篇文章主要介绍了浅谈js中的attributes和Attribute的用法与区别,attributes可以获取一个对象中的一个属性,attributes 属性返回指定节点属性的集合,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • ES6中Array.includes()函数的用法

    ES6中Array.includes()函数的用法

    这篇文章主要介绍了ES6中Array.includes()函数的用法,需要的朋友可以参考下
    2017-09-09
  • 微信小程序手动添加收货地址省市区联动

    微信小程序手动添加收货地址省市区联动

    这篇文章主要为大家详细介绍了微信小程序手动添加收货地址省市区联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Avalon中文长字符截取、关键字符隐藏、自定义过滤器

    Avalon中文长字符截取、关键字符隐藏、自定义过滤器

    avalon是一个简单易用迷你的MVVM框架。通过本文给大家介绍Avalon中文长字符截取、关键字符隐藏、自定义过滤器的相关资料,需要的朋友一起学习吧
    2016-05-05
  • JS动态计算移动端rem的解决方案

    JS动态计算移动端rem的解决方案

    移动设备分辨率五花八门虽然我们可以通过CSS3的media query来实现适配,但是这种做法并不能适配所有设备,这篇文章主要介绍了js动态计算移动端rem的解决方案,非常不错,感兴趣的朋友一起看看吧
    2016-10-10
  • 详解ajax、fetch、axios的区别

    详解ajax、fetch、axios的区别

    本文主要介绍了详解ajax、fetch、axios的区别,众所周知它们都用来发送请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历

    javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历

    javascript 浏览器 判断 绑定事件 arguments 转换数组 数组遍历等函数
    2009-07-07
  • javascript实现匀速动画效果

    javascript实现匀速动画效果

    这篇文章主要为大家详细介绍了javascript实现匀速动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 基于JS绘制2021的烟花效果 附源码下载

    基于JS绘制2021的烟花效果 附源码下载

    这篇文章主要介绍了基于JS绘制2021的烟花效果,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03

最新评论