JS实现字符串转驼峰格式的方法_网络技术_宿州市腾雀网络科技有限公司

JS实现字符串转驼峰格式的方法

发布时间 - 2026-01-10 21:52:51 点击率：次

本文实例讲述了JS实现字符串转驼峰格式的方法。分享给大家供大家参考，具体如下：

实现效果如：border-bottom-color =>borderBottomColor

传传统方法

分析：

1.转大写，需要用到字符串的toUpperCase()方法

2.去掉-，需要用到字符串方法split()，这样就转成数组了，但数组中的每一个元素依然是字符串，所以可以用循环的方法取到第一个后面的元素

3.取第一个后面的元素的第一个字符，需要用到字符串的charAt()方法

4.第一个字符后面的字符，可以通过字符串截取方法substring()获得，这时把两个拼接再赋回给原数组。即完成了转换

5.用join()方法把数组的逗号去掉，拼接成字符串

var str="border-bottom-color";
function tf(){
  var arr=str.split("-");
  for(var i=1;i<arr.length;i++){
    arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
  }
  return arr.join("");
};
tf(str);

正则的方法

分析：

1.正则为-字符，即var re=/-\w/g;匹配到-字符

2.用正则的replace()方法替换这个规范为去掉-以及字符大写，通过回调函数第一个参数直接转大写

var str="border-bottom-color";
function tf(){
  var re=/-(\w)/g;
  str=str.replace(re,function($0,$1){
    return $1.toUpperCase();
  });
  alert(str)
};
tf(str);

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

# JS # 字符串 # 驼峰格式 # js写一个字符串转成驼峰的实例 # JavaScript中的连字符详解 # js中的eval()函数把含有转义字符的字符串转换成Object对象的方法 # 将JSON字符串转换成Map对象的方法 # Javascript将双字节字符转换成单字节字符并计算长度 # javascript时间戳和日期字符串相互转换代码(超简单) # JSON字符串转换JSONObject和JSONArray的方法 # JS中对象与字符串的互相转换详解 # JSON的String字符串与Java的List列表对象的相互转换 # JavaScript实现字符串与日期的互相转换及日期的格式化 # js实现字符串和数组之间相互转换操作 # 实例详解JSON数据格式及json格式数据域字符串相互转换 # JS实现的驼峰式和连字符式转换功能分析 # 第一个 # 相关内容 # 可以用 # 遍历 # 感兴趣 # 数据结构 # 可以通过 # 给大家 # 更多关于 # 则为 # 所述 # 到第 # 回调 # 程序设计 # 转成 # 组中 # 操作技巧 # 完成了 # 讲述了 # ff

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：CSS3阴影效果怎么加_textshadow和boxshad

下一篇：阿里云网站制作公司,阿里云快速搭建网站好用吗？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：CSS3阴影效果怎么加_textshadow和boxshad

下一篇：阿里云网站制作公司,阿里云快速搭建网站好用吗？