摘要：今天偶然看到一道笔试题，要求将中连缀形式的字符串转换成驼峰写法的字符串，这个题目本身不难，用一些简单的处理方法就能实现，但在于到底有多少种思路可以去解决这个问题呢。规定子字符串或要替换的模式的对象。但是中的字符具有特定的含义。
今天偶然看到一道笔试题，要求将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 本身。
以上是一种主要思路，具体实现方式上，可能有一些细节上的不同，但是都大同小异的，希望给新手一些参考。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105540.html
摘要：需要提醒读者的是，的很多例子都是通过来写的，但这并不是语法，后面我们会有单独的一小节讲解的基本语法，不过目前为止我们先将跟多精力放在上。 书籍完整目录 1.2 JSX 语法 showImg(https://segmentfault.com/img/bVvKLR); 官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html ...
摘要：需要提醒读者的是，的很多例子都是通过来写的，但这并不是语法，后面我们会有单独的一小节讲解的基本语法，不过目前为止我们先将跟多精力放在上。 书籍完整目录 1.2 JSX 语法 showImg(https://segmentfault.com/img/bVvKLR); 官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html ...
摘要：最强大的特性之一就是简化了对元素的操作。从图中，我们可以看出元素中父元素子元素之间的关系。被封装到对象中的元素会被自动地，隐式地循环遍历。访问从上可知，返回的是对象，但是我们有时也希望直接对元素进行操作。 DOM - Document Object Model，即文档对象模型，它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。 DOM...
摘要：前端开发规范文档规范目的使开发流程更加规范化。中的非注释类中文字符须转换成编码使用，以避免编码错误时乱码显示。文件规范文件名用英文单词，多个单词用驼峰命名法。书写规范命名规范。图片规范命名应用小写英文数字组合，便于团队其他成员理解。 Web前端开发规范文档 规范目的： 使开发流程更加规范化。 通用规范： TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键...
摘要：前端开发规范文档规范目的使开发流程更加规范化。中的非注释类中文字符须转换成编码使用，以避免编码错误时乱码显示。文件规范文件名用英文单词，多个单词用驼峰命名法。书写规范命名规范。图片规范命名应用小写英文数字组合，便于团队其他成员理解。 Web前端开发规范文档 规范目的： 使开发流程更加规范化。 通用规范： TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键...
阅读 3330·2019-08-30 13:15
阅读 1285·2019-08-29 18:34
阅读 657·2019-08-29 15:18
阅读 3356·2019-08-29 11:21
阅读 3106·2019-08-29 10:55
阅读 3540·2019-08-26 10:36
阅读 1756·2019-08-23 18:37
阅读 1712·2019-08-23 16:57
