Chuyển văn bản sang kebab-case dash-case Miễn phí Trực tuyến An toàn

Vì sao bạn chuyển văn bản sang kebab-case

Hãy nhìn thanh địa chỉ của gần như bất kỳ trang web nào được chăm chút và bạn sẽ thấy các từ nối bằng dấu gạch nối: how-to-repot-a-fern, annual-report-2026, contact-us. Hãy nhìn bên trong một bảng định kiểu và tên lớp cũng làm vậy: main-menu, card-title, button-primary. Hãy nhìn các cờ của công cụ dòng lệnh và bạn thấy --dry-run và --no-cache. Đó là kebab-case, các từ viết thường và xâu dọc một dấu gạch nối như thịt trên một cái xiên, và là dạng mà web đã chọn cho những tên mà con người nhìn thấy. Chuyển văn bản sang kebab-case là lấy một cụm từ như bạn sẽ nói và biến nó thành một cái tên dùng được trong một địa chỉ, một lớp, một nhánh hay một tệp.

Hãy dán một dòng và đọc lại nó dưới dạng kebab-case. Phép chuyển đổi diễn ra trong trình duyệt của bạn, không có gì bạn gõ được gửi đi đâu cả, và các quy tắc theo ngôn ngữ của trang này chứ không phải tiếng Anh. Nó cắt dòng thành các từ, viết thường chúng và nối bằng dấu gạch nối. Một dòng đã viết ở dạng camelCase cũng được cắt ở đó, nên fooBar thành foo-bar. Bên dưới bạn sẽ thấy chính xác trang làm và không làm gì, cách nó xử lý các chữ cái khó của những ngôn ngữ khác nhau, vì sao web ưa dấu gạch nối hơn dấu gạch dưới, nơi nào kebab-case là quy ước, và những cái bẫy vướng người vội vàng chuyển văn bản sang kebab-case.

Phép chuyển đổi làm gì

Cắt, viết thường, nối

Trang trước hết cắt dòng thành các từ, viết thường từng từ và nối chúng bằng dấu gạch nối. Dòng Crème brûlée for 2 — straße 17, fooBar trả về là crème-brûlée-for-2-straße-17-foo-bar. Dấu thanh được giữ, các số vẫn là từ riêng, dấu gạch ngang và dấu phẩy biến mất, và fooBar bị cắt làm đôi ở chữ hoa.

Nơi các nhát cắt rơi vào

Ranh giới giữa các từ là một khoảng trắng, một dấu câu, một dấu gạch ngang, một ký hiệu hoặc bước chuyển từ chữ thường sang chữ hoa bên trong một từ. Vì vậy Main Menu, mainMenu, main_menu và main--menu đều thành main-menu. Phép chuyển đổi chấp nhận gần như mọi điểm xuất phát và luôn đến cùng một dạng, đó là điều khiến nó là bước cuối an toàn trước khi một cái tên đi vào bảng định kiểu hay địa chỉ.

Không có dấu gạch nối thừa

Các dấu phân cách lặp lại được ép thành một, và không có dấu gạch nối nào còn lại ở đầu hay cuối. Một cụm lộn xộn như ...Hello, World!! ra là hello-world, không có gì thòi ra ở hai đầu.

Phép chuyển đổi không làm gì

Nó không giữ dấu câu

Dấu phẩy, dấu chấm và dấu gạch ngang là ranh giới giữa các từ, không phải ký tự để mang sang. Đó là điều bạn muốn cho một lớp CSS hay một tên tệp, và không phải điều bạn muốn cho văn xuôi. Một câu chạy qua trang trả về thành một cái tên, và dấu câu gốc biến mất.

Nó không bỏ dấu thanh

Dòng giữ các chữ cái có dấu: crème-brûlée. Trình duyệt và máy chủ hiện đại chấp nhận chúng trong tên và địa chỉ, nhưng các công cụ cũ hơn có thể không, và một địa chỉ có dấu được thoát thành mã phần trăm khi sao chép. Nếu bạn cần chữ cái thường, trang URL slug cũng bỏ các dấu khỏi chữ cái Latin.

Nó không kiểm tra tên có còn trống không

Hai cụm từ khác nhau có thể tạo ra cùng một tên, và trang không biết một tên đã được dùng trên trang web hay trong dự án của bạn chưa. Hãy kiểm tra xung đột trước khi xuất bản.

Ngôn ngữ quan trọng

Chữ viết không có khoảng trắng

Cắt thành từ cần có ranh giới. Tiếng Trung và tiếng Nhật được viết không có khoảng trắng, nên một dòng bằng các chữ viết đó trả về thành một từ duy nhất. Trang thà nói rõ như vậy còn hơn cắt ở một chỗ nó đoán.

Tiếng Thổ Nhĩ Kỳ và chữ i có chấm

Viết thường theo quy tắc của ngôn ngữ của trang. Trong tiếng Thổ Nhĩ Kỳ dạng thường của I là ı, không có chấm, và dạng thường của İ là i. Một bộ chuyển đổi áp dụng quy tắc tiếng Anh sẽ đổi các từ. Trang này theo ngôn ngữ nó được viết.

Tiếng Đức và chữ s nhọn

Chữ ß trong tiếng Đức vốn là chữ thường và giữ nguyên: straße-17. Chữ hoa STRASSE trả về là strasse, vì dạng chữ hoa không nhớ nó đến từ ß hay từ hai chữ cái.

Chữ viết từ phải sang trái và chữ viết Ấn Độ

Tiếng Ả Rập, tiếng Do Thái và các chữ viết Ấn Độ có khoảng trắng giữa các từ và không có chữ hoa chữ thường. Trang nối các từ của chúng bằng dấu gạch nối và để nguyên các chữ cái.

Vì sao web ưa dấu gạch nối

Công cụ tìm kiếm đọc dấu gạch nối như khoảng trắng

Công cụ tìm kiếm coi dấu gạch nối trong một địa chỉ là dấu phân cách giữa các từ, nên how-to-repot-a-fern được hiểu là năm từ. Ngược lại, một dấu gạch dưới thường được đọc như chất nối, và how_to_repot_a_fern có thể được đọc là một từ dài. Với các địa chỉ người ta tìm kiếm, dấu gạch nối là lựa chọn tốt hơn, và thói quen đó đã lan ra cả web.

Khả năng đọc

Một dấu gạch dưới có thể biến mất khi một liên kết được gạch chân, vì đường kẻ nằm đúng chỗ dấu gạch dưới. Dấu gạch nối vẫn nhìn thấy. Đó là một điểm nhỏ, nhưng nó giải thích vì sao dạng này bám rễ trong các địa chỉ.

Không phân biệt hoa thường

Địa chỉ an toàn nhất ở dạng chữ thường, vì các phần của chúng có thể phân biệt hoa thường trên một số máy chủ. kebab-case là chữ thường theo định nghĩa, loại bỏ cả một họ lỗi.

Nơi kebab-case là quy ước

Địa chỉ web

Phần cuối của một địa chỉ trang, slug, gần như luôn ở dạng kebab-case. Với các địa chỉ cũng phải không có dấu thanh, hãy dùng trang URL slug.

CSS và HTML

Thuộc tính CSS ở dạng kebab-case (background-color, font-size), và hầu hết tên lớp và thuộc tính tùy chỉnh (--brand-color) cũng vậy. Các thuộc tính HTML như data-user-id theo cùng phong cách. Khi bạn nghĩ ra một tên lớp cho một thành phần, kebab-case là điều người đọc bảng định kiểu của bạn mong đợi. Nếu một thành phần cũng được vẽ với các kích thước, Chuyển px sang rem giúp với các độ dài.

Tên tệp và thư mục

Các từ chữ thường nối bằng dấu gạch nối là một tên tệp an toàn trên mọi hệ thống, đó là lý do các bộ tạo trang tĩnh và nhiều khung làm việc dùng chúng cho trang và tài nguyên.

Tùy chọn dòng lệnh và tên gói

Các cờ như --dry-run, tên gói trên các kho đăng ký như npm, và các nhánh Git như feature/login-form đều theo kebab-case. Một cụm từ được biến thành dạng này có khả năng được các công cụ bạn dùng chấp nhận.

Lisp và những người anh em

Dạng này đến từ Lisp, nơi dấu gạch nối được phép trong tên vì ngôn ngữ không dùng chúng làm dấu trừ khi không có khoảng trắng xung quanh. Cái tên kebab-case là một trò đùa về cái xiên, và nó bám lại.

Nơi nó không phải là quy ước

Python, Ruby và cơ sở dữ liệu

Những nơi này ưa dấu gạch dưới, vì dấu gạch nối sẽ bị đọc là dấu trừ. Với chúng, hãy dùng snake_case.

Biến JavaScript và Java

Một dấu gạch nối trong tên biến là phép trừ. Các ngôn ngữ này dùng camelCase. Kebab-case vẫn có thể xuất hiện trong giá trị chuỗi, tên tệp và CSS của chúng.

Văn xuôi và tiêu đề

kebab-case dành cho tên. Tiêu đề và câu nên giữ khoảng trắng và chữ hoa. Với một tiêu đề, hãy cân nhắc Title Case.

Cách chuyển văn bản sang kebab-case ở đây

Dán hoặc gõ văn bản của bạn

Nhập cụm từ vào ô đầu tiên. Kết quả hiện ngay ở ô thứ hai, để bạn xem nó đổi khi bạn gõ.

Kiểm tra cái tên

Hãy bảo đảm nó đọc tự nhiên và không quá dài. Địa chỉ dài hơn khoảng sáu mươi ký tự bị cắt trong kết quả tìm kiếm. Một slug tốt ngắn và nói lên trang là gì.

Sao chép nó

Bấm nút sao chép và dán kết quả vào nơi bạn cần. Với các dạng khác của cùng dòng, xem bên dưới.

Cùng một dòng trong cả bảy cách viết

Một bảng các dạng

Bên dưới công cụ chuyển đổi, một bảng cho thấy dòng ví dụ trong cả bảy dạng mà trang cung cấp: chữ hoa, chữ thường, Title Case, snake_case, kebab-case, camelCase và URL slug. Đó là cách nhanh để thấy cùng những từ trông thế nào trong từng dạng.

Các dạng này từ đâu ra

Hai bảng chữ cái

Chữ hoa và chữ thường từng là hai bảng chữ cái khác nhau. Chữ hoa là chữ La Mã, đục vào đá bằng cái đục; chữ thường xuống từ chữ thường Carolingian, được tạo hình bằng một cây bút di chuyển nhanh trên giấy da. Thợ in giữ hai loại trong những khay riêng, khay trên và khay dưới, và các tên đó bám lại rất lâu sau khi các khay đã biến mất.

Tên không có khoảng trắng

Các dạng lập trình trẻ hơn nhiều và được phát minh để giải quyết một vấn đề: một cái tên không thể chứa khoảng trắng. snake_case đến từ C thuở đầu, camelCase từ Smalltalk, kebab-case từ Lisp, và URL slug từ nhu cầu đặt một tiêu đề của con người vào một địa chỉ nơi khoảng trắng và dấu thanh không được phép.

Những cái tên dùng tốt trong thực tế

Ngắn và mô tả

Một tên kebab-case tốt nói lên thứ đó là gì bằng càng ít từ càng tốt. contact-us tốt hơn please-get-in-touch-with-our-team. Khi bạn chuyển văn bản sang kebab-case, hãy rút gọn cụm từ trước.

Ổn định theo thời gian

Tên trong địa chỉ là lời hứa: các trang khác liên kết đến chúng. Hãy chọn những tên vẫn đúng sau một lần thiết kế lại, và tránh ngày tháng và số phiên bản trừ khi chúng là trọng tâm.

Nhất quán trong cả dự án

Nếu mọi địa chỉ trang, tên lớp và tên tệp theo cùng một quy tắc, một người mới có thể đoán tên đúng. Khi bạn chuyển văn bản sang kebab-case cho một trang mới, hãy xem một trang bên cạnh để biết mẫu.

Không có từ dừng, nếu bạn thích

Một số người bỏ các từ như the, a và of khỏi địa chỉ để giữ chúng ngắn. Đó là chuyện sở thích: địa chỉ ngắn hơn gọn hơn, địa chỉ đầy đủ hơn đọc to nghe hay hơn.

Kebab-case trong một dự án thật

Đặt tên lớp CSS

Tên thành phần trong một bảng định kiểu đọc hay nhất khi là những cụm ngắn có gạch nối: card, card-title, card-footer. Các phương pháp luận như BEM thêm dấu gạch nối đôi và gạch dưới cho các biến thể, nhưng gốc của mọi lớp vẫn là một tên chữ thường có gạch nối. Khi bạn chuyển văn bản sang kebab-case cho một lớp, bạn đang cho lập trình viên kế tiếp một cái tên họ có thể đoán.

Đặt tên tệp và thư mục cho một trang web

Cấu trúc của một trang web thường phản chiếu địa chỉ của nó, với một tệp tên what-to-plant-in-april.html hoặc một thư mục tên garden-guides. Những tên có gạch nối nhất quán làm cấu trúc dễ duyệt, dễ liên kết và dễ chuyển giữa các hệ thống. Nếu một trang cần một tệp dữ liệu, Chuyển CSV sang JSON và các công cụ chuyển đổi khác của trang có thể chuẩn bị nó, và cùng quy tắc đặt tên áp dụng cho kết quả.

Đặt tên nhánh và thẻ trong quản lý phiên bản

Các nhóm dùng nhánh cho mỗi phần việc đặt tên chúng là fix-login-redirect hay add-search-filter. Tên nhánh được đọc trong danh sách, trong các yêu cầu gộp mã và trong trò chuyện, và một cụm ngắn có gạch nối dễ lướt. Nhiều nhóm thêm tiền tố là loại và một dấu gạch chéo: feature/add-search-filter. Để làm phần sau dấu gạch chéo, hãy chuyển văn bản sang kebab-case từ tiêu đề của công việc.

Đặt tên thuộc tính và thuộc tính tùy chỉnh

Các thuộc tính tùy chỉnh trong CSS, như --space-large và --brand-primary, theo quy ước ở dạng kebab-case, và các thuộc tính dữ liệu HTML cũng vậy. Nếu bạn cũng làm việc với màu sắc, ký hiệu Chuyển HEX sang RGB có thể cần cho các giá trị nằm sau những tên như vậy.

Giữ hồ sơ tên cũ và mới

Khi bạn đổi tên một loạt tệp hay lớp, hãy giữ một danh sách hai cột tên cũ và mới. Nó giúp tìm và thay thế, chuyển hướng và giải thích cho đồng nghiệp chuyện gì đã xảy ra. Một bộ chuyển đổi làm các tên mới nhất quán; danh sách làm thay đổi có thể kiểm toán.

Làm những địa chỉ bền lâu

Nghĩ đến người đọc trước

Một địa chỉ được con người đọc trước khi được máy đọc. Một địa chỉ ngắn, rõ cho khách truy cập biết liên kết sẽ đưa họ đến đâu và khuyến khích họ bấm. Khi bạn chuyển văn bản sang kebab-case cho một slug, hãy hình dung nó được dán vào một tin nhắn mà không có giải thích nào khác, và hỏi xem nó có nghĩa không.

Đừng lặp lại phần mục

Nếu địa chỉ đã có một thư mục tên recipes, trang không cần gọi là best-recipes-for-summer. Một cái tên như summer-salads là đủ, và địa chỉ đọc là recipes/summer-salads không có tiếng vang.

Những cái bẫy khi bạn chuyển văn bản sang kebab-case

Dùng nó nơi dấu gạch nối nghĩa là dấu trừ

Trong hầu hết ngôn ngữ lập trình, một dấu gạch nối bên trong tên là phép trừ. Đừng dùng kebab-case cho biến trong những ngôn ngữ như vậy.

Quên rằng cái tên có thể đã tồn tại

Hai trang có cùng slug xung đột. Hãy kiểm tra trang web hay dự án của bạn trước khi xuất bản.

Đổi một địa chỉ đã xuất bản

Một khi địa chỉ đã công khai, đổi nó làm hỏng các liên kết. Nếu bắt buộc, hãy thiết lập chuyển hướng từ địa chỉ cũ.

Tên rất dài

Địa chỉ dài khó chia sẻ và bị rút ngắn trong kết quả tìm kiếm. Hãy tỉa cụm từ trước khi chuyển đổi.

Những câu hỏi mọi người hay hỏi trước khi chuyển đổi

Dấu câu thì sao?

Nó được coi là ranh giới giữa các từ và không được mang sang.

Các số có được giữ không?

Có, như từ riêng, ngăn cách bằng dấu gạch nối.

Nó có xử lý đầu vào camelCase không?

Có. Một chữ hoa bên trong một từ đánh dấu một nhát cắt, nên fooBar thành foo-bar.

Tôi có thể dùng cho các ngôn ngữ khác không?

Có, với quy tắc của ngôn ngữ của trang. Các chữ viết không có khoảng trắng, như tiếng Trung và tiếng Nhật, trả về thành một từ duy nhất.

Văn bản của tôi có được tải lên không?

Không. Những gì bạn gõ ở đây không bao giờ được gửi đi đâu cả, nên một bản nháp, một mật khẩu hay tên khách hàng an toàn ở đây như trong một trình soạn thảo văn bản.

Làm sao để có dấu gạch dưới thay vào?

Bằng chuyển văn bản sang snake_case.

Một ví dụ cụ thể

Giả sử bạn đang thêm một mục mới vào một trang web và người biên tập đã đưa cho bạn tiêu đề Spring Garden: What To Plant In April (and Why). Bạn dán nó và đọc spring-garden-what-to-plant-in-april-and-why. Nó dài, nên bạn rút gọn tiêu đề thành What to Plant in April và chuyển đổi lại: what-to-plant-in-april. Bạn dùng nó làm tên tệp và làm địa chỉ, và cùng những từ đó, ở cùng dạng, làm lớp của tiêu đề trong bảng định kiểu. Ba nơi, một tên, viết một lần.

Một danh sách kiểm tra ngắn

Trước khi chuyển đổi

Rút gọn cụm từ về điều cái tên phải nói. Kiểm tra không có tên hiện có nào trùng.

Trong khi chuyển đổi

Dán cụm từ, đọc kết quả và bảo đảm nó tự nhiên và ngắn vừa phải.

Sau khi chuyển đổi

Dùng cùng một tên ở mọi nơi áp dụng, và thiết lập chuyển hướng nếu bạn từng đổi một địa chỉ đã xuất bản.

Những lỗi thường gặp

Dùng kebab-case cho tên biến

Một dấu gạch nối nghĩa là dấu trừ trong hầu hết ngôn ngữ.

Làm tên quá dài

Tên ngắn dễ chia sẻ và dễ nhớ hơn.

Đổi địa chỉ đã xuất bản

Nó làm hỏng liên kết. Hãy chuyển hướng nếu bắt buộc.

Văn bản của bạn ở lại trên thiết bị của bạn

Phép chuyển đổi diễn ra cục bộ. Văn bản của bạn được trình duyệt của chính bạn xử lý và không có gì được gửi đi đâu cả. Không có gì để xóa sau đó và không có tài khoản nào để tạo. Đó là cách đơn giản để chuyển văn bản sang kebab-case.

Tóm tắt

Để chuyển văn bản sang kebab-case ở đây, hãy dán một dòng và đọc lại nó với các từ được cắt, viết thường và nối bằng dấu gạch nối. Một dòng đã viết ở dạng camelCase cũng được cắt ở đó, nên fooBar thành foo-bar. Trang không giữ dấu câu: dấu phẩy, dấu chấm và dấu gạch ngang là ranh giới giữa các từ, không phải ký tự để mang sang, đó là điều bạn muốn cho một lớp CSS hay tên tệp và không phải cho văn xuôi. Cắt thành từ cần có ranh giới, nên tiếng Trung và tiếng Nhật, được viết không có khoảng trắng, trả về thành một từ duy nhất. Viết thường theo ngôn ngữ của trang. Web ưa dấu gạch nối vì công cụ tìm kiếm đọc chúng như khoảng trắng. Không có gì được tải lên.