Kebab 字符集转换器 — 免费在线工具
什么是 Kebab 制式转换器?
Kebab Case（kebab-case）是一种命名规范，它使用连字符连接单词，并将所有字母转换为小写。结果看起来像这样：this-is-kebab-case——单词通过连字符串联起来，形似串在烤肉串上的食材。这是许多 Web 框架中 CSS 类名、URL 路径、HTML id 和数据属性以及文件名的标准命名格式。 本工具可将任何输入内容——无论是纯文本、camelCase、snake_case 还是 PascalCase——转换为简洁且 URL 安全的 kebab-case 格式，供您立即使用。
何时使用 Kebab 制式转换器?
在 CSS 类名和 BEM 风格的选择器中使用 kebab-case；在博客文章和产品页面的 URL 路径、HTML 数据属性以及 YAML 文件中的配置键中使用 kebab-case。前端开发者在 JavaScript 的 camelCase 属性名与 CSS 的 kebab-case 对应形式（例如 backgroundColor → background-color）之间切换时，经常会使用这个工具。 对于需要生成简洁 URL 路径的 SEO 专业人士而言，该工具同样大有裨益——搜索引擎将连字符视为单词分隔符，因此连字符命名法（kebab-case）天然具备 SEO 友好性。若需生成经过额外清理的 URL 路径，请尝试 URL 路径生成器。若用于 Python 或数据库命名，请使用 蛇形命名法转换器。
如何使用此工具
- 1Enter your text or phrase
- 2Click 'Convert' to get kebab-case
- 3Copy your URL-friendly slug
该工具会去除特殊字符，将所有内容转换为小写，并将空格、下划线、句点以及驼峰式命名法中的分隔符替换为连字符。最终生成的字符串始终是整洁、小写且以连字符分隔的。
示例
| Input | Output |
|---|---|
| Hello World | hello-world |
| backgroundColor | background-color |
| my_variable_name | my-variable-name |
| The Quick Brown Fox | the-quick-brown-fox |
| user_id_column | user-id-column |
规则与行为
- 所有单词均转换为小写。无论输入格式如何——全大写、首字母大写、驼峰式——输出中的每个字母都将变为小写。
- 单词之间用连字符（-）分隔。空格、下划线、句点以及驼峰式大小写转换均被替换为单个连字符，从而形成简洁的 kebab-case 格式。
- 特殊字符和标点符号已被移除。仅保留字母（a–z）、数字（0–9）和连字符，因此生成的内容可在 URL、CSS 选择器和 HTML 属性中安全使用。
相关工具
常见问题
什么是 kebab-case？
kebab-case 是一种命名规范，其中单词全部使用小写并以连字符分隔，例如 my-component-name。这种写法类似于串在烤肉签上的食材。它是许多 Web 框架（包括 Angular 和 Ember）中 CSS 类名、HTML 属性、URL 路径和文件名的标准命名规范。
何时使用 kebab-case？
CSS 类名（.nav-bar、.btn-primary）、HTML id 属性、URL 别名（/blog/my-post-title）、Lisp 和 Clojure 标识符、Angular 组件选择器以及 YAML 配置键均采用 kebab-case 命名法。这也是 npm 包名和许多 CLI 命令名的默认格式。
“kebab-case”和“spinal-case”或“lisp-case”是一样的吗？
是的，它们是完全相同的——所有单词均使用小写，并以连字符分隔。不同群体对这种写法有不同的称呼：Web 开发者称之为“kebab-case”，Lisp 程序员称之为“lisp-case”，还有人称之为“spinal-case”。无论您如何称呼它，我们的工具生成的结果都是一样的。
为什么 kebab-case 适合用于 URL？
像谷歌这样的搜索引擎将连字符视为单词分隔符，因此采用“kebab-case”格式的 URL（例如 /best-free-tools）会被正确地作为独立关键词进行索引。而在 snake_case 格式的 URL 中，下划线被视为单词连接符，因此对于符合 SEO 规范的 URL 路径而言，连字符是更优的选择。
我能把 PascalCase 转换为 kebab-case 吗？
是的。该工具会检测PascalCase和camelCase输入中的大写字母转换点，并在每个转换点处插入连字符。例如，'MyComponentName'将变为'my-component-name'，而'backgroundColor'将变为'background-color'。