Конвертировать текст в kebab-case dash-case Бесплатно Онлайн Безопасно

Зачем конвертировать текст в kebab-case

Посмотрите на адресную строку почти любого ухоженного сайта, и вы найдёте слова, соединённые дефисами: how-to-repot-a-fern, annual-report-2026, contact-us. Загляните в таблицу стилей, и имена классов делают то же: main-menu, card-title, button-primary. Посмотрите на флаги инструментов командной строки, и вы найдёте --dry-run и --no-cache. Это kebab-case — слова строчными, нанизанные на дефис, как мясо на шампур, и именно эту форму веб принял для имён, которые видят люди. Конвертировать текст в kebab-case — значит взять фразу так, как вы бы её произнесли, и превратить в имя, которое работает в адресе, классе, ветке или файле.

Вставьте строку и прочитайте её обратно в kebab-case. Преобразование происходит в вашем браузере, ничто из набранного никуда не отправляется, а правила следуют языку этой страницы, а не английскому. Страница режет строку на слова, переводит их в нижний регистр и соединяет дефисами. Строка, уже записанная в camelCase, режется и там, поэтому fooBar становится foo-bar. Ниже вы найдёте, что именно страница делает и чего не делает, как она обращается с трудными буквами разных языков, почему веб предпочитает дефисы подчёркиваниям, где kebab-case — соглашение, и ловушки, в которые попадают те, кто конвертирует текст в kebab-case в спешке.

Что делает преобразование

Разрезать, в нижний регистр, соединить

Сначала страница режет строку на слова, переводит каждое в нижний регистр и соединяет их дефисами. Строка Crème brûlée for 2 — straße 17, fooBar возвращается как crème-brûlée-for-2-straße-17-foo-bar. Акценты сохраняются, числа остаются отдельными словами, тире и запятая исчезли, а fooBar разрезан надвое по заглавной.

Где проходят разрезы

Граница слова — это пробел, знак препинания, тире, символ или переход от строчной буквы к заглавной внутри слова. Так, Main Menu, mainMenu, main_menu и main--menu все превращаются в main-menu. Преобразование принимает почти любую исходную форму и всегда приходит к одной и той же, что и делает его безопасным последним шагом перед тем, как имя попадёт в таблицу стилей или адрес.

Никаких лишних дефисов

Повторяющиеся разделители сжимаются в один, и ни одного дефиса не остаётся в начале или в конце. Неряшливая фраза вроде ...Hello, World!! превращается в hello-world, и ничего не висит по краям.

Чего преобразование не делает

Оно не сохраняет пунктуацию

Запятые, точки и тире — это границы между словами, а не символы для переноса. Это то, что нужно для класса CSS или имени файла, и не то, что нужно для прозы. Предложение, пропущенное через страницу, возвращается как имя, а исходная пунктуация исчезла.

Оно не убирает акценты

Строка сохраняет свои буквы с акцентами: crème-brûlée. Современные браузеры и серверы принимают их в именах и адресах, но старые инструменты могут не принимать, а адрес с акцентами при копировании превращается в процентные коды. Если вам нужны простые буквы, страница URL slug тоже снимает значки с латинских букв.

Оно не проверяет, свободно ли имя

Две разные фразы могут давать одно и то же имя, а страница не знает, используется ли имя уже на вашем сайте или в вашем проекте. Проверьте на совпадения, прежде чем публиковать.

Язык имеет значение

Письменности без пробелов

Для разрезания на слова нужны границы. Китайский и японский пишутся без пробелов, поэтому строка в этих письменностях возвращается одним словом. Страница предпочитает сказать об этом, а не резать там, где угадала.

Турецкий и i с точкой

Перевод в нижний регистр следует правилам языка страницы. В турецком строчная форма I — это ı без точки, а строчная форма İ — это i. Конвертер, применяющий английские правила, меняет слова. Эта страница следует языку, на котором написана.

Немецкий и острое s

Немецкая ß уже строчная и остаётся: straße-17. Заглавное STRASSE возвращается как strasse, потому что заглавная форма не помнит, пришла ли она от ß или от двух букв.

Письменности справа налево и индийские

В арабском, иврите и индийских письменностях между словами есть пробелы, но нет регистра. Страница соединяет их слова дефисами и оставляет буквы в покое.

Почему веб предпочитает дефисы

Поисковые системы читают дефисы как пробелы

Поисковые системы считают дефис в адресе разделителем между словами, поэтому how-to-repot-a-fern понимается как пять слов. Подчёркивание же обычно читается как соединитель, и how_to_repot_a_fern может быть прочитано как одно длинное слово. Для адресов, которые ищут люди, дефисы — лучший выбор, и эта привычка распространилась на весь веб.

Читаемость

Подчёркивание может исчезнуть, когда ссылка подчёркнута, поскольку линия лежит ровно там, где подчёркивание. Дефис остаётся видимым. Это мелочь, но она объясняет, почему форма закрепилась в адресах.

Нечувствительность к регистру

Адреса безопаснее всего в нижнем регистре, поскольку их части на некоторых серверах могут быть чувствительны к регистру. kebab-case по определению в нижнем регистре, что устраняет целое семейство ошибок.

Где kebab-case — соглашение

Веб-адреса

Последняя часть адреса страницы, слаг, почти всегда в kebab-case. Для адресов, которые также должны быть свободны от акцентов, используйте страницу URL slug.

CSS и HTML

Свойства CSS в kebab-case (background-color, font-size), как и большинство имён классов и пользовательских свойств (--brand-color). Атрибуты HTML вроде data-user-id следуют тому же стилю. Когда вы придумываете имя класса для компонента, kebab-case — то, чего ожидает читатель вашей таблицы стилей. Если компонент к тому же рисуется с размерами, с длинами помогает px в rem.

Имена файлов и папок

Слова в нижнем регистре, соединённые дефисами, — безопасное имя файла в любой системе, поэтому генераторы статических сайтов и многие фреймворки используют их для страниц и ресурсов.

Параметры командной строки и имена пакетов

Флаги вроде --dry-run, имена пакетов в реестрах вроде npm и ветки Git вроде feature/login-form следуют kebab-case. Фраза, превращённая в эту форму, скорее всего, будет принята инструментами, которыми вы пользуетесь.

Лисп и его родственники

Форма пришла из Лиспа, где дефисы допускаются в именах, потому что у языка нет для них применения как для знаков вычитания без пробелов вокруг. Название kebab-case — шутка про шампур, и оно прижилось.

Где это не соглашение

Python, Ruby и базы данных

Они предпочитают подчёркивания, поскольку дефис читался бы как минус. Для них используйте snake_case.

Переменные JavaScript и Java

Дефис в имени переменной — вычитание. Эти языки используют camelCase. Kebab-case по-прежнему может появляться в их строковых значениях, именах файлов и CSS.

Проза и заголовки

kebab-case — для имён. Заголовки и предложения должны сохранять пробелы и заглавные. Для заголовка рассмотрите Title Case.

Как конвертировать текст в kebab-case здесь

Вставьте или наберите текст

Введите фразу в первое поле. Результат сразу появляется во втором, так что вы можете смотреть, как он меняется по мере ввода.

Проверьте имя

Убедитесь, что оно читается естественно и не слишком длинное. Адреса более чем примерно из шестидесяти символов обрезаются в результатах поиска. Хороший слаг короток и говорит, что это за страница.

Скопируйте

Нажмите кнопку копирования и вставьте результат туда, где он нужен. Для других форм той же строки смотрите ниже.

Та же строка во всех семи написаниях

Таблица форм

Под конвертером таблица показывает пример строки во всех семи формах, которые предлагает сайт: верхний регистр, нижний регистр, Title Case, snake_case, kebab-case, camelCase и URL slug. Это быстрый способ увидеть, как выглядят те же слова в каждой.

Откуда берутся эти формы

Два алфавита

Заглавные и строчные буквы когда-то были двумя разными алфавитами. Заглавные — римские, высеченные в камне резцом; строчные происходят от каролингского минускула, сформированного пером, быстро движущимся по пергаменту. Печатники держали их в отдельных кассах, верхней и нижней, и названия закрепились надолго после того, как касс не стало.

Имена без пробелов

Программистские формы гораздо моложе и были придуманы для решения одной проблемы: имя не может содержать пробел. snake_case вышел из раннего C, camelCase — из Smalltalk, kebab-case — из Lisp, а URL slug — из необходимости поместить человеческий заголовок в адрес, где пробелы и акценты не допускаются.

Имена, которые хорошо работают на практике

Короткие и описательные

Хорошее имя в kebab-case говорит, что это за вещь, как можно меньшим числом слов. contact-us лучше, чем please-get-in-touch-with-our-team. Когда вы конвертируете текст в kebab-case, сначала сократите фразу.

Стабильные со временем

Имена в адресах — это обещания: на них ссылаются другие сайты. Выбирайте имена, которые останутся верными и после редизайна, и избегайте дат и номеров версий, если они не составляют суть.

Согласованные по всему проекту

Если каждый адрес страницы, имя класса и имя файла следуют одному правилу, новичок может правильно угадывать имена. Когда вы конвертируете текст в kebab-case для новой страницы, посмотрите на соседнюю, чтобы увидеть образец.

Без служебных слов, если хотите

Некоторые убирают из адресов слова вроде the, a и of, чтобы сохранить их короткими. Это дело вкуса: более короткий адрес аккуратнее, более полный лучше читается вслух.

Kebab-case в настоящем проекте

Именование классов CSS

Имена компонентов в таблице стилей лучше всего читаются как короткие фразы с дефисами: card, card-title, card-footer. Методологии вроде BEM добавляют двойные дефисы и подчёркивания для вариантов, но основа каждого класса — по-прежнему имя в нижнем регистре с дефисами. Когда вы конвертируете текст в kebab-case для класса, вы даёте следующему разработчику имя, которое он может угадать.

Именование файлов и папок сайта

Структура сайта часто отражает его адреса, с файлом what-to-plant-in-april.html или папкой garden-guides. Согласованные имена с дефисами облегчают просмотр структуры, ссылки на неё и перенос между системами. Если странице нужен файл данных, CSV в JSON и другие конвертеры сайта могут его подготовить, а то же правило именования применяется к результату.

Именование веток и тегов в системе контроля версий

Команды, использующие ветки для каждой части работы, называют их fix-login-redirect или add-search-filter. Имя ветки читают в списках, в запросах на слияние и в чате, а короткую фразу с дефисами легко просматривать. Многие команды ставят приставку с типом и косой чертой: feature/add-search-filter. Чтобы составить часть после косой черты, конвертируйте текст в kebab-case из названия задачи.

Именование атрибутов и пользовательских свойств

Пользовательские свойства в CSS, такие как --space-large и --brand-primary, по соглашению в kebab-case, как и атрибуты данных HTML. Если вы работаете и с цветами, запись HEX в RGB может понадобиться для значений, стоящих за такими именами.

Ведение записи старых и новых имён

Когда вы переименовываете партию файлов или классов, ведите двухстолбцовый список старых и новых имён. Он помогает с поиском и заменой, с перенаправлениями и с объяснением коллеге, что произошло. Конвертер делает новые имена согласованными; список делает изменение проверяемым.

Создание адресов, которые служат долго

Сначала думайте о читателе

Адрес читают люди раньше, чем машины. Короткий и ясный подсказывает посетителю, куда ведёт ссылка, и побуждает нажать. Когда вы конвертируете текст в kebab-case для слага, представьте его вставленным в сообщение без других пояснений и спросите, имеет ли он смысл.

Не повторяйте раздел

Если в адресе уже есть папка recipes, странице не нужно называться best-recipes-for-summer. Имени вроде summer-salads достаточно, и адрес читается recipes/summer-salads без эха.

Ловушки при конвертации текста в kebab-case

Использование там, где дефис означает минус

В большинстве языков программирования дефис внутри имени — вычитание. Не используйте kebab-case для переменных в таких языках.

Забывание, что имя может существовать

Две страницы с одним слагом конфликтуют. Проверьте ваш сайт или проект, прежде чем публиковать.

Изменение опубликованного адреса

Когда адрес стал публичным, его изменение ломает ссылки. Если нужно, настройте перенаправление со старого.

Очень длинные имена

Длинные адреса неудобно передавать, а в результатах поиска их сокращают. Сократите фразу перед конвертацией.

Вопросы, которые задают перед конвертацией

Что происходит с пунктуацией?

Она считается границей между словами и не переносится.

Сохраняются ли числа?

Да, как отдельные слова, разделённые дефисами.

Справляется ли страница с вводом в camelCase?

Да. Заглавная внутри слова отмечает разрез, поэтому fooBar становится foo-bar.

Можно ли использовать её для других языков?

Да, по правилам языка страницы. Письменности без пробелов, такие как китайский и японский, возвращаются одним словом.

Загружается ли мой текст?

Нет. То, что вы набираете здесь, никогда никуда не отправляется, поэтому черновик, пароль или имя клиента так же безопасны здесь, как в текстовом редакторе.

Как получить вместо этого подчёркивания?

С помощью конвертировать текст в snake_case.

Разобранный пример

Допустим, вы добавляете новый раздел на сайт, и редактор дал вам заголовок Spring Garden: What To Plant In April (and Why). Вы вставляете его и читаете spring-garden-what-to-plant-in-april-and-why. Он длинный, поэтому вы сокращаете заголовок до What to Plant in April и конвертируете снова: what-to-plant-in-april. Вы используете его как имя файла и как адрес, а те же слова в той же форме — как класс заголовка в таблице стилей. Три места, одно имя, написанное один раз.

Короткий контрольный список

Перед конвертацией

Сократите фразу до того, что должно сказать имя. Проверьте, что ни одно существующее имя не совпадает.

Во время конвертации

Вставьте фразу, прочитайте результат и убедитесь, что он естественен и достаточно короток.

После конвертации

Используйте одно и то же имя везде, где оно применяется, и настройте перенаправление, если когда-либо измените опубликованный адрес.

Частые ошибки

Использование kebab-case для имён переменных

В большинстве языков дефис означает минус.

Слишком длинные имена

Короткие имена легче передавать и запоминать.

Изменение опубликованных адресов

Это ломает ссылки. Перенаправляйте, если нужно.

Ваш текст остаётся на вашем устройстве

Преобразование происходит локально. Ваш текст обрабатывает ваш собственный браузер, и ничего никуда не отправляется. Потом нечего удалять, и не нужно создавать учётную запись. Вот простой способ конвертировать текст в kebab-case.

Итог

Чтобы конвертировать текст в kebab-case здесь, вставьте строку и прочитайте её обратно с разрезанными словами, переведёнными в нижний регистр и соединёнными дефисами. Строка, уже записанная в camelCase, режется и там, поэтому fooBar становится foo-bar. Страница не сохраняет пунктуацию: запятые, точки и тире — границы между словами, а не символы для переноса, что нужно для класса CSS или имени файла и не нужно для прозы. Для разрезания на слова нужны границы, поэтому китайский и японский, пишущиеся без пробелов, возвращаются одним словом. Перевод в нижний регистр следует языку страницы. Веб предпочитает дефисы, потому что поисковые системы читают их как пробелы. Ничего не загружается.