首页 文本工具 字符串大小写转换器

字符串大小写转换器

支持8种格式实时转换:camelCase、PascalCase、snake_case、kebab-case、CONSTANT_CASE、Title Case、UPPERCASE、lowercase

实时预览
-

所有格式转换结果

camelCase
-
PascalCase
-
snake_case
-
kebab-case
-
CONSTANT_CASE
-
Title Case
-
UPPERCASE
-
lowercase
-

💡 使用提示

• 支持中划线、下划线、空格分隔的字符串自动识别
• 输入即实时转换,无需点击按钮
• 点击任意格式旁的复制按钮快速复制
• 批量模式支持每行一个字符串转换

🏷️ 相关标签

在线工具免费隐私安全文本文本工具纯前端转换单位

什么是字符串大小写转换工具?

字符串大小写转换工具是一款支持多种文本大小写格式互转的在线工具。在编程和文本处理中,不同的大小写约定有特定的使用场景:camelCase(小驼峰)用于 JavaScript 变量名、PascalCase(大驼峰)用于类名和 TypeScript 类型、snake_case(蛇形)用于 Python 变量和数据库字段名、kebab-case(短横线)用于 CSS 类名和 URL 路径、UPPER_CASE(全大写)用于常量定义和 SQL 关键字。本工具支持所有常见的大小写格式转换,同时提供全大写、全小写、首字母大写、句首大写等基础转换模式,帮助开发者快速在命名规范之间切换。

如何使用字符串大小写转换工具

  1. 步骤一:输入文本 — 在输入框中输入需要转换的文本,可以是单词、变量名、句子或整段文本。
  2. 步骤二:选择转换模式 — 点击对应的转换按钮:camelCase、PascalCase、snake_case、kebab-case、UPPER CASE、lower case、Title Case 等。
  3. 步骤三:获取转换结果 — 转换结果即时显示并支持一键复制。所有转换模式的结果同时展示,方便选择最适合的格式。

常见使用场景

场景一:API 字段名格式转换

后端 API 返回 snake_case 字段(如 user_name、created_at),但前端 JavaScript 使用 camelCase(userName、createdAt)。使用转换工具批量将 JSON 键名从 snake_case 转为 camelCase,适配前端命名规范。

场景二:CSS 类名规范化

将驼峰命名的 JavaScript 变量转为 kebab-case 的 CSS 类名。例如 JavaScript 中的变量 primaryButtonColor 对应 CSS 类名 .primary-button-color。

场景三:数据库字段与代码字段映射

数据库使用 snake_case(first_name),编程语言使用 camelCase(firstName)。转换工具帮助快速在两种命名风格间切换,生成字段映射代码。

技术原理

大小写转换的核心是"分词→重组"。首先识别输入文本中的单词边界(空格、下划线、连字符、驼峰的大写字母位置),将文本拆分为单词数组,然后按目标格式重组。

// 字符串大小写转换实现
function toWords(str) {
  return str
    .replace(/([a-z])([A-Z])/g, '$1 $2') // 驼峰拆分
    .replace(/[_\-]+/g, ' ')             // 分隔符替换
    .toLowerCase()
    .split(/\s+/);
}

const converters = {
  camelCase:  w => w[0] + w.slice(1).map(s => s[0].toUpperCase() + s.slice(1)).join(''),
  PascalCase: w => w.map(s => s[0].toUpperCase() + s.slice(1)).join(''),
  snake_case: w => w.join('_'),
  'kebab-case': w => w.join('-'),
  UPPER_CASE: w => w.join('_').toUpperCase(),
};

// 示例
const words = toWords("helloWorld");     // ["hello", "world"]
converters['snake_case'](words);         // "hello_world"
converters['kebab-case'](words);         // "hello-world"

最佳实践与注意事项

常见问题

Q:camelCase 和 PascalCase 有什么区别?

A>camelCase(小驼峰)首字母小写:userName、getTotal。PascalCase(大驼峰)首字母大写:UserName、GetTotal。JavaScript 中变量/函数用 camelCase,类名/组件名用 PascalCase。TypeScript 中类型/接口名也用 PascalCase。

Q:如何处理包含缩写的命名?

A>缩写词如 XML、HTML、API 在驼峰中应视为一个整体。"parseHTML" 转为 snake_case 应为 "parse_html" 而非 "parse_h_t_m_l"。高级转换工具会识别常见缩写词,但输入格式不明确时可能需要手动调整。

Q:Title Case 和 Sentence Case 有什么区别?

A>Title Case 每个单词首字母大写:"Hello World From DevToolHub"。Sentence Case 只有句首单词首字母大写:"Hello world from devtoolhub"。标题通常用 Title Case,正文句子用 Sentence Case。

Q:为什么 kebab-case 在 CSS 中更常用?

A>CSS 属性名本身就是 kebab-case(background-color、font-size),使用一致的命名风格提高可读性。此外 kebab-case 在 HTML 类名中更易阅读,且与自定义元素(Web Components)的命名规则一致(必须包含连字符)。

Q:能否批量转换整个文件的命名?

A>简单的全局替换有风险(可能误修字符串内容)。推荐使用 IDE 的重构功能(如 VS Code 的 Rename Symbol)或专用工具(如 codemod)进行安全的全局命名转换。本工具适合少量字符串的快速转换。

🔥 同类热门工具

🛠️
ASCII艺术生成器
ASCII Art Generator - Convert ...
🛠️
高级大小写转换器
高级大小写转换工具,支持大小写转换、驼峰命名、蛇形命名、帕斯...
🔢
字符计数器
字符计数器 - 统计文本字符数、中文字符、英文字母、数字、空...
🔡
汉字转拼音工具
在线汉字转拼音工具,将中文文本转换为拼音,支持全拼/首字母、...
📝
中文字数统计器
专业中文字数统计工具,统计汉字数、词语数、字符数、段落数、标...
🔎
查找替换
查找替换工具,支持正则表达式、批量替换、大小写敏感,全局替换...
🔢
行号添加器
行号添加器工具,支持添加/移除行号,可配置起始号、间隔、前缀...
🛠️
Lorem Ipsum生成器
免费的在线Lorem Ipsum占位文本生成器,支持中英文日...
📄
在线Markdown编辑器
在线Markdown编辑器,实时预览Markdown渲染效果...
🛠️
span class="zh-block">📝 Markdown预览器📝 Markdown Previewer
免费的在线Markdown编辑器,支持GFM语法、实时预览、...