跳到主要内容

大小写转换实战:从全大写到 camelCase,一篇讲透文本与代码命名

全大写、全小写、首字母大写、句首大写,加上 camelCase、snake_case、kebab-case、PascalCase 四种编程命名,本文把每种格式的用法、边界和批量处理讲清楚。

发布于 作者 李雷
#大小写转换 #命名风格 #文本处理 #前端开发

大小写转换实战:从全大写到 camelCase,一篇讲透文本与代码命名

文本的大小写看起来是小事,真做起来却最容易卡壳。改一篇标题的格式、把后端字段名改成前端的命名习惯、给一批设置项生成环境变量,这些活儿手敲都不难,可一旦量上来,手抖打错一个字母就得回头查半天。把规则交给工具,人只负责判断,效率和准确率都会高一截。

四种基础大小写到底各自管什么

最常用的四种是全大写(UPPER)、全小写(lower)、首字母大写(Title Case)和句首大写(Sentence case)。它们的区别不在难度,在于该大写哪些词。

全大写和全小写最直白,整段文本统一拉成一种。首字母大写要小心一个坑:它不会把每个词都顶格大写。像 to、of、and、up 这类小词通常保持小写,所以「speed up your site」转成 Title Case 是「Speed up Your Site」,不是每个词都大写的「Speed Up Your Site」。句首大写则只动每句话的第一个字母,其余照旧,适合把一段吼出来的全大写文案救回正常的阅读语气。

我自己最常用句首大写和 Title Case 的场合是处理投稿。有作者把标题打成「10 WAYS TO SPEED UP YOUR SITE」,我直接粘进大小写转换选 Title Case,立刻得到「10 Ways to Speed up Your Site」,小词的处理也对,不用整条重打,也不用自己纠结哪个词该大写。

四种编程命名风格的边界

写代码绕不开命名风格,主流就是四种:

  • camelCase,首字母小写,后面每个词首字母大写,JS 变量常用,例如 myVariableName。
  • PascalCase,每个词首字母都大写包括第一个,类名和组件名常用,例如 MyVariableName。
  • snake_case,全小写加下划线连接,例如 my_variable_name,Python 和数据库字段里常见。
  • kebab-case,全小写加短横线连接,例如 my-variable-name,CSS 类名和 URL 里常见。

camelCase 和 PascalCase 唯一的区别就是第一个字母大不大写,别小看这一点,在 React 里组件名首字母必须大写,变量名通常小写,搞反了直接报错。

一个真实例子:hello world 转成各种形态

拿最朴素的 hello world 走一遍,边界一眼就清楚:

原文:        hello world
camelCase:    helloWorld
PascalCase:   HelloWorld
snake_case:   hello_world
kebab-case:   hello-world
CONSTANT_CASE:HELLO_WORLD
Title Case:   Hello World
UPPER:        HELLO WORLD
lower:        hello world

注意 camelCase 和 PascalCase 把空格吃掉并用大小写标记词边界,snake_case 和 kebab-case 则用符号连接。理解这一层,你就知道为什么把整段话一次性转 CONSTANT_CASE 会出问题:「a b. c d」会被当成一个标识符压成单个 A_B_C_D。想要一行一个变量,先把输入拆成多行再转。

还有一个容易踩的细节是连写缩写。像 parseHTTPResponse,好的转换会识别大写连串和下一个词的边界,转 snake_case 得到 parse_http_response,缩写 HTTP 整体保留,不会被切成 h-t-t-p。逐字母拆开会毁掉真实缩写,这种边界判断手敲很难做对。

批量处理才是真正省时间的地方

单个词转转换很省心,价值真正放大是在批量场景。

接口返回的是 user_first_name、user_last_name、created_at 这种蛇形,可你的前端 state 要用驼峰。把这一组字段名一次粘进来切到 camelCase,立刻拿到 userFirstName、userLastName、createdAt,十几个 key 也不会手抖打错,比全局替换稳得多。

再比如同事丢给你一堆设置项,都是大白话:「max retry count」「api base url」「enable beta flag」。几行一起粘进去切到 CONSTANT_CASE,直接得到 MAX_RETRY_COUNT、API_BASE_URL、ENABLE_BETA_FLAG,几秒钟就能塞进 .env 文件。

最妙的是同一个标签同时产出两种写法。你画了个 UI 区块叫「Featured Product Card」,样式表要 .featured-product-card,组件名要 FeaturedProductCard,标签只粘一次,kebab-case 输出拿去写 CSS,PascalCase 输出拿去当组件名,两边天然对齐。

要注意中文和 emoji 的处理:在 camelCase、snake_case 这类代码命名模式下,它们因为没有明确的大小写规则会被当成分隔符;如果你要原样留住这些字符,改用 lowercase 或 UPPER。

顺手提一句:命名之后常接的下一步

把一句标题转成 kebab-case,往往是为了拿去做 URL 路径,这时再过一道slug 生成器清掉多余符号和重音,生成的链接更规范。两个工具配合,从一句人话到一条干净的 URL 一路顺下来。

所有转换都在浏览器本地用 JavaScript 完成,文本不上传服务器,也不写进 URL,字段名、内部标签、还没发布的文案都能放心粘进来。

Made by Toolora · Updated 2026-06-13