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驼峰字符串转下划线字符串内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS原型与原型链的深入理解

    JS原型与原型链的深入理解

    这篇文章主要和大家一起深入理解JS原型与原型链,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 可插入图片的TEXT文本框

    可插入图片的TEXT文本框

    这篇文章主要介绍了可插入图片的TEXT文本框,有需要的朋友可以参考一下
    2013-12-12
  • Bootstrap模态框插件使用详解

    Bootstrap模态框插件使用详解

    这篇文章主要为大家详细介绍了Bootstrap模态框插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js验证是否为数字的总结

    js验证是否为数字的总结

    js验证是否为数字的总结,需要的朋友可以参考一下
    2013-04-04
  • 点击页面任何位置隐藏div的实现方法

    点击页面任何位置隐藏div的实现方法

    下面小编就为大家带来一篇点击页面任何位置隐藏div的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JS实现随机抽奖小功能

    JS实现随机抽奖小功能

    这篇文章主要为大家详细介绍了JS实现随机抽奖小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • javascript如何用递归写一个简单的树形结构示例

    javascript如何用递归写一个简单的树形结构示例

    本篇文章主要介绍了javascript如何用递归写一个简单的树形结构示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS实现iframe中子父页面跨域通讯的方法分析

    JS实现iframe中子父页面跨域通讯的方法分析

    这篇文章主要介绍了JS实现iframe中子父页面跨域通讯的方法,结合实例形式分析了JS实现iframe页面跨域通讯常见操作技巧与相关注意事项,需要的朋友可以参考下
    2020-03-03
  • 如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标

    如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标

    从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本,下面通过本文给大家介绍下如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
    2016-12-12
  • js拖拽功能实现代码解析

    js拖拽功能实现代码解析

    这篇文章主要为大家详细介绍了js实现拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论