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

朱雀 2022-10-10 11:29 19阅读 0赞

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

22.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 方式二  
第二种方案是在字符维度进行动刀，因为小写变大写的字符都是在’-‘后面的字符，所以在遇到’-'后将其变为大写，其步骤如下：

首先将字符串分割成字符数组；  
遍历该数组，当遇到’-'元素，删除该元素；  
将后慢的字符元素变为大写；  
连接数组，返回结果。  
// 操作字符数组  
function transformStr2CamelCase2(str) \{  
if (typeof(str) !== ‘string’) \{  
return ‘’;  
\}

console.log(transformStr2CamelCase2(‘hello-world’)); // helloWorld  
复制代码  
22.3 方式三  
方式三则是利用正则的方式去匹配字符串中的内容，然后将匹配到的内容替换掉，其步骤如下：

确定对应的正则表达式；  
利用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  
复制代码  
1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star： [http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu] 不胜感激 ！  
来自 “开源世界 ” ，链接： [https://ym.baisou.ltd/post/746.html][https_ym.baisou.ltd_post_746.html] ，如需转载，请注明出处，否则将追究法律责任。

[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu
[https_ym.baisou.ltd_post_746.html]: https://ym.baisou.ltd/post/746.html