JavaScript中连缀字符串转驼峰写法的方法汇总

SKYZACK 发布于2019-08-23 18:37 / 1867人阅读

摘要：今天偶然看到一道笔试题，要求将中连缀形式的字符串转换成驼峰写法的字符串，这个题目本身不难，用一些简单的处理方法就能实现，但在于到底有多少种思路可以去解决这个问题呢。规定子字符串或要替换的模式的对象。但是中的字符具有特定的含义。

今天偶然看到一道笔试题，要求将js中连缀形式的字符串转换成驼峰写法的字符串，这个题目本身不难，用一些简单的处理方法就能实现，但在于到底有多少种思路可以去解决这个问题呢。

@input: "get-element-by-id"
@output: "getElementById"

split( )方法

最简单的办法，就是先拆解成数组，然后对[1, arr.length]的元素进行首字母大写操作。

let str = "get-element-by-id";
let newStr = "";
let arr = str.split("-");
arr.forEach((v, k) => {
  if(k > 0) {
    v = `${v.chatAt(0).toUpperCase()}${v.substring(1)}`;
  }
  newStr = newStr.concat(v);
})
console.log(newStr);   // getElementById

另一种写法：

let str = "get-element-by-id";
let arr = str.split("-");
for(let i=1; i
如果嫌这种写法太过传统，也可以试试js数组的reduce方法来进行拼接：
let str = "get-element-by-id";
newStr = str.split("-").reduce((total, value, index, array) => 
  index === 0 ? total + value : total + value[0].toUpperCase() + value.slice(1), ""
); 
console.log(newStr);   // getElementById

这种写法更加的优雅，至于reduce方法四个参数的意义，可以在这里查询。
indexOf( )方法
利用indexOf( )可以拿到"-"的位置，但是indexOf只能字符首次出现的位置，所以要加一个循环：
let str = "get-element-by-id";
let arr = [];
let pos = str.indexOf("-");
while(pos > -1){
  arr.push(pos);
  pos = str.indexOf("-", pos + 1);
}
console.log(arr);   // [3, 11, 14]

现在拿到了所有"-"的索引位置，它们的index + 1就是我们需要变成大写的字母。
正则表达式
利用正则表达式，我们可以查找到特定形式的字符，并加以替换。
let str = ‘get-element-by-id’;
str = str.replace(/-(w)/g, ($0,$1) => {
  return $1.toUpperCase();
});
console.log(str);   // getElementById

这里主要用到的replace需要关注一下，在str.replace(reg, ( ) => { })方法中，用到了$0，$1两个参数，通过这里案例，顺便讲一下字符串的replace( )方法，replace( ) 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
stringObject.replace(RegExp/substr, replacement);



Params
Desc



RegExp/substr
必需。规定子字符串或要替换的模式的 RegExp 对象。


replacement
必需。一个字符串值。规定了替换文本或生成替换文本的函数。



这个方法执行的是查找并替换的操作，执行结果会返回一个新的字符串，会是用 replacement 替换了 Regexp 的第一次（或所有，取决于正则中有无全局标志g参数）匹配之后得到的。
值得注意的是，replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配上的都将由字符串替换。但是 replacement 中的$字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。


字符
替换文本



$1、$2、...、$99
与 RegExp 中的第 1 到第 99 个子表达式相匹配的文本。


$&
与 Regexp 相匹配的子串。


$`
位于匹配子串左侧的文本。


$"
位于匹配子串右侧的文本。


$$
直接量符号。



前面我们用到了 $0 和 $1，其实$n指的是利用正则在目标字符串匹配到的第n个内容，其值根据RegExp而定，如果参数只有两个，$0 和 $1建议由all 和 letter 代替，这样更有助于理解。在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串（对应例子中就是-e，-b，-i ），第二个参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数（对应例子中就是e，b，i ）。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。
以上是一种主要思路，具体实现方式上，可能有一些细节上的不同，但是都大同小异的，希望给新手一些参考。

Params	Desc
RegExp/substr	必需。规定子字符串或要替换的模式的 RegExp 对象。
replacement	必需。一个字符串值。规定了替换文本或生成替换文本的函数。

字符	替换文本
$1、$2、...、$99	与 RegExp 中的第 1 到第 99 个子表达式相匹配的文本。
$&	与 Regexp 相匹配的子串。
$`	位于匹配子串左侧的文本。
$"	位于匹配子串右侧的文本。
$$	直接量符号。

云服务器 GPU云服务器 javascript转字符串 asp中字符串转数字 16种常用的数据分析方法汇总 javascript的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105540.html

精益 React 学习指南（Lean React）- 1.2 JSX 语法

摘要：需要提醒读者的是，的很多例子都是通过来写的，但这并不是语法，后面我们会有单独的一小节讲解的基本语法，不过目前为止我们先将跟多精力放在上。书籍完整目录 1.2 JSX 语法 showImg(https://segmentfault.com/img/bVvKLR); 官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html ...

moven_j 2019-08-02 15:54 评论0 收藏0
细说 jQuery 元素篇（一） - 理解 DOM

摘要：最强大的特性之一就是简化了对元素的操作。从图中，我们可以看出元素中父元素子元素之间的关系。被封装到对象中的元素会被自动地，隐式地循环遍历。访问从上可知，返回的是对象，但是我们有时也希望直接对元素进行操作。 DOM - Document Object Model，即文档对象模型，它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 评论0 收藏0
Web前端开发规范文档

摘要：前端开发规范文档规范目的使开发流程更加规范化。中的非注释类中文字符须转换成编码使用，以避免编码错误时乱码显示。文件规范文件名用英文单词，多个单词用驼峰命名法。书写规范命名规范。图片规范命名应用小写英文数字组合，便于团队其他成员理解。 Web前端开发规范文档规范目的：使开发流程更加规范化。通用规范： TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键...

付伦 2019-08-28 18:16 评论0 收藏0
Web前端开发规范文档

摘要：前端开发规范文档规范目的使开发流程更加规范化。中的非注释类中文字符须转换成编码使用，以避免编码错误时乱码显示。文件规范文件名用英文单词，多个单词用驼峰命名法。书写规范命名规范。图片规范命名应用小写英文数字组合，便于团队其他成员理解。 Web前端开发规范文档规范目的：使开发流程更加规范化。通用规范： TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键...

Chiclaim 2019-08-21 10:39 评论0 收藏0