Преобразование случая в JavaScript

Автор оригинала: Zell Liew.

Я получил ГДР по поиску Google для коммунальных услуг Case. Полезные я нашел ( VOCA и Case Case ) Оба требуют среды, которая позволяет мне использовать NPM.

Но я использовал ванильный JavaScript. Я не хотел включить какие-либо набор инструментов в этом проекте, и я неохотно отправляю асинхронный запрос, чтобы загрузить модуль только для преобразования Case.

Поэтому я решил написать набор коммунальных коммунальных услуг.

Это проще, чем я думал.

Общие случаи

Я обычно использую эти случаи при записи HTML, CSS и JavaScript:

камера
Кебаб-корпус
Случай предложения
Название дела

Я не использую эти два случая, но я знаю, что они существуют.

Snake_Case.
Паскальчаз

Пока что я полагался на простые функции, которые преобразуют из одного случая в другое. Но я был понравился с написанием таких вещей, как CameltoTitle или CameltokeBab Отказ Намного приятнее иметь функцию, которая преобразует все случаи для того, что мне нужно.

Преобразование любого случая в шашбаб-корпус

Я начал преобразовывать вещи в Кебаб-чехол Потому что это было то, что мне нужно было, когда я искал утилиты преобразования в случае.

Превратить все случаи в Кебаб-чехол Я должен был рассмотреть возможные случаи. Вот случаи еще раз:

камера
Паскальчаз
Snake_Case.
Случай предложения
Название дела

Преобразование Snake_Case , Сейс предложения и Титульный случай в Кебаб-чехол это просто. Мне нужно только сделать две вещи:

Строчная все
Заменить _ и пробелы с -

Но я не могу начать с низкой ставкой все, если я хотел поддержать преобразование Case из камера и Pascalcase Отказ Я бы потерял точку слова разрыва.

Поэтому мне пришлось начать с поиска заглавных букв, которые обозначают начало нового слова (для CamelCase и Pascalcase ). Самый простой способ – это петлю через каждую букву и запустить простой /[A-Z]/ Regex. Это Regex ищет любую букву, которое между A и Z.

function toKebab (string) {
  return string
    .split('')
    .map((letter, index) => {
      if (/[A-Z]/.test(letter)) {
        // Capital letters
      }
      return letter
    })
    .join('')
}

Тогда я понизил заглавные буквы и добавил место перед ними. (Неважно, добавляю ли я пространство или _ , оба в порядке, поскольку я собираюсь заменить их с помощью - позже).

function toKebab (string) {
  return string
    .split('')
    .map((letter, index) => {
      if (/[A-Z]/.test(letter)) {
        return ` ${letter.toLowerCase()}`
      }
      return letter
    })
    .join('')
}

Примечание. Я уверен, что есть регулярное выражение, которое может выполнять эти три шага в одном. Это, вероятно, использует захватывающие группы и замещение, с которыми я не знаком. Я не пробовал, так как у меня не было времени, ни энергии, чтобы исследовать дальше. Если вы знаете хорошее регулярное выражение для этого, дайте мне знать!

Этот шаг преобразует случаи в следующее:

Case Case.
Паскаль Дело
Snake_Case.
Случай предложения
Название дела

В начале некоторых случаев есть пространство. Я удалил их с обрезать Отказ

function toKebab (string) {
  return string
    .split('')
    .map((letter, index) => {
      if (/[A-Z]/.test(letter)) {
        return ` ${letter.toLowerCase()}`
      }
      return letter
    })
    .join('')
    .trim()
}

Это дает мне следующее:

Case Case.
Паскаль Дело
Snake_Case.
Случай предложения
Название дела

Теперь я могу заменить оба _ и пробелы с - Отказ Это можно сделать с двумя заменить называет, как это:

1. Сначала заменить использование /_/g заменить все вхождения _ Отказ
1. Второе замечание использует /\ S +/ заменить все пробелы в - Отказ + Указывает «один или несколько», поэтому он соответствует двум пространствам в Титульный случай Отказ

export function toKebab (string) {
  return string
    // ...
    .replace(/_/g, '-')
    .replace(/\s+/g, '-')
}

Я могу объединить оба заменить звонит в одно Regex с [] Отказ Квадратные скобки указывают на значение или ценность.

export function toKebab (string) {
  return string
    // ...
    .replace(/[_\s]+/g, '-')
}

Это дает мне это:

верблюжий чехол
Паскаль-дело
змеиный случай
предписание
Название дела

Это даже работает для сложных смешанных случаев. Например, если вы попробуете Case_With-Long Name Вы получите Случай с длинным именем Отказ

Преобразование чего-либо на предписание

Я работал над этой утилитой дальше, так как хотел конвертировать камера в Сейс предложения Отказ

Сначала я боялся мысли о нахождении сходства между всеми 6 делом. Это было похоже на много работы.

Но я понял, что могу использовать мои Токбаб Функция, чтобы преобразовать все в Кебаб-чехол первый. Это использует преимущество работы, которую я уже сделала.

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

// Starting with toKebab
function toTitle (string) {
  return toKebab(string)
}

Теперь мне просто нужно конвертировать Кебаб-чехол к Титульный случай Отказ

Здесь мне нужно только сделать следующее:

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

export function toTitle (string) {
  return toKebab(string)
    .split('-')
    .map(word => {
      return word.slice(0, 1).toUpperCase() + word.slice(1)
    })
    .join(' ')
}

И я закончил!

Преобразование чего-либо в дело предложений

Это одинаково легко преобразовать все случаи в случаю предложений. Еще раз, я начал с преобразования вещей в Кебаб-чехол Отказ

export function toSentence (string) {
  return toKebab(string)
}

Теперь мне нужно только конвертировать Кебаб-чехол в Сейс предложения Отказ Есть две вещи, чтобы сделать:

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

Я могу сделать либо шаг первым. В этом случае я решил сделать заменить Шаг сначала, так как я могу цепить его после Токбаб Отказ

export function toSentence (string) {
  const interim = toKebab(string)
    .replace(/-/g, ' ')
  return interim.slice(0, 1).toUpperCase() + interim.slice(1)
}

Преобразовать что-нибудь в камеру

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

Я начинаю с Токбаб по-прежнему.

export function toCamel (string) {
  return toKebab(string)
}

На данный момент мне нужно только конвертировать Кебаб-чехол в камера Отказ

Я могу сделать это с помощью:

Разделение слова на каждом - Отказ Это создает массив слов.
Структура через массив и заглавнайте первое письмо, если это не первое слово.

function toCamel (string) {
  return toKebab(string)
    .split('-')
    .map((word, index) => {
      if (index === 0) return word
      return word.slice(0, 1).toUpperCase() + word.slice(1).toLowerCase()
    })
    .join('')
}

Просто как тот!

Библиотека преобразования

Я поместил добавление этих коммунальных услуг Case в Мой хранилище JavaScript Отказ Вы можете схватить их, если вы хотите их

Спасибо за прочтение. Эта статья была первоначально опубликована на мой блог Отказ Подпишись на Моя рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.