cached

/**
 * Camelize a hyphen-delimited string.
 */
const camelizeRE = /-(\w)/g
export const camelize = cached((str: string): string => {
  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
})

这段代码实现了一个将连字符分隔的字符串转换为驼峰命名法（camelCase）的工具函数，结合了正则表达式和缓存优化。以下是分步解读：

1. 核心功能

将形如 background-color 的连字符命名转换为 backgroundColor 的驼峰命名（小驼峰，首字母小写）。

2. 正则表达式解析

const camelizeRE = /-(\w)/g

• 匹配模式：连字符 - 后紧跟一个单词字符（字母/数字/下划线），如 -a、-b。
• **全局标志 g**：匹配所有符合条件的子串，不仅限于第一个。
• **捕获组 (\w)**：通过括号捕获连字符后的字符，供替换函数使用。

3. 缓存优化

export const camelize = cached((str: string) => { ... })

使用之前定义的 cached 装饰器缓存计算结果，避免重复输入时的二次计算。

4. 字符串替换逻辑

str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))

• 替换函数参数：
  • _：忽略整个匹配结果（如 "-a"），用下划线占位表明不使用。
  • c：正则捕获的连字符后字符（如 "a"）。
• 转换规则：将捕获的字符 c 转为大写（如 a → A），连字符被移除。
• 空字符串处理：c 存在时转换，否则替换为空（正则保证 c 必然存在）。

5. 转换示例

6. 关键细节

• 首字母处理：原字符串首字母保持原样（如 "Hello-World" → "HelloWorld"），需注意输入格式是否符合预期。
• 特殊字符：连字符后的非单词字符（如 - 后接符号）不会被匹配，保持原样。
• 性能优化：缓存机制对重复输入（如模板编译中的属性名）显著提升效率。

7. 对比其他驼峰化工具

• 与 _.camelCase 区别：此实现不处理空格/大写连字符（如 "Hello World" 不变），专注连字符分隔场景。
• 命名规范：输出为小驼峰（首字母小写），需配合大驼峰场景时可通过 capitalize 组合使用。

8. 典型应用场景

• Vue/React 组件的 props 命名转换
• CSS 属性名标准化（如 margin-top → marginTop）
• API 参数格式化（如 URL 参数键名处理）
• 配置文件中连字符命名的兼容处理

通过正则捕获+替换的核心逻辑，结合缓存优化，该函数高效实现了连字符命名到驼峰命名的转换，是前端框架和工具链中的常见实用工具。

本文地址：https://www.tides.cn/p_vue-source-camelize