js 如何实现转驼峰处理

1，需求

在开发中，有时需要将中划线 -，下划线 _，冒号 : 这些连接符转为驼峰形式。

如果只有一个连接符，处理起来没有难度。难点是如何处理多个连接符。

举例：

el-button --> elButton
el-button:group --> elButtonGroup

2，实现和原理

element-ui 源码参考

element-plus 使用的 import { camelCase, upperFirst } from 'lodash'

const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g

const camelCase = function (name) {
  return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
    return offset ? letter.toUpperCase() : letter
  })
}

String.replace MDN 参考

1. replace 的第1个参数可以是正则表达式。
2. 第2个参数如果是函数，则会在匹配完成后调用，函数的返回值就是替换后的字符串。

注意：每当第1个参数匹配成功，第2个参数函数就会调用一次，这样就可以处理多个连接符了。
举例：下面的函数会执行3次。

const str = '123'
str.replace(/\d/g, function (match) {})

3，原理

1，正则

const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g

总共匹配2个字符，

1. 匹配中划线 -，下划线 _，冒号 :
2. 匹配除换行符之外的任何单个字符。

另外注意到有2个捕获括号，捕获到的内容会传递给 replace 的替换函数。

2，替换函数

function replacer(match, p1, p2, /* …, */ pN, offset, string, groups) {
  return replacement;
}

以 el-button 为例，只会匹配1次：
match（匹配的子字符串）： -b
p1（第1个捕获组，也就是正则的外层大括号）：-b
p2（第2个捕获组）：b
offset（原始字符串中匹配子字符串的偏移量，也就是-b 的偏移量）：2

后面2个参数用处不大。

再来看下源码，一目了然。

const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g

const camelCase = function (name) {
  // - 是 match，separator 是 p1，letter 是 p2
  return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
    return offset ? letter.toUpperCase() : letter
  })
}

---

以上。