短横线命名转换器 将文本转换为短横线命名格式，适用于CSS类、URL和文件名。

What Is 短横线命名转换器?

短横线命名法转换器将文本转换为短横线命名法格式，其中所有字母都是小写，单词由连字符分隔。短横线命名法是CSS类名、HTML属性、URL别名、npm包名称和许多框架中的文件名的标准命名约定。示例："Hello World"变为"hello-world」，"backgroundColor"变为"background-color"。这个名字来源于单词在连字符上的视觉相似性，类似于烤串上的物品。

Why Use 短横线命名转换器?

• CSS类名和自定义属性的标准格式
• 大多数Web框架中URL别名所需的格式
• 用于npm包名称和Git分支名称
• 在Web上下文中，多个单词标识符最易读的格式
• 可以从任何输入格式转换

Common Use Cases

CSS类

按照BEM或标准CSS命名约定格式化类名。

URL别名

从页面标题或内容标题创建SEO友好的URL路径。

npm包

按照npm的短横线命名法约定格式化包名称。

文件命名

为Angular、Vue和其他基于组件的框架以短横线命名法命名文件。

Technical Guide

短横线命名法转换遵循与下划线命名法相同的单词分割算法，但使用连字符代替下划线连接单词。输入在空白空间、下划线、点、现有的连字符和大小写转换处进行分割。所有单词都被转换为小写，并用单个连字符连接。连续的连字符会被折叠，前导/尾随连字符会被删除。算法正确处理骆驼命名法输入（"backgroundColor" → "background-color"）、帕斯卡命名法（"PageTitle" → "page-title"）和混合格式。请注意，由于连字符是减法运算符，短横线命名法标识符不能直接用作大多数编程语言中的变量名称。

Tips & Best Practices

• 1
  CSS属性是本地短横线命名法：background-color、font-size、border-radius
• 2
  BEM方法使用短横线命名法，带有双连字符：block__element--modifier
• 3
  短横线URL比下划线或驼峰式更适合SEO
• 4
  在JavaScript中，可以使用方括号表示法访问短横线属性：obj["my-prop"]
• 5
  Angular使用短横线命名法来选择组件（app-user-profile）

Related Tools

驼峰命名法转换器

将文本转换为适合JavaScript变量和函数名称的驼峰命名法格式。

📝 Text Tools

帕斯卡命名法转换器

将文本转换为帕斯卡命名法，适用于类名称和组件命名。

📝 Text Tools

下划线命名法转换器

将文本转换为下划线命名法，适用于 Python 变量和数据库列。

📝 Text Tools

点号格式转换器

将文本转换为点号格式，用于配置键和属性。

📝 Text Tools

别名生成器

使用自定义分隔符从文本中生成友好的URL别名。

📝 Text Tools

Frequently Asked Questions

Q 什么是短横线命名法？

短横线命名法使用所有小写字母，并在单词之间添加连字符：my-variable、page-title、nav-bar-item。

Q 为什么不能将短横线命名法用于JavaScript变量？

因为JavaScript中的连字符被解释为减号运算符，可以使用方括号表示法（obj["my-key"]）或驼峰式代替。

Q 短横线命名法是否比下划线命名法更适合URL？

Google将连字符视为单词分隔符，但不包括下划线，因此，短横线命名法在SEO中是首选的。

Q CSS自定义属性呢？

CSS自定义属性（变量）使用带有--前缀的短横线命名法：--primary-color、--font-size-large。

Q BEM与短横线命名法有什么关系？

BEM（块元素修饰符）以短横线命名法为基础，使用__表示元素，--表示修饰符。

About This Tool

短横线命名转换器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.