Создание URL-совместимых слаг с использованием JavaScript

JavaScriptJavaScriptBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") subgraph Lab Skills javascript/variables -.-> lab-28627{{"Создание URL-совместимых слаг с использованием JavaScript"}} javascript/data_types -.-> lab-28627{{"Создание URL-совместимых слаг с использованием JavaScript"}} javascript/arith_ops -.-> lab-28627{{"Создание URL-совместимых слаг с использованием JavaScript"}} javascript/comp_ops -.-> lab-28627{{"Создание URL-совместимых слаг с использованием JavaScript"}} end

Функция для преобразования строки в URL-совместимый слаг

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

  1. Откройте Терминал/SSH и введите node, чтобы начать практиковаться в написании кода.
  2. Используйте методы String.prototype.toLowerCase() и String.prototype.trim(), чтобы нормализовать строку.
  3. Используйте метод String.prototype.replace(), чтобы заменить пробелы, тире и нижние подчёркивания на - и удалить специальные символы.
  4. Реализуйте следующий код:
const slugify = (str) =>
  str
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, "")
    .replace(/[\s_-]+/g, "-")
    .replace(/^-+|-+$/g, "");
  1. Протестируйте функцию с вводом slugify('Hello World!');, и она должна вернуть вывод 'hello-world'.

Резюме

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