slug 转文字:把短横线串变回可读标题的完整做法
把 URL 路径、文件名、数据库列名这类机器味很重的字符串还原成人话,讲清短横线下划线点号怎么变空格,首字母怎么大写,以及自动生成标题、面包屑、CMS 标签的实际用法。
slug 转文字:把 my-blog-post 变回可读标题
写代码的人每天都在跟一堆不像人话的字符串打交道:URL 里的 getting-started-with-vue,文件名里的 summer_trip_2024,数据库里的 date_of_birth,还有代码里的 parseHTTPResponse。这些命名对机器友好,对眼睛不友好。当你要把它们摆到页面标题、面包屑导航或者表单标签上时,就得有人把它们翻回正常文字。这篇讲的就是这件事:怎么把一个 slug 还原成可读标题,以及背后那几条不起眼但很关键的规则。
slug 到底是什么,为什么要反着转
slug 是一段被刻意压扁的字符串。空格被换成短横线,大写被压成小写,标点被删掉,目的是让它能安全地出现在 URL、文件名、变量名里。My Blog Post 进去,my-blog-post 出来,这一步叫 slugify。
问题在于很多场景需要反过来走。你有一列从 CMS 导出的 slug,想生成一份给人看的导航菜单;你有一张表的列名,想拿它们当表单字段标签;你在代码评审里读到一个驼峰命名的标识符,想把它念顺口。这时候要做的是 unslugify,也就是 slug 转文字:把分隔符换回空格,把每个词的首字母按需要大写。
四种分词边界,一次全认
最容易被忽视的一点是:可读字符串里的"词边界"不止一种。一个靠谱的转换要同时认四类:
- 短横线:
my-blog-post - 下划线:
user_first_name - 点号:
beach.sunset.final - 驼峰内部的大小写跳变:
parseHTMLContent
前三种好理解,把分隔符切开就行。驼峰是最难的一类。getUserName 要在每个"小写转大写"的位置插一刀,拆成 Get User Name。但缩写不能被打散:parseHTMLContent 应该读成 Parse HTML Content,而不是 Parse H T M L Content。判断方法是,一串连续大写后面跟着"一个大写加小写"的组合,那串大写就被当成一个完整的缩写词。HTML、API、URL 这些都靠这条规则保住。
如果一个字符串里几种分隔符混着用,比如 a-b_c.d,也得能干净地拆成 A B C D;my--blog__post 这种重复分隔符要合并成单个空格,输出里不能冒出连续两个空格。
首字母大写:标题式和它的小词例外
分完词,下一步是定大小写。常见的四种输出风格:
- 标题式:每个词首字母大写,做标题用
- 句首大写:只有第一个词大写,写正文用
- 全小写:全部压成小写
- 原样模式:只把分隔符换成空格,保留原来的大小写
标题式里有个容易出错的细节。真实的标题不会把每个词都大写。lord-of-the-rings 应该读成 Lord of the Rings,而不是 Lord Of The Rings。of、the、and、to、for 这类小词,除非排在第一个,否则保持小写。所以一个好用的转换会带一个小词开关,默认打开,让标题看起来像人手写的,不像机器盖的章。要注意这个开关只对标题式生效,在句首大写、全小写、原样这三种模式下拨它是没反应的。
一个具体例子
把 my-blog-post 输进去,默认标题式输出 My Blog Post。过程是这样:先按短横线把它切成三段 my blog post,全部转小写,再把每段首字母抬成大写,拼回去就是 My Blog Post。同一个输入切到句首大写读出 My blog post,切到全小写读出 my blog post。再看一个带小词的:getting-started-with-vue 在标题式加小词开关下读出 Getting Started with Vue,with 保持小写,因为它不是第一个词。
我自己常用的几个场景
我最常用它的地方是手写表单。一张表有 first_name、date_of_birth、is_active 这些列,我把列名整列粘进去,输出切成标题式,立刻拿到 First Name、Date of Birth、Is Active,直接当字段标签,不用一个一个去抠下划线。代码评审时也好用,碰到 parseHTTPResponse、shouldRetryRequest 这种标识符,转成 Parse HTTP Response 和 Should Retry Request,开会念出来顺口多了,写进注释也方便不写代码的人之后看懂。批量是关键:每行粘一个,各行各转,顺序不变,一列几十个键名几秒钟就变成一份可读列表。
自动生成标题、面包屑、CMS 标签
这套转换在真实系统里有几个高频落点。第一是页面标题:从 URL slug 反推出 <title> 或 <h1>,省得每个页面手写一遍。第二是面包屑导航,把路径 /blog/getting-started-with-vue/ 的每一段直接转成 Blog › Getting Started with Vue。第三是 CMS 和后台,把数据库键名、导出文件名转成给人看的列表。需要把可读文字反过来压成 slug 的话,用 slug 生成器;只是想换大小写风格,用 大小写转换 更直接。要现在就把一个 slug 还原成标题,打开 slug 转文字 粘进去就行,全程在浏览器本地跑,不上传任何内容。
Made by Toolora · Updated 2026-06-13