命名慣例指南

camelCase vs kebab-case

camelCase 移除分隔符並用大寫表示邊界；kebab-case 以連字號連接小寫單字。它們常在同一 Web 專案的不同層共存。

作者 Camel Case Converter 編輯團隊發布於 2026年9月12日最後審閱 2026年9月13日

快速比較

差異	camelCase	kebab-case
範例	backgroundColor	background-color
常見用途	JavaScript 識別字、object property、DOM style、application code	URL、slug、CSS 名稱、file/config、CLI 文字
單字分隔符	無	連字號 (-)
大小寫	內部單字首字母大寫	通常全部小寫
JavaScript 識別字	可以	未加引號時不行
典型 Web 邊界	application code	URL / CSS / text name

camelCase 可直接作為 JavaScript 識別字；CSS 的 background-color 在 style API 中會是 backgroundColor。

kebab-case 以連字號明確表示單字邊界，適合 URL、slug、檔名、CSS 與文字設定。

情境	建議格式	原因
JavaScript 識別字與 object property	camelCase	未加引號的 JavaScript 識別字不能包含連字號，而 camelCase 可以直接使用。
URL、slug 與許多 filename	kebab-case	連字號能在不依賴大小寫的情況下清楚標示單字邊界。
CSS property 與 JavaScript style 存取	CSS 用 kebab-case，JavaScript 用 camelCase	CSS 使用連字號名稱，DOM 與 React style API 則暴露對應的 camelCase 名稱。
Custom element 名稱	包含連字號的名稱	Custom element 名稱必須包含連字號，因此接近 kebab-case 的格式符合 platform 限制。

JavaScript 識別字使用 camelCase，外部名稱需要連字號時使用 kebab-case，只在該邊界轉換。

不要把 --brand-color 這類 CSS custom property 直接轉成 camelCase；開頭 -- 與名稱本身都有語意，而且名稱區分大小寫。
不要把 kebab-case 當成未加引號的 JavaScript 變數名，因為 parser 會把連字號解讀成減號。
不要把 URL 或檔名規則直接套用到 source code 裡的識別字。

貼上識別字即可查看目標格式與支援的開發者命名風格。轉換會在瀏覽器本機執行。

保留縮寫

輸入偵測：snake_case

kebab-case 輸出

user-profile-image-url

camelCase

userProfileImageUrl

PascalCase

UserProfileImageUrl

snake_case

user_profile_image_url

kebab-case

user-profile-image-url

CONSTANT_CASE

USER_PROFILE_IMAGE_URL

dot.case

user.profile.image.url

path/case

user/profile/image/url

轉換會在瀏覽器本機執行，輸入不會傳送到轉換伺服器。