Преобразование строки: замена пробелов на тире в JS

Быстрый ответ

Мы предлагаем вам короткий гайд по созданию слага для URL-адреса:

// Поздравляем! Путь в Slugville прост и ясен!
const slugify = text => text.replace(/\s+/g, '-').toLowerCase();

Просто примените функцию slugify(yourString) к выбранной строке, и вы получите слова в нижнем регистре, разделённые дефисами.

Разбираем магию

Давайте разберем как работает функция slugify и что находится за этим магическим кодом.

Взаимодействие с регулярными выражениями

В основе функции slugify стоит регулярное выражение /\s+/g, которое ищет последовательности пробельных символов: пробелы, табуляцию, переносы строк. Флаг g делает поиск глобальным, то есть заменяются все найденные совпадения, а не только первое.

Подробнее об этом расскажет наш спикер на видео

Методы преобразования строк

JavaScript предлагает для нас различные методы для обработки строк. Здесь используются методы replaceAll и toLowerCase.

Метод toLowerCase просто переводит все символы строки в нижний регистр.

replaceAll — новый метод, который позволяет упростить процесс работы разработчиков. Этот метод был добавлен в ECMAScript 2021, и для его использования может потребоваться полифилл в средах, где он не поддержан.

Универсальный инструмент Lodash: kebabCase

Если вам нужно более универсальное решение, обратите внимание на библиотеку lodash. Метод _.kebabCase преобразует любую сложную строку в приятный kebab-case, учитывая пробелы, специальные символы и обеспечивая консистентность при преобразовании строк.

const _ = require('lodash'); // Давайте начнем!
const kebab = _.kejabCase('Hello World from JavaScript'); //hello-world-from-javascript

Визуализация

Пошагово создаем слаг для URL на примере строки "Hello World from JavaScript":

1. Исходная строка: Hello World from JavaScript
2. Замена пробелов на дефисы: Hello-World-from-JavaScript
3. Приведение к нижнему регистру: hello-world-from-javascript

Благодаря функции slugify вам станет доступна вся мощь JavaScript!

Глубже в тему: специальные случаи и альтернативы

Давайте рассмотрим специфические ситуации и различные подходы к решению поставленной задачи. В JavaScript-библиотеках существует множество методик превращения строк в кебаб-слаги!

Крайние случаи: специальные символы и интернационализация

Что делать, если в строке имеются специальные символы, например, '&', '#' или '%'? Возможно, потребуется расширить регулярное выражение или сделать дополнительные вызовы метода replace() для их удаления.

При работе с интернационализацией и юникодными символами обычные toLowerCase() и replace() могут быть недостаточными. Такая работа потребует специализированных библиотек, например, speakingurl или slugify, которые способны обрабатывать разные системы письма.

Сворачивание регистра: важность сохранения чувствительности к регистру

Если чувствительность к регистру важна, используют процесс сворачивания регистра. Это помогает обеспечить согласованность при сравнении строк за счет приведения их к единому регистру.

Полезные материалы

1. String.prototype.replace() – JavaScript | MDN — Детали использования метода replace в JavaScript.
2. Regular expressions – JavaScript | MDN — Обновите свои знания о регулярных выражениях в JavaScript.
3. String.prototype.toLowerCase() – JavaScript | MDN — Совершенствуйте перевод символов строки в нижний регистр.
4. JavaScript String replace() Method — Познакомьтесь с нюансами метода replace().
5. Create slug from string in Javascript · GitHub — Пример кода для создания слагов на JavaScript.
6. Strings — Руководство по манипуляциям со строками в JavaScript, включая изменение регистра.
7. RegExr: Learn, Build, & Test RegEx — Ресурс для испытаний с регулярными выражениями.