前端百题斩【022】——开拓思路之三种方式实现字符串转驼峰

简介: 前端百题斩【022】——开拓思路之三种方式实现字符串转驼峰

相信大家都遇到过这样一个问题:将'-'连接的字符串转换为驼峰形式,例如将hello-word转换为helloWorld。这个问题虽然简单,但是如果仅仅用一种方案进行解决不能体现 出自己的能力,如果要想表现的与众不同,就要用多种方式解决。下面就通过三种方式解决该问题。


22.1 方式一


首先来看看第一种方案,是在字符串维度进行操作,其思想可以归结为以下几个步骤:


  1. 按照'-'进行分割;


  1. 从第二个元素开始进行遍历,将每个元素的首字母变为大写的;


  1. 将数组中的元素进行连接
// 操作字符串数组
function transformStr2CamelCase1(str) {
    if (typeof(str) !== 'string') {
        return '';
    }
    const strArr = str.split('-');
    for (let i = 1; i < strArr.length; i++) {
        strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].substring(1);
    }
    return strArr.join('');
}
console.log(transformStr2CamelCase1('hello-world')); // helloWorld


22.2 方式二


第二种方案是在字符维度进行动刀,因为小写变大写的字符都是在'-'后面的字符,所以在遇到'-'后将其变为大写,其步骤如下:


  1. 首先将字符串分割成字符数组;
  2. 遍历该数组,当遇到'-'元素,删除该元素;
  3. 将后慢的字符元素变为大写;
  4. 连接数组,返回结果。


// 操作字符数组
function transformStr2CamelCase2(str) {
    if (typeof(str) !== 'string') {
        return '';
    }
    const strArr = str.split('');
    for (let i = 0; i < strArr.length; i++) {
        if (strArr[i] === '-') {
            // 删除-
            strArr.splice(i, 1);
            // 将此处改为大写
            if (i < strArr.length) {
                strArr[i] = strArr[i].toUpperCase();
            }
        }
    }
    return strArr.join('');
}
console.log(transformStr2CamelCase2('hello-world')); // helloWorld


22.3 方式三


方式三则是利用正则的方式去匹配字符串中的内容,然后将匹配到的内容替换掉,其步骤如下:

  1. 确定对应的正则表达式;
  2. 利用replace方法,将对应的小写字符转换为大写。


// 利用正则
function transformStr2CamelCase3(str) {
    if (typeof(str) !== 'string') {
        return '';
    }
    const reg = /-(\w)/g;
    return str.replace(reg, function ($0, $1) {
        return $1.toUpperCase();
    });
}
console.log(transformStr2CamelCase3('hello-world')); // helloWorld
相关文章
|
7月前
|
存储 算法 前端开发
前端算法-删除字符串中的所有相邻重复项
前端算法-删除字符串中的所有相邻重复项
|
6月前
|
前端开发 JavaScript 索引
前端切图仔,常用的21个字符串方法(下)
前端切图仔,常用的21个字符串方法(下)
76 0
|
6月前
|
前端开发 JavaScript 索引
前端切图仔,常用的21个字符串方法(上)
前端切图仔,常用的21个字符串方法(上)
60 1
|
9月前
|
前端开发
前端——关于字符串的操作整理
前端——关于字符串的操作整理
|
9月前
|
前端开发
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
45 0
|
6月前
|
前端开发 JavaScript 程序员
不要再问我前端如何让字符串转成Date了
不要再问我前端如何让字符串转成Date了
44 0
|
6月前
|
前端开发 JavaScript
前端开发JavaScript中日期字符串直接比较的坑
前后端传参或者接受日期时间一般都会格式化成固定格式的字符串,如果格式是规范的 YYYY-MM-DD HH:mm:ss,其实是可以直接比较的,但是如果不规范直接字符串相比较就很容易出问题
64 0
|
7月前
|
机器学习/深度学习 存储 前端开发
手撕前端面试题【javascript~ 总成绩排名、子字符串频次统计、继承、判断斐波那契数组等】
在刷题之前先介绍一下牛客。Leetcode有的刷题牛客都有,除此之外牛客里面还有招聘(社招和校招)、一些上岸大厂的大佬的面试经验。 牛客是可以伴随一生的编程软件(完全免费),从学校到社会工作,时时刻刻你都可以用到,感兴趣的可以去注册试试可以伴随一生的刷题app
36 0
|
7月前
|
存储 前端开发 JavaScript
手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】
html页面的骨架,相当于人的骨头,只有骨头是不是看着有点瘆人,只有HTML也是如此。 css,相当于把骨架修饰起来,相当于人的皮肉。
42 0
|
9月前
|
前端开发
前端生成随机字符串
前端生成随机字符串
51 0