前端百题斩【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
相关文章
|
存储 算法 前端开发
前端算法-删除字符串中的所有相邻重复项
前端算法-删除字符串中的所有相邻重复项
|
4月前
|
前端开发 JavaScript
前端基础(十五)_时间对象、字符串对象
本文介绍了JavaScript中时间对象的操作方法,包括获取和设置年、月、日、小时、分钟、秒等,以及如何格式化时间显示,同时提及了字符串对象的常用方法。
38 0
前端基础(十五)_时间对象、字符串对象
|
5月前
|
前端开发 JavaScript Java
【前端学java】详解java中的字符串操作(11)
【8月更文挑战第10天】详解java中的字符串操作
30 3
【前端学java】详解java中的字符串操作(11)
|
前端开发 JavaScript 索引
前端切图仔,常用的21个字符串方法(上)
前端切图仔,常用的21个字符串方法(上)
98 1
|
前端开发 JavaScript 索引
前端切图仔,常用的21个字符串方法(下)
前端切图仔,常用的21个字符串方法(下)
111 0
|
8月前
|
前端开发 JavaScript 流计算
前端 js 经典:字符串超全方法总结
前端 js 经典:字符串超全方法总结
85 0
|
前端开发
前端——关于字符串的操作整理
前端——关于字符串的操作整理
|
前端开发
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
69 0
|
前端开发 JavaScript 程序员
不要再问我前端如何让字符串转成Date了
不要再问我前端如何让字符串转成Date了
84 0
|
前端开发 JavaScript
前端开发JavaScript中日期字符串直接比较的坑
前后端传参或者接受日期时间一般都会格式化成固定格式的字符串,如果格式是规范的 YYYY-MM-DD HH:mm:ss,其实是可以直接比较的,但是如果不规范直接字符串相比较就很容易出问题
148 0

热门文章

最新文章