Конвертер kebab-case

Преобразуйте camelCase, snake_case или обычный текст в kebab-case (dash-case) для CSS-классов, URL и имён файлов. Учитываются аббревиатуры и цифры.

Пример: userAccountId → user-account-id

Вывод

Каждая строка преобразуется отдельно. Слова разделяются по пробелам, знакам препинания, _ - . / и границам camelCase; аббревиатуры вроде XML не разбиваются, цифры остаются при предыдущем слове.

Похожие Инструменты

Просмотреть Все

Что такое kebab-case?

Инструмент превращает идентификаторы и фразы в kebab-case (его же называют dash-case): слова строчными, соединённые дефисами. Используется для CSS-классов, HTML-атрибутов, флагов CLI и путей URL.

Как пользоваться kebab-case

  1. Введите или вставьте текст в поле Ввод — по одному идентификатору или фразе на строку (или нажмите Загрузить пример).
  2. Преобразованный текст сразу появится в поле Вывод.
  3. Нажмите Копировать, чтобы скопировать результат.

Пример

Ввод
getHTTPResponseCode
Вывод
get-http-response-code

Когда использовать kebab-case

Используйте для имён CSS-классов, файлов компонентов и параметров командной строки. Для SEO-адресов из заголовков с диакритикой лучше подойдёт генератор slug, убирающий диакритические знаки.

Как работает kebab-case

Ввод разбивается на слова, каждое переводится в нижний регистр, и слова соединяются знаком -. Слова выделяются по пробелам, знакам препинания и разделителям _ - . /, а также по смене регистра внутри идентификаторов: fooBar → foo + Bar, а подряд идущие заглавные (аббревиатура) остаются вместе (XMLHttpRequest → XML + Http + Request). Цифры остаются при предыдущем слове (Request2Go → Request2 + Go), апострофы внутри слов отбрасываются (don't → dont), поддерживаются буквы любых алфавитов (é, ñ, кириллица, греческий…). Каждая строка преобразуется отдельно.

Распространенные Случаи Использования

  • Создание имён CSS-классов из имён компонентов
  • Преобразование имён компонентов React в имена файлов
  • Генерация имён параметров CLI
  • Формирование сегментов пути URL из идентификаторов

Примечание по Безопасности

Всё выполняется локально в вашем браузере: вставленный код никуда не загружается.

Часто Задаваемые Вопросы

kebab-case — это то же, что slug?

Похоже, но этот инструмент сохраняет буквы с диакритикой, а генераторы slug обычно транслитерируют их в ASCII.

Как обрабатываются аббревиатуры?

getHTTPResponseCode превращается в get-http-response-code.

Работает ли с несколькими строками?

Да, каждая строка преобразуется отдельно.

Другие категории