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

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

Для быстрого преобразования строки, слова в которой разделяются пробелами, в формат camelCase, примените метод replace() в связке с регулярными выражениями:

const getCamelCase = s => s.toLowerCase()
  .replace(/[^a-z0-9](.)/g, (_, c) => c.toUpperCase()); // Мы преобразуем строку!

console.log(getCamelCase("string to camel case")); // в результате мы получим "stringToCamelCase"

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

Развиваем навыки работы с регулярными выражениями

Регулярные выражения – отличный инструмент, с помощью которого можно задавать паттерны для поиска в тексте и эффективно манипулировать строками, в том числе менять их стилистику.

Регулярное выражение /[^a-z0-9](.)/g используется для обнаружения любых символов, не являющихся буквами или цифрами и следующих за ними любых других символов.

Учёт "крайних" случаев

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

• Убедитесь, что ваше регулярное выражение корректно работает с символами в кодировке Unicode.
• Если строка начинается с пробела или специального символа, возможно, потребуется адаптировать функцию, чтобы ранее удалить эти элементы.

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

Поддержка кроссбраузерности

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

Соблюдение соглашений формата "верблюжийРегистр"

Важно удостовериться, что после преобразования строки с помощью регулярного выражения, первый символ остаётся в нижнем регистре. Это соответствует конвенциям формата camelCase:

const toPerfectCamelCase = s => {
  let alteredString = s.toLowerCase()
    .replace(/[^a-z0-9](.)/g, (_, c) => c.toUpperCase()); // Мы переформатируем строку!
  return alteredString.charAt(0).toLowerCase() + alteredString.slice(1); // Возвращаем строку к ожидаемому формату.
};

console.log(toPerfectCamelCase(" String to camel case")); // в результате получим "stringToCamelCase"

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

Рассмотрим пример применения нашего подхода к формированию строки в формате CamelCase:

Исходная строка: "hello world example"

Стратегия:

Первое слово:  "hello"
Остальные слова: ["world", "example"]

Результат в формате CamelCase:

Результат: "helloWorldExample"

• Первое слово остаётся в нижнем регистре.
• Остальные слова начинаются с заглавной буквы.
• Все слова объединяются в одну строку, пробелы удаляются.

Техники и инструменты

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

"Волшебная палочка" в виде библиотеки lodash

Библиотека lodash предлагает полезные инструменты для работы со строками в JavaScript:

const camelCaseStr = _.camelCase("string to camel case"); // Решение, предлагаемое lodash!
console.log(camelCaseStr); // "stringToCamelCase"

Детали применения lodash можно найти в официальной документации.

Магия ES6 и функционального программирования

Используя возможности ES6 и подходы функционального программирования, можно достичь целевого результата следующим образом:

const transformToCamelCase = str => str
  .split(' ')
  .map((word, index) => index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
  .join(''); // Больше, чем магия – это настоящий программистский фокус!

console.log(transformToCamelCase("string to camel case")); // в результате получим строку "stringToCamelCase"

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

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

1. String.prototype.replace() – JavaScript | MDN — Документация по методу replace в JavaScript.
2. javascript – Преобразование строки, слова в которой разделены пробелами, в формат camel case – Stack Overflow — Обсуждение различных подходов к преобразованию строк в формат camel case на Stack Overflow.
3. Регулярные выражения – JavaScript | MDN — Разбор применения регулярных выражений в JavaScript.
4. javascript – Как преобразовать строку с дефисами в формат camelCase? – Stack Overflow — Обсуждение методов преобразования строк в формат camel case с использованием специальных символов на Stack Overflow.
5. Методы работы со строками в JavaScript — Обширный обзор методов работы со строками в JavaScript.
6. JSMin — Минификатор JavaScript от Дугласа Крокфорда, позволяющий выполнять манипуляции с кодом JavaScript.
7. String.prototype.split() – JavaScript | MDN — Изучите метод split, который часто используется при преобразовании строк в формат camel case.