命名风格互转

camel / Pascal / snake / kebab / CONSTANT 五种风格一键互转

命名风格转换:五种写法的区别与转换中的陷阱

五种风格

风格示例常见用在哪
camelCaseuserLoginCountJavaScript / Java 的变量与方法名
PascalCaseUserLoginCountC# / Java / TypeScript 的类型名
snake_caseuser_login_countPython / Ruby 的标识符、数据库列名
kebab-caseuser-login-countURL、CSS 类名、HTML 属性、文件名
CONSTANT_CASEUSER_LOGIN_COUNT常量的约定写法

工具的转换过程是先把输入拆成词,再按目标风格拼回去。所以理解转换行为的关键是"拆词的规则",而不是拼接。

拆词规则与它的边界

要正确拆分,必须先识别出词边界。工具采用三条规则:

规则例子结果
小写或数字后接大写 → 在此断开userLoginuser / login
连续大写后接"大写+小写" → 在最后一个大写前断开HTTPResponsehttp / response
非字母数字字符视作分隔符user-login_countuser / login / count

第二条规则专门用来处理缩写词。如果没有它,HTTPResponse 会被拆成 h / t / t / p / response,这显然是错的。只按"大写字母前断开"的简单实现会毁掉所有含缩写的名字,这是最常见的转换 bug。

但即使有这条规则,仍有无解的情况:

所以转换不是双向可逆的:userID → USER_ID → userId,往返之后就与原始写法不同了。想保真,就要在转换前确认原始写法,并检查结果。

转换时的实际陷阱

工具怎么用

输入任意一种风格的标识符,工具会一次给出全部五种风格的结果,直接复制需要的那一行即可。输入里的空格、连字符、下划线、点号等分隔符都会被识别为词边界。

适合重命名变量时确定目标写法、把后端返回的 snake_case 字段转成前端用的 camelCase、以及为 CSS 类名生成对应的 JS 标识符。转换在浏览器本地完成。

常见问题

怎么拆分词?

先按下划线、连字符、空格等分隔符切分,再处理驼峰边界(如 getUserInfo 拆成 user / get / info),统一转小写后重组。

支持中文标识符吗?

不支持。命名风格转换面向 ASCII 字母数字标识符;中文会作为非单词字符被忽略。