kebab-case 怎么转？短横线命名、网址与 CSS 规范

kebab-case 用小写字母加单个连字符连接词语，例如 user-profile。网址路径、CSS 类名、HTML 属性、npm 包名和静态资源文件名，基本都按这个写法来。

什么时候用短横线

做多语言站或博客时，文章标题要变成网址路径，中文标题翻成英文后还要拼接：user profile settings 会变成 /user-profile-settings/。手写容易多一个或少一个连字符，出现 // 或结尾的 -，上线后才被搜索引擎或分析工具当成两个不同的地址。

另一类场景是命名成套的 CSS 类名与文件名：product card 变成 product-card，配套的图片和图标也统一成 product-card-icon。样式表和资源目录一起改名时，统一规则比逐个核对更可靠。

规则是：先在「小写字母或数字 + 大写字母」的边界拆词，整体转小写，把连续的非字母数字字符合并成一个连字符，最后去掉首尾的连字符。所以 User Profile、user_profile、userProfile 都会得到 user-profile，中间不会留下空段。

三个检查点。第一，连字符只应出现在词之间，转换后如果看到 a--b 或结尾的 -，说明输入里本来就有连续符号，需要手动清一遍。第二，中文会被删除，做中文站的英文 slug 时要先翻译。第三，CSS 里以数字开头的类名不合法，2col 这类结果要改成 col-2。

这是一个有明确出处的差异：Google 的搜索文档说明，连字符被当作词分隔符，而下划线不被当作分隔符。所以 /user-profile 里的两个词能被分别识别，/user_profile 则可能被当成一个词。这也是各类 CMS 默认把标题转成连字符 slug 的原因。

局限也要说清楚：连字符不能用作 JavaScript 变量名，减法运算符会带来歧义，访问对象属性时得写 obj['user-name']。文件系统层面，连字符合法，但要注意不同系统对大小写的处理不同；连字符在 URL 里本身合法，不需要编码，而下划线同样合法，两者都不会被转义。

网址里该用连字符还是下划线？

优先用连字符。Google 明确把连字符视为词分隔符，下划线不作为分隔符处理，因此 /user-profile 更容易被拆成两个词理解。多数建站工具和 CMS 在生成 slug 时也默认使用连字符。

kebab-case 能直接当变量名吗？

不能。JavaScript、Python、Java 等语言的标识符不允许连字符，会被解析成减法。要用这类名字，只能作为对象的字符串键，通过 obj['user-name'] 访问，或者在进入代码前改成 camelCase 或 snake_case。

为什么转换结果里会出现两个连字符？

输入里本来就有连续的分隔符，例如 a - b 或 a--b，中间的符号被压成一个连字符后，两侧又各自留下了边界。工具不会做语义判断，转换后请检查首尾和连续连字符，需要时手动删掉。